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



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

## Install

```bash
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`:

```ts
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):

```ts
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:

```bash
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](./scaffolding.md)**.

## Next steps

- **[Your First App](./first-app.md)** — build and understand a component end-to-end.
- **[Concepts → The Render Pipeline](../concepts/render-pipeline.md)** — what actually happens when you render.
- **[Guides → Bind Live On-Chain Data](../guides/bind-data.md)** — make your UI show real, live chain state.