Skip to content
A simple alternative to Remix IDE to develop and test Solidity Smart Contracts
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update bug issue template Mar 13, 2019
public
src Fix editor not refreshing on browser refresh Mar 28, 2019
.gitignore init Feb 2, 2019
.npmignore Update npmignore Apr 2, 2019
LICENSE First functionnal version Feb 4, 2019
README.md
babel.config.js init Feb 2, 2019
package-lock.json Setup npm install support Apr 8, 2019
package.json Add keywords in package.json Apr 8, 2019
replace.js First functionnal version Feb 4, 2019
solc-server.js Update npmignore Apr 2, 2019
solidity-ide.png Update screenshot Mar 10, 2019

README.md

Solidity IDE

A simple alternative to Remix IDE, working with Vue.js and Ganache

IDE screenshot

Solidity IDE is a light solution aimed at making Solidity development easier and more accessible, allowing you to concentrate only on your code by doing the Web3 part for you so you don't have to write anything else than Solidity.

This IDE is web-based but works with the file system. You can open and use any directory on your computer as your project's folder. Files will be saved and created on your disk, not in the browser's local storage.

Install

From NPM

npm install -g solidity-ide

On windows, you may need to install the build tools using: npm install --global windows-build-tools.

Then, run the IDE using:

solidity-ide

Using a release

Download the latest release and run the IDE using:

npm run ide

Build from source

Clone the repository and run npm install. On windows, you may need to install the build tools using: npm install --global windows-build-tools. Then build for a local usage using:

npm install
npm run build-local
npm run ide

The third command will run ganache and the solc server in the background, don't kill this process when using the IDE.


npm run ide accepts a path as parameter for the default directory:

npm run ide -- --path=path/to/project

You can pass ganache-cli parameters as well:

npm run ide -- --path=path/to/project -a 20 # Generate 20 accounts on startup

If you don't want to run a new ganache in the background (for example to use your own), use:

npm run ide -- --noganache

If you get an error like "Couldn't fetch..." on startup, this is probably because the IDE opened before the server finished loading. Just click "refresh" and you should be good to go.

Getting started

File management

To get started, I recommend creating a new folder for your project. Once done, run the ide by specifying the path of the folder you just created. You can also choose to open it through the GUI by clicking the "Open..." button at the top of the file browser. The IDE will remember the last opened directory if you proceed that way.

File browser

Only .sol files and directories are shown in the browser.
The next step is to create a file using the file browser. You can create files inside subdirectories (missing directories will be created) by writing the path with / separators. If you omit the .sol at the end of the filename, the IDE will add it automatically. You can start coding!

Account management

At the top right of the screen is the accounts panel. This panel allows you to manage ganache account. You can select which account you're currently using. When sending a transaction or depolying a contract, the fees will be withdrawn from the selected account.

Accounts panel

If the list is empty, this is probably because the IDE opened before the server finished loading. Just click "refresh".

You can choose another Ganache host if you want, by clicking the "Change Ganache host" button.

Compile, deploy and test

At the bottom right of the screen is the messages panel. This panel displays errors and warnings.

Clicking "compile" will save all changes. Pressing CTRL+S has the same behavior.
Clicking "deploy" will recompile everything and deploy all contracts in the currently open .sol file on the local ganache host.

Messages panel

A new panel will appear at the bottom of the screen. Each tab represents an instance of your contracts. You can test the contracts methods by clicking the action buttons.

Grey buttons are pure or view functions.
Cyan buttons are functions requiring a transaction. You can specifiy an amount to send to the contract using the inputs next to the button. The given amount will be withdrawn from the selected account in the accounts panel.
When a functions requires parameters, an aditionnal input is available. Data is written using the JSON format and parameters are comma-separated. (Strings must be surrounded by quotes for example)

The result of the call will be displayed in the text area next to the action buttons.

Contracts panel

For contributors

If you want to contribute to this project, fork, install the dependencies and run the development tools. On windows, you may need to install the build tools using: npm install --global windows-build-tools

npm install

# Run solc server and ganache
npm run server
# Or npm run server -- --path=path/to/project
# Also accepts ganache-cli parameters

# Run vue.js server
npm run serve

Donations

I'm working on this project in my free time. I would be extremely grateful if you decide to support me on this project.

BTC: bc1q9kphcsrqz595h9mu09rd3gumjug5ud7anksh2w
ETH: 0x93115bc1Ca07a3705e5a039D4509668629154D6C

TODO

  • Dark-themed inputs
You can’t perform that action at this time.