Guides

Guide: Build, Grade & Style Before You Deploy

One of ChainRender's most useful properties: you can fully build, grade, preview, and style your app locally — at zero cost — before you deploy anything on-chain. Nothing about authoring requires gas or a testnet. This guide walks the whole pre-deploy loop.

Why this is possible

The SDK's authoring core is headless and pure: compose, compileComponent, and grade run entirely in your process. And because grade() is drift-locked to the on-chain enforcer, the grade you compute locally is byte-identical to what the chain will compute. So you can iterate with full confidence before spending a single unit of gas.

1. Compose and see the hash

import { compose, compileComponent } from "@chainrender/client";
const app = compose.box([ compose.heading("Preview me"), /* … */ ]);
const built = compileComponent(app);
console.log(built.hash);   // your app's identity — computed locally, no chain

2. Grade it locally (and iterate on trust)

import { grade } from "@chainrender/client";
let g = grade(app);
console.log(g.letter, g.breakdown);   // "A" — or, if you added an off-chain dep, the exact reason it dropped

Add a feature, re-grade, see instantly whether it cost you trust. If adding an external image drops you A → C, the breakdown names it, and you decide before your users ever see it. This is trust-driven development: the grade is a live signal, not a post-deploy surprise.

3. Preview the rendered output locally

You can render your composition to HTML without deploying, to see exactly what users will see:

// render your composition through the local interpreter (or against a testnet component once registered)

For a full visual preview, scaffold with create-chainrender — the templates include a live preview that renders your component and shows its grade badge as you edit.

4. Style it — at zero gas, before and after deploy

Presentation is a render-time parameter, so you tune the look without deploying:

During authoring: adjust the theme tokens (spacing, color, font) and re-render locally. The component CSS is token-driven, so scaling a spacing token re-flows the whole preview instantly — no chain interaction at all.
After deploy: the same app renders with any theme via the presentation context — still zero gas. You only seed a chosen theme on-chain once, when it's final.

This means you can perfect the entire look — spacing, colors, fonts, chart dimensions — through fast local iteration, and commit exactly one final theme. You never pay gas to try a design, only to ship it.

5. Validate before registering

Run the whole-app validation locally: it checks that every action targets a bound interface method, that declared capabilities match what's reached, that resolvers are declared, and that the root is registered — the same checks the enforcer runs on-chain. A composition that would be refused on-chain fails here first, in milliseconds.

The pre-deploy loop, summarized

compose → compile (hash) → grade (trust) → preview (looks) → style (zero-gas) → validate → THEN deploy

Every step before "deploy" is free, local, and byte-identical to what the chain will do. You arrive at deployment with an app you've already fully seen, graded, styled, and validated — no surprises, no wasted gas.

The Trust Grade — what the local grade means.
Theme Without Redeploying — the render-time styling model.
create-chainrender — scaffolds with a live preview + grade badge.