Your First App

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.

Build, grade, and understand a real component end-to-end.

1. Compose

import { compose } from "@chainrender/client";

const app = compose.box([
  compose.heading("My First On-Chain App"),
  compose.text("This UI lives entirely on-chain."),
  compose.button("Do it", { variant: "primary", action: { to: "0x…", sig: "act(uint256)", args: "$n" } }),
]);

You composed from the vocabulary — a closed set of primitives. You literally cannot express anything outside it, which is what makes the next step meaningful.

2. Compile — get your app's identity

import { compileComponent } from "@chainrender/client";
const built = compileComponent(app);
console.log(built.hash); // 0x… — this IS your app, forever

The hash is content-addressed: it's the keccak256 of your app's exact bytes. Change anything and the hash changes. See Content Addressing.

3. Grade — know your trust level before deploying

import { grade } from "@chainrender/client";
const g = grade(app);
console.log(g.letter, g.word); // "A" "Trustless"

Your app is grade A because it's fully on-chain with no external dependencies. If you'd added an off-chain image, you'd see it drop to C — with an itemized reason. This grade equals what the chain computes (drift-locked). See The Trust Grade.

4. Register — pay gas once

Register the bytes to the ComponentRegistry (one transaction). After that, anyone renders your app for free, forever, from any RPC.

5. Render — free, reproducible

import { renderComponent } from "@chainrender/client/runtime";
const html = await renderComponent({ rpc, router }, built.hash );

What you learned

• Composition is constrained (safe by construction).
• The hash is the identity (immutable, verifiable).
• The grade discloses trust (honest, itemized).
• Rendering is a free, reproducible eth_call.

Next: Bind Live On-Chain Data to make it show real chain state.