As blockchain ecosystems evolve, developers need robust tools to interact with decentralized networks. PolkadotJS stands out as the go-to suite of tools for developers building on the Polkadot and Substrate ecosystem.

Whether you’re building dApps, interacting with parachains, or simply querying blockchain state, PolkadotJS equips you with the right tools to dive in.

---

What Is PolkadotJS?

PolkadotJS is a collection of JavaScript libraries and tools that let developers interact with the Polkadot and Substrate-based blockchains. It provides everything from a web-based wallet (extension), to API libraries for on-chain communication.

Tool	Description
@polkadot/api	Main JS API to connect to Polkadot/Substrate chains
@polkadot/ui-*	UI helpers and components
@polkadot/extension-dapp	Allows dApps to connect to Polkadot.js browser extension
@polkadot/util-crypto	Utilities for cryptographic functions, keypairs, encoding

---

Installation

To start using PolkadotJS in a Node.js or React app:

npm install @polkadot/api @polkadot/util-crypto @polkadot/extension-dapp

---

Connecting to a Node

Here’s a simple script to connect to a Substrate chain:

import { ApiPromise, WsProvider } from '@polkadot/api';

async function connectToPolkadot() {
  const wsProvider = new WsProvider('wss://rpc.polkadot.io');
  const api = await ApiPromise.create({ provider: wsProvider });

  console.log(`Connected to Polkadot: ${api.genesisHash.toHex()}`);
}

connectToPolkadot();

You can switch to other chains like Kusama, Acala, or local Substrate chains by changing the WebSocket URL.

---

Using the Polkadot.js Browser Extension

The Polkadot.js extension is the MetaMask of the Polkadot ecosystem. It lets users manage accounts and gives dApps access with permission.

Connect your dApp:

import { web3Enable, web3Accounts } from '@polkadot/extension-dapp';

async function connectExtension() {
  const extensions = await web3Enable('My Dapp');
  if (extensions.length === 0) return;

  const accounts = await web3Accounts();
  console.log(accounts); // List of user accounts
}

---

Example: Reading On-Chain Data

Once connected to the API, you can read blockchain state:

const chainInfo = await api.rpc.system.chain();
console.log(`Connected to chain: ${chainInfo}`);

You can also access account balances:

const { data: balance } = await api.query.system.account(accountAddress);
console.log(`Free balance: ${balance.free.toHuman()}`);

---

Example: Signing a Transaction

import { web3FromAddress } from '@polkadot/extension-dapp';

async function transferDOT(api, sender, recipient, amount) {
  const injector = await web3FromAddress(sender);

  const txHash = await api.tx.balances
    .transfer(recipient, amount)
    .signAndSend(sender, { signer: injector.signer });

  console.log(`Transaction sent with hash: ${txHash}`);
}

---

Using in React

To use PolkadotJS in React apps:

• Initialize connection inside a useEffect
• Store the api instance in context or state
• Use hooks to trigger reads/writes

For larger apps, it’s best to encapsulate PolkadotJS logic in a React context or a custom hook (like usePolkadotApi()).

---

PolkadotJS empowers developers to build truly decentralized apps across the growing Polkadot ecosystem. Whether you’re creating NFTs, DeFi apps, DAOs, or parachains, PolkadotJS gives you a well-maintained, production-ready gateway to the chain.