Reference: create-chainrender
Scaffold a working ChainRender project in one command:
npm create chainrender@latest my-app
cd my-app && npm install && npm run dev
You'll pick what you're building:
| Template id | Tier | What it emits |
|---|---|---|
component-html |
T1 | A plain HTML page that renders a deployed component by its content hash from a free eth_call — you enter the RPC URL, the chain's RenderRouter address and the hash. Vite serves it so the SDK import resolves. |
miniapp-react |
T2 | A React app that composes from the closed vocabulary and shows, live as you edit, its checkNode() issues (what compile() would silently drop), content hash and grade(). Renders a deployed component from chain once .env is set. |
defi-app-react |
T3 | The same, with two views (Quote, Venues) shaped like the zQuoter flagship, each holding a live-data slot you bind to your chain's DeFi resolver (uniQuote, uniV3Price, …). Each view is checked and graded. |
miniapp-farcaster |
T2 | The HTML render page plus a Farcaster Mini App manifest stub; @chainrender/client/miniapp builds the complete manifest. |
Non-interactive use
For CI, scripts or an AI agent, name the template:
npm create chainrender@latest my-app -- --template miniapp-react
npx create-chainrender my-app --template component-html
npx create-chainrender --help # lists the template ids
With no terminal and no --template, the first template is used and the choice is printed.
No addresses are baked in
The RenderRouter address and the app hash differ per chain and per deployment, so a scaffold never hardcodes them: the
HTML page takes them as inputs, and the React templates read VITE_CR_RPC, VITE_CR_ROUTER and VITE_CR_APP_HASH
from .env (copy .env.example). Find the addresses on Deployed Contracts.
Versions
create-chainrender 0.2.0 pins @chainrender/client ^0.10.1 (for checkNode), React 19 and Vite 5 in the
generated package.json, from the manifest's versions map. 0.1.0 scaffolds still work as they are; they used
"latest" and an older render call.
The scaffolder is manifest-driven (templates.json): a new template is a new manifest entry, never a code change.
Every scaffold starts at grade A, and the React templates show the grade and the tree check as you build — a
dependency you add that lowers the grade shows up there before you deploy.