Remix IDE Release 0.11.0

The Big News

• Workspaces are now in Remix
• Import from NPM with libname/path in all flavors of Remix IDE
• Another way to deep link to Remix

Files Explorer

Workspaces in the Files Explorer

Workspaces have replaced the browser folder in the Files Explorer.

Use the select box to choose a workspace

Workspaces should help clean up & organize your Files Explorer by allowing you to separate your projects.

Choose one of your workspaces by pulling down the select box.

Your current files in the browser folder will be moved to the default workspace folder.

Remixd in the Files Explorer

Now, there are 2 ways of getting to Remixd — from the Workspaces select box or from the Plugin Manager.

A new way of activating Remixd and getting to the Remixd modal.

But the biggest improvement for Remixd is the way it works with the File Explorer’s interface allowing you to create, delete, and rename both files and folders.

File type icons in the Files Explorer

We have updated the icon to the left of the file’s name to show its type. Its a modest change — but it hopefully will help you sort what you’ve got there.

Importing

Easily import an NPM dependency in Remix IDE the web app — which for simplicity, I’ll refer to as Remix Web.

You just need the Library’s name & its path after the import keyword.

import “@openzeppelin/contracts/token/ERC721/ERC721.sol”;
import "solidity-linked-list/contracts/StructuredLinkedList.sol";

This already works when using Remixd and when using Remix Desktop. When using Remix Web, you don’t need to have downloaded the dependency — Remix will get it for you via unpkg. (Thanks for the suggestion OpenZeppelin!)

All dependencies (whether from NPM or not) that are downloaded via the import keyword will be placed in a folder called .deps.

In the next release the .deps folder will be a READONLY folder.

Importing when using Remixd

When using Remixd — if you don’t have a .deps folder, Remix will make one and then will download the dependencies specified in your contract there.

Importing will now work the same way in Truffle and Remix IDE

Use your Truffle files in Remix or the other way around — you won’t need to change the import statements to get the code to work.

Using from the import buttons on the homepage

When importing using these buttons, the files will not be placed in the .deps directory, like when you use the import statement in a file.

Link to Remix with the contents of a file for the Editor

It is now possible to link to Remix with the contents of a Solidity file encoded in the URL like this:

https://remix.ethereum.org/#optimize=false&runs=200&evmVersion=null&version=soljson-v0.6.12+commit.27d51765.js&code=cHJhZ21hIHNvbGlkaXR5ID49MC42LjAgPDAuNy4wOwoKaW1wb3J0ICJodHRwczovL2dpdGh1Yi5jb20vT3BlblplcHBlbGluL29wZW56ZXBwZWxpbi1jb250cmFjdHMvYmxvYi9tYXN0ZXIvY29udHJhY3RzL2FjY2Vzcy9Pd25hYmxlLnNvbCI7Cgpjb250cmFjdCBHZXRQYWlkIGlzIE93bmFibGUgewogIGZ1bmN0aW9uIHdpdGhkcmF3KCkgZXh0ZXJuYWwgb25seU93bmVyIHsKICB9Cn0

Confused? Find that the url parameter above with code= and everything after that is the contents of a solidity file that has been base64 encoded. Remix will take that URL and turn it into:

Thanks for the suggestion Open Zeppelin!

All code samples that are brought in via the URL are placed in the code-sample workspace.

There are many ways to link to Remix to get the “linkee” (the person following the link) to the right content & functionality with the right focus. See our documentation about linking to Remix.

Gas Profiler

The Gas Profiler is great for understanding how much the execution and deployments cost will be. But more than that it shows you how much gas will cost per line of executed code.

Here are the steps for using the Gas Profiler:

1. Activate both this plugin and the Debugger.in the Plugin Manager.
2. Compile and go to Deploy & Run to make a transaction.

In the gutter of the Editor you see the line by line Gas costs:

Mousing over the warning symbol will give you a tool tip that shows the Gas cost of the line.

And the Gas Profiler plugin will show the transaction & execution costs of the transaction.

It’s very useful for understanding exactly where your contracts get expensive. A big shout-out to the plugins author: Edson Alcalá.

Learneth

We have updated several tutorials on our teaching tool, Learneth. This plugin contains short tutorials where one can learn more about Remix and Solidity. The tutorials can check students work and give hints about the right answer as well as showing a correct answer.

Its a great tool for teaching Solidity and smart contract coding patterns.

Try out the proxy contract tutorial.

By the way, the link to the proxy contract tutorial will go to remix and activate the Learneth plugin and will go to a specific tutorial. To learn more about the options for linking see our docs on the subject.

Hey you teachers: you aren’t limited to using our tutorials. Write your own — you just need to create some markdown files, some solidity examples, solidity test files, and correct answers and upload them to a repo. See more in our Learneth docs!

Thank You Esteemed Users

Please report any problems you see in Remix. Also send us your suggestions about any changes you’d like to see in Remix or any functionality you’d like to be added.

We strive to make the IDE more convenient and easy to use. You can reach us on Twitter, Gitter, and via email (remix@ethereum.org) TIA!