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 | The minimal one-eth_call render loop. Embed a component anywhere. |
| Mini-app | T2 | React | Composed components with a live grade badge. |
| DeFi app | T3 | React | The flagship pattern: a resolver reading an on-chain source + multi-view + themed chart, grade A. |
| Farcaster Mini App | T2 | HTML | A component packaged for Farcaster distribution. |
Templates are manifest-driven (templates.json) — a new template is a new entry, never forked code. Every scaffold
is grade-A: you cannot generate an ungradeable project. See create-chainrender.
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 |
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.