# 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](../concepts/building-correctly.md)**.

## 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:

```bash
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](../reference/mcp-and-skill.md)** 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](https://chainrender.org/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](./quick-start.md)** — render an existing on-chain component in five minutes.
2. **[Your First App](./first-app.md)** — compose, grade, and understand a component you built.
3. **[Concepts → Content Addressing](../concepts/content-addressing.md)** — 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.