JavaScript / TypeScript

For JavaScript and TypeScript work on OP Mainnet you have two well-established choices: web3.js, the original and most widely deployed library, and ethers.js, the leaner modern alternative. Both are actively maintained and both speak the standard eth_* JSON-RPC that OP Mainnet (chain ID 10, ETH for gas) exposes as an EVM-equivalent rollup. For new projects we recommend ethers.js v6 — it ships stronger TypeScript types and a noticeably smaller bundle, which matters for the browser-based Superchain dApps that front protocols like Velodrome.

Both web3.js and ethers.js are actively maintained and production-ready against OP Mainnet. For a fresh build, reach for ethers.js v6 first: its first-class TypeScript support and smaller bundle make it the better default for new Optimism projects.

Web3.js

web3.js is the original and still most widely used JavaScript API for talking to OP Mainnet, with a deep ecosystem of examples and plugins behind it. Install it with npm install web3, then instantiate a client by passing the OP Mainnet endpoint straight to the constructor: new Web3('https://optimism.therpc.io/YOUR_API_KEY'). That object exposes the full web3.eth namespace for balances, gas, and transactions.

1import Web3 from 'web3';
2const web3 = new Web3('https://optimism.therpc.io/YOUR_API_KEY');
3 
4// Get balance
5const getBalance = async (address) => {
6	const balance = await web3.eth.getBalance(address);
7	const balanceInEth = web3.utils.fromWei(balance, 'ether');
8	return balanceInEth;
9};
10 
11// Send transaction
12const sendTransaction = async (from, to, value) => {
13	const tx = {
14		from,
15		to,
16		value: web3.utils.toWei(value, 'ether'),
17	};
18	return await web3.eth.sendTransaction(tx);
19};

• GitHub: https://github.com/web3/web3.js
• Docs: https://web3js.readthedocs.io/
• Key features: complete OP Mainnet JSON-RPC coverage, WebSocket subscriptions, contract interactions, ENS resolution, and a large, well-documented community

Ethers.js

ethers.js is the modern, compact library with first-class TypeScript support, which makes it a natural pick for typed OP Mainnet front ends and backends. Install it with npm install ethers, then connect by passing the endpoint to a JsonRpcProvider: new ethers.JsonRpcProvider('https://optimism.therpc.io/YOUR_API_KEY'). The provider is your read gateway to chain ID 10 — balances, blocks, and call data.

1import { ethers } from 'ethers';
2const provider = new ethers.JsonRpcProvider('https://optimism.therpc.io/YOUR_API_KEY');
3 
4// Get balance
5const getBalance = async (address) => {
6	const balance = await provider.getBalance(address);
7	return ethers.formatEther(balance);
8};
9 
10// Send transaction
11const sendTransaction = async (wallet, to, value) => {
12	const tx = await wallet.sendTransaction({
13		to,
14		value: ethers.parseEther(value),
15	});
16	return await tx.wait();
17};

• GitHub: https://github.com/ethers-io/ethers.js/
• Docs: https://docs.ethers.org/
• Key features: first-class TypeScript types, smaller bundle size, hardened security defaults, ENS resolution, and an extensive test suite — all working against OP Mainnet

TypeScript Support

Both web3.js and ethers.js bundle their own TypeScript declarations, so you can import and use them on OP Mainnet with no separate @types/* package. That built-in typing pays off three ways: IDE autocompletion across the whole API, compile-time catches when a parameter or return shape is wrong, and types that double as inline documentation while you code.

1import { BigNumber } from 'ethers';
2 
3interface TransactionData {
4	to: string;
5	value: BigNumber;
6	gasLimit?: BigNumber;
7}
8 
9const createTransaction = async (data: TransactionData) => {
10	// Your implementation
11};

Node.js Usage

Both libraries run unchanged in Node.js, whether your project uses CommonJS require() or ESM import. That makes them a good fit for OP Mainnet backend services, indexers, and cron jobs that need to read chain ID 10 state or relay transactions away from the browser.

1// Web3.js in Node.js
2const Web3 = require('web3');
3const web3 = new Web3('https://optimism.therpc.io/YOUR_API_KEY');
4 
5// Ethers.js in Node.js
6const { ethers } = require('ethers');
7const provider = new ethers.JsonRpcProvider('https://optimism.therpc.io/YOUR_API_KEY');

Browser Usage

In the browser, import either library as an ES module and let a bundler like webpack or Vite tree-shake it into your OP Mainnet dApp. When you need the user's own wallet rather than a read-only endpoint — for example to have them sign a swap on a Superchain app — wrap the injected provider with new ethers.BrowserProvider(window.ethereum), which surfaces MetaMask and other EIP-1193 wallets through the same ethers API.

1// Using ES modules
2import { Web3 } from 'web3';
3// or
4import { ethers } from 'ethers';
5 
6// Using window.ethereum (MetaMask)
7const provider = new ethers.BrowserProvider(window.ethereum);