# 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

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

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

```ts
// 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.

## Related
- **[The Trust Grade](../concepts/trust-grade.md)** — what the local grade means.
- **[Theme Without Redeploying](./theme-without-redeploy.md)** — the render-time styling model.
- **[create-chainrender](../reference/create-chainrender.md)** — scaffolds with a live preview + grade badge.