# Templates

ChainRender provides two kinds of templates: **project templates** (scaffold a whole app) and **navigation
templates** (structure a multi-view app). Both are built-in and grade-A by construction.

## Project templates (create-chainrender)

Scaffold a working project with `npm create chainrender@latest my-app`. Pick one:

| Template | Tier | Framework | What you get |
|---|---|---|---|
| **Single component** | T1 | HTML | Renders a deployed component by hash from one `eth_call` (RPC + RenderRouter + hash as inputs). |
| **Mini-app** | T2 | React | A composed app with its live `checkNode` issues, content hash and grade. |
| **DeFi app skeleton** | T3 | React | Two views (Quote, Venues) in the zQuoter flagship's shape, each with a slot to bind to your chain's DeFi resolver; each checked and graded. |
| **Farcaster Mini App** | T2 | HTML | The render page plus a Mini App manifest stub. |

Templates are manifest-driven (`templates.json`) — a new template is a new entry, never forked code. Every scaffold
starts at grade A and shows its grade as you build. See **[create-chainrender](./create-chainrender.md)**.

## Navigation templates (multi-view apps)

For apps with multiple views, ChainRender ships four navigation templates — each a proven, on-chain-enforced
pattern. You pick a template; it wires the navigation and guarantees reachability (no stranded views).

| Template | Structure | Return control | Use for |
|---|---|---|---|
| **TABS** | Parallel views, a tab bar | the tab bar | dashboards, sections (Quote / Venues / Route) |
| **WIZARD** | Ordered steps, Back + Next | the Back chain | multi-step flows (onboarding, checkout) |
| **MASTER-DETAIL** | A list → a detail view | Home | browse-then-inspect (a list of items → one item) |
| **MODAL** | An overlay over a base view, under a scrim | Close | confirmations, focused tasks |

```ts
import { buildTabs } from "@chainrender/client"; // or buildWizard / buildMasterDetail / buildModal

const app = buildTabs([quoteView, venuesView, routeView], { shell: header });
```

Each template:
- **Enforces reachability on-chain** — a template refuses to emit a strandable app (a view you can't navigate to).
- **Aggregates capabilities honestly** — the app's envelope is the union across all views + shell.
- **Is themeable + render-time** like any component.

See **[Build a Multi-View App](../guides/multi-view-app.md)**.

## Related
- **[create-chainrender](./create-chainrender.md)** · **[Composition & Mini-Apps](../concepts/composition.md)**