Quick Start

The one idea that matters: a ChainRender app is a component compiled to bytes, registered on-chain, and rendered by an eth_call — the component IS the app. Do not fetch data with viem and hand-render it in React with ChainRender only printing a hash on the side; that is a conventional Web3 dashboard, not a ChainRender app. See Building Correctly.

Render a fully on-chain component in five minutes. No build pipeline, no server — just an RPC and the SDK.

Install

npm install @chainrender/client viem

Render an existing on-chain app

Every ChainRender app is addressable by a hash. Rendering it is a single free eth_call:

import { renderComponent } from "@chainrender/client/runtime";

const html = await renderComponent({ rpc: "https://ethereum-sepolia-rpc.publicnode.com", router }, "0x…", // a deployed app component hash
);

document.getElementById("app").innerHTML = html; // fully on-chain output

That's it. The HTML you just rendered came entirely from the chain. Reload it against a different RPC and you'll get byte-identical output. That reproducibility is the point: anyone can verify the app is what it claims to be.

Compose and grade your own

Before you deploy anything, compose an app from the vocabulary and grade it locally — the grade you see equals what the chain will compute (they're drift-locked):

import { compose, compileComponent, grade } from "@chainrender/client";

const app = compose.box([
  compose.heading("Claim your allocation"),
  compose.text("A fully on-chain claim page."),
  compose.button("Claim", {
    variant: "primary",
    action: { to: "0x…", sig: "claim(uint256)", args: "$amount" },
  }),
]);

const built = compileComponent(app);   // → content-addressed artifact
const g = grade(app);                  // → { letter: "A", word: "Trustless", … }

console.log(built.hash);               // this hash IS the app's identity, forever
console.log(g.letter, g.word);         // the trust grade, before you deploy

Scaffold a whole project

To start from a working template instead of a snippet:

npm create chainrender@latest my-app

You'll be asked what you're building (a single component, a mini-app, or a full app) and get a wired, rendering, grade-A project — see Scaffolding a Project.

Next steps

• Your First App — build and understand a component end-to-end.
• Concepts → The Render Pipeline — what actually happens when you render.
• Guides → Bind Live On-Chain Data — make your UI show real, live chain state.