Introduction

SoLive is the first open-source lightweight browser-based Solidity Integrated Development Environment (IDE) that can be integrated into websites, documents, and tutorials easily. SoLive, inspired by remix-IDE and react-live, enables users to edit, compile, deploy, and interact with Solidity smart contracts on their browsers. Moreover, SoLive is compatible with your mobile (Android/Apple).

Use cases:

1. Education: In the WTF Solidity tutorials, we will utilize SoLive to replace conventional plain code blocks, enabling students to read and run the code during learning.
2. Developer Onboarding: Layer2 projects can leverage SoLive to attract and onboard Ethereum developers.

Demo

Below is a SoLive Codeblock, try to play with the contract!

/**
   * @filename Storage.sol
   */

  // SPDX-License-Identifier: MIT

  pragma solidity >=0.7.0 <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;
      }
  }

How it works

SoLive is lightweight and flexible by design. It includes only the essential modules needed for editing, compiling, deploying, and interacting with smart contracts.

1. Edit Module: We employ the Monaco Editor as the code editor.
2. Compile Module: We utilize solcjs to compile smart contracts based on the chosen Solidity version.
3. Deploy Module: We deploy the compiled contracts to the local EVM using a combination of ethersjs V5 and ethereumjs vm.
4. Interact Module: To interact with the deployed contracts, we use ethersjs V5 and a custom ABI-UI converter.