Viction
  • Getting Started
  • General
    • Overview
    • Viction Blockchain
      • PoSV Consensus
      • Comparison
    • Staking
      • Staking Requirements
      • Staking Rewards
      • How to stake on Viction Wallet
    • Network Information
      • Viction Mainnet
      • Viction Testnet
    • Viction RPC API
  • Smart Contract Development
    • Solidity
      • A Simple Smart Contract
      • Solidity by Example
    • Standards & Specification
      • VRC25 Specification
      • VRC725 Specification
    • IDEs and Tools
      • Remix
      • Ethers.js
      • web3.js
      • thirdweb CLI
    • Deployment & Verification
      • Hardhat
      • Foundry
  • DApp Development
    • Integration
      • Exchange/Wallet integration
      • VRC25 Exchange/Wallet integration
      • Viction Staking Governance
      • VIC ZeroGas
      • VRRF
    • Data and analytics
    • Embedded Wallet (MPC)
    • Walkthrough: Build a Dapp on Viction
      • Setup Environment
      • Write the Smart Contract
      • Interacting with the Dapp in a browser
  • Masternode
    • Requirements
    • Run a Full Node
      • Binary
      • Create a Viction Masternode
      • Tmn
      • Docker
    • Apply Your Node
    • Slashing Mechanism
    • Chain Data Snapshots
    • Troubleshooting
  • Viction Wallet
    • User Guide
      • Authentication
      • How to create a new wallet
      • How to restore a wallet?
      • Wallet settings
      • Send & Receive Tokens
      • Add custom token
      • Manage Tokens
      • Send NFT
      • General settings
    • Developer Guide
    • Privacy Policy
    • Term and Services
  • Viction Bridge
    • Spacegate
    • Arken Bridge
    • Hyperlane
  • Viction Data Availability
    • Viction DA RPC API
    • DA Integration Use cases
      • Simple Guide for Integrating OP Stack Rollup with Viction DA Layer
  • How to
    • How to Connect to Viction Blockchain
      • Coin98 Super Wallet
      • Metamask
      • Ledger
    • How to troubleshoot when the node is up but couldn't begin to sync block
    • How to Vote for Viction Saigon Network Upgrade Proposal
    • How to issue a token via VICIssuer
    • How to verify if a contract has been issued via VICIssuer
    • How to deploy the VRC725 contract
    • How to apply ZeroGas for VRC725 contract
    • How to Migrate Dapps from Ethereum
    • How to register Token or NFT logo on Vicscan
    • How to verify a contract on Vicscan
    • How to confirm a project on Vicscan
    • How to check if a token is gas sponsored on Viction
    • How to verify gas sponsored transactions
    • How to create Telegram Mini Apps
    • How to use VictionSafe (Multisig)
  • FAQ
    • APIs
    • General
      • Viction
      • Ecosystem
      • VIC - Economics
      • Contact & Support
    • Masternodes and Voting
      • Masternodes
      • Voter
    • Products
      • VicScan (Explorer)
      • VicMaster
      • VicStats
      • VicIssuer
        • How to Verify & Publish Contract Source Code on VicScan
      • Viction Wallet
      • Viction Data Availability Network
  • Legal
    • Terms of Use
    • Privacy Policy
  • Whitepaper and Research
  • Archive
    • TOMOE
    • How to Deploy a VRC25 Token on Viction
    • How to deploy an ICO smart contract on Viction
    • How to deploy an NFT token
    • An Example of Building a Dapp on Viction
    • Migrate Ethereum Dapp to Viction
    • TomoMasterDAO
      • Introduction
      • Governance model
        • On-Chain vs Off-Chain Voting
        • Board
        • Proposals
        • Voting and Outcome
      • Tokenomics
      • How to utilize and trade tDAO
      • Proposal guidelines for TomoMasterDAO
    • Old Viction Testnet
    • Deploy on Viction
      • CLI Commands
      • Viction Private Testnet Setup
Powered by GitBook
On this page
  • Accessing the Remix IDE
  • Remix Panels
  • Remix Execution Environments
  • Using Remix IDE to Compile and Deploy a Smart Contract
  • Remix Alternatives
  • Conclusion
  1. Smart Contract Development
  2. IDEs and Tools

