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.
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.