Introduction

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.

Start here — the fastest path to a correct app

Do not hand-write a React app from scratch (it tends to drift into a viem dashboard that only prints a hash). Start from working code that already does the correct on-chain render loop:

npm create chainrender@latest my-app

The scaffold emits a project whose render loop is correct by construction — it compiles a component and renders it on-chain via renderComponent, not by fetching data with viem and hand-rendering it.

Building with an AI agent? Give it the MCP server & app-builder skill first (@chainrender/mcp + the chainrender-app-builder SKILL.md, which includes a complete examples/correct-react-app.tsx reference). The skill teaches the compose → grade → compile → validate → render workflow and the anti-patterns, so the agent builds a real on-chain app instead of a conventional dashboard. This is the single most important step for AI-assisted builds.

⚠️ Alpha · Testnet only. ChainRender is in active alpha, deployed on the Sepolia, Robinhood, and Circle Arc testnets — not Ethereum mainnet. Contracts, addresses, and APIs may change without notice. Do not use it with real funds or production assets yet.

🎨 No install? Use the visual builder — compose, grade, and deploy on-chain apps in the browser.

📦 Published on npm. The ChainRender toolchain is live:

• @chainrender/client — the SDK · npm install @chainrender/client
• create-chainrender — project scaffolder · npm create chainrender@latest my-app
• @chainrender/mcp — the AI/MCP server · npm install -g @chainrender/mcp

ChainRender is a framework for building application user interfaces that live entirely on-chain — no server, no hosting, no build pipeline, no trusted frontend. You compose a UI from a safe, closed vocabulary; it compiles to a content-addressed artifact whose hash is its permanent identity; and it renders from a single free eth_call that anyone can reproduce byte-for-byte against any RPC.

The problem it solves

Today, even a "decentralized" app usually has a centralized frontend: the smart contract is trustless, but the website that talks to it is hosted on a server someone controls. That server can change what you see, show you a different button than the one you think you're clicking, or disappear entirely. The contract is immutable; the interface is not. ChainRender closes that gap — the interface becomes as immutable, verifiable, and permanent as the contract it fronts.

What makes it different

• Fully on-chain. The UI is stored and rendered on-chain. There is no index.html on a server that could change under you. Rendering is a view call — free, and reproducible by anyone.
• Content-addressed. An app is its hash. renderHash(0xabc…) always produces the same output, forever. A malicious viewer cannot swap "Send 1 ETH" for "Send 100 ETH" — the hash would change, and you'd know.
• Trust-graded. Before you interact, a grade (A / B / C) tells you exactly how trustless the app is — whether it depends on any off-chain data, mutable pointers, or unproven assets — with an honest, itemized breakdown of every deviation.
• Safe by construction. You cannot express an unsafe UI. The vocabulary is closed; actions are declared, not arbitrary calldata; capabilities are enforced on-chain. A component that would smuggle a hidden transaction is refused at registration, not caught later.
• Themeable without redeploying. Colors, spacing, fonts, and chart dimensions are render-time parameters — a developer iterates on the whole page's look at zero gas, and only pays to commit a change when it's a real change to what the app is, not how it looks.

Who it's for

• App developers who want their interface to be as trustless as their contracts.
• Protocol teams who want a canonical, un-censorable, un-spoofable frontend for a contract.
• Users who want to verify that the app they're using is exactly what it claims to be.

What you'll do next

1. Quick Start — render an existing on-chain component in five minutes.
2. Your First App — compose, grade, and understand a component you built.
3. Concepts → Content Addressing — the mental model that makes the rest click.

A note on honesty. ChainRender's core discipline is that marketing never exceeds what the code enforces. Every claim in these docs corresponds to something the contracts actually guarantee. Where a guarantee has a boundary (e.g. the rendered output is trustless, but which RPC you read through is a separate metadata concern), the docs say so plainly rather than overclaiming.