How to convert ABI to HTML interface? For example:



I want to be able to interact with my contract.

  • 1
    I answered, let me know if it helped and please make sure you ask more detailed questions.
    – matank001
    Commented Oct 5, 2022 at 20:19

1 Answer 1


If you want to interact with your contract using VanillaJS, you first must include:

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

Than, if you have Metamask installed in your browser you can start with this code example I wrote:

 if (window.ethereum) {
    const accounts = await window.ethereum.request({method: 'eth_requestAccounts'});
    window.web3 = new Web3(window.ethereum);
    window.web3.eth.defaultAccount = accounts[0];
    const response = await fetch("ABI.json");
    const json = await response.json();
    window.contract = new window.web3.eth.Contract(json.abi, "0xCONTRACT_ADDRESS");
    console.log("No metamask")

In the end window.contract will have the functions you need. Don't miss the "0xCONTRACT_ADDRESS" that you need to replace by your deployed contract and ABI.json that you need to have in your file system.

Note: You should run your html using http server or Metamask wouldn't inject window.ethereum

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.