Remix

PreviousIDEs and ToolsNextEthers.js

Last updated 1 year ago

Remix is a Solidity IDE that’s used to write, compile and debug Solidity code. is a high-level, contract-oriented programming language for writing smart contracts. It was influenced by popular languages such as C++, Python and JavaScript.

IDE stands for Integrated Development Environment and is an application with a set of tools designed to help programmers execute different tasks related to software development such as writing, compiling, executing and debugging code.

Before you begin using Remix to develop smart contracts, make sure you’re familiar with some basic concepts. In particular, give these articles about and a read.

What’s a Smart Contract/Dapp?

A smart contract is a trust-less agreement between two parties that makes use of blockchain technology, to enforce the parties to adhere to the terms, rather than relying on the traditional ways such as trusting a middleman or using laws to handle disputes.

Using the Ethereum blockchain, you can create smart contracts with the Solidity language (among others). Ethereum is not the only platform that can be used to create smart contacts, but it’s the most popular choice, as it was designed from the start to support building them.

stands for decentralized application and is a web3 application that can have a front-end written in traditional languages such as JavaScript, HTML, CSS and a smart contract (as back-end code) which runs on the blockchain. So you can simply think of a Dapp as the front end plus the associated blockchain smart contract(s).

Unlike the smart contract deployed on the blockchain itself, the front end of a Dapp can be either hosted on a centralized server like a CDN or on decentralized storage like .

Accessing the Remix IDE

You can access the Remix IDE in different ways: online, via a web browser like Chrome, from a locally installed copy, or from Mist (the Ethereum Dapp browser).

Using the In-Browser Remix IDE

You can access the Remix IDE from your web browser without any special installation. Visit and you’ll be presented with a complete IDE with a code editor and various panels for compiling, running and debugging your smart contracts. You’ll have a default example Ballot contract that you can play with. Beside you should refer document if need more detail.

Remix Panels

After seeing how to open the Remix IDE, let’s now see the various panels composing the IDE.

File Explorer

The file explorer provides a view with the created files stored in the browser’s storage. You can rename or delete any file by right-clicking on it, then choosing the right operation from the context menu.

Creating/Opening Files in Remix

You can create a new file in the browser local storage using the first button file on the top left. You can then provide a name and press Enter.

Using the second button from top left, you can open an existing Solidity file from your computer file system into the Remix IDE. The file will also be stored in the browser’s local storage.

Publishing Explorer Files as GitHub Gists

Using the third and fourth buttons from top left, you can publish files from the IDE as a public GitHub gist.

Copying Files to Another Instance of Remix IDE

Using the fifth button from top left, you can copy files from the local storage to another instance of Remix by providing the URL of the instance.

Connecting to the Local File System

Solidity Code Editor

The Solidity code editor provides the interface where you can write your code with many features such as syntax highlighting, auto-recompling, auto-saving etc. You can open multiple tabs and also increase/decrease the font size using the +/- button in the top-left corner.

Terminal

The terminal window below the editor integrates a JavaScript interpreter and the web3 object. You can execute JavaScript code in the current context, visualize the actions performed from the IDE, visualize all network transactions or transactions created from the Remix IDE etc. You can also search for data in the terminal and clear the logs.

Tabs Panel

The Tabs panel provides many tabs for working with the IDE:

  • the Compile tab: used for compiling a smart contract and publishing on Swarm and used for updating settings like the compiler version and many general settings for the editor.

  • the Run and Deploy tab: used for sending transactions to the configured environment.

  • the Settings tab: used for updating settings like the compiler version and many general settings for the editor.

  • the Plugin tab: used for install local plugin in Remix.

  • the Search tab: used for search file which locates in Remix.

  • the File Explorer tab: used for display all files and folders in Remix.

  • the Debug tab: used for debug when execute contract.

Remix Execution Environments

The Remix IDE provides many environments for executing the transactions:

  • JavaScript VM: a sandbox blockchain implemented with JavaScript in the browser to emulate a real blockchain.

  • Web3 Provider: a remote node with geth, parity or any Ethereum client. Can be used to connect to the real network, or to your private blockchain directly without MetaMask in the middle.

Using Remix IDE to Compile and Deploy a Smart Contract

For the sake of demonstrating what we can achieve using Remix IDE, we’ll use an example contract, and we’ll see how we can:

  • Compile the contract in Remix IDE.

  • See some warnings emitted by the compiler when best practices aren’t followed.

  • Deploy the contract on the JavaScript EVM (Ethereum Virtual Machine).

  • Make transactions on the deployed contract.

  • See example reads and writes in the terminal IDE.

pragma solidity >=0.8.2 <0.9.0;

/**
 * @title Storage
 * @dev Store & retrieve value in a variable
 * @custom:dev-run-script ./scripts/deploy_with_ethers.ts
 */
contract Storage {

    uint256 number;

    /**
     * @dev Store value in variable
     * @param num value to store
     */
    function store(uint256 num) public {
        number = num;
    }

    /**
     * @dev Return value 
     * @return value of 'number'
     */
    function retrieve() public view returns (uint256){
        return number;
    }
}

Next, create a new file by clicking on the button with the + icon.

And then you must enter a name , then press Enter:

A new tab will be opened in the code editor where you can start writing your contract. So just copy and paste the previous contract code in there.

Next, let’s deploy the contract with our RemixVM. Switch to the Deploy and Run Transaction tab, and select Remix VM from the dropdown menu.

Next, click the Deploy button below the contract name.

Once the contract is deployed successfully on the Remix VM, a box will be opened on the bottom as below.

Under the name and address of the deployed contract, we have some buttons with red and blue colors. Red buttons refer to actions that cause a write to the blockchain, where blue buttons refer to reading from blockchain.

The Remix VM provides 15 fake accounts with 100 ether each, which we can use to test the contract. You can select a current account from the dropdown menu with the name Account below the Environment dropdown.

You can see we have 2 functions, therefore we interact with smart contract easily. As below, we just called function store to change global variable number of contract.

After call a function in smart contract, you can check log in terminal as below:

When compile contract, we might run into several errors. Therefore , Remix support developer by using ChatGPT, as you can see below:

Remix Alternatives

There are many alternatives for easy development and deployment of smart contracts, such as:

Conclusion

With a basic introduction behind you, feel free to dive in deeper and experiment with changing the code and exploring the different functions and tabs the editor offers.

Please note that the file explorer uses the browser’s local storage by default, which means you can lose all your files if you clear or the operating system automatically clears the storage. For advanced work, it’s recommended to use - a Node.js tool (available from npm npm install -g remixd) which allows the Remix IDE to access your computer’s file system.

the last button can be used to connect the Remix IDE to your local file system if you’re running the tool.

Injected Web3: a provider that injects web3 such as , allow you to connect to real blockchain.

We’ll use the following example contract which implements a simple contract to store variable on blockchain:

Now, go ahead and open the Remix IDE from .

Create a new file
Deploy the contract

: Hardhat is a development environment for Ethereum software. It consists of different components for editing, compiling, debugging and deploying your smart contracts and dApps, all of which work together to create a complete development environment.

: a framework that allows you to easily develop and deploy Decentralized Applications (DApps).

: a bridge that allows you to visit the distributed web of tomorrow in your browser today. It allows you to run Ethereum DApps right in your browser without running a full Ethereum node. For how to develop with MetaMask, check this .

: Dapp is a simple command line tool for smart contract development.

different plugins for adding Solidity support to popular IDEs such as and etc.

We’ve introduced you to the Remix IDE for developing smart contracts for the Ethereum blockchain. You can find more detailed information in the .

Remixd
Remixd
Metamask
from this tutorial
remix.ethereum.org
Hardhat
Embark
MetaMask
faq
Dapp
this Visual Code plugin
this Atom plugin
docs
Solidity
blockchain
Ethereum
Dapp
Swarm
https://remix.ethereum.org/
Remix
Main screen
Workspace
Solidity Code Editor
Remix terminal
Remix tabs
Remix Execution Environments
Set filename
New blank file
Deployment environments
Contract is deployed
Built-in account for testing
Call a contract
Transaction log in terminal
ChatGPT support