⚠️ Alpha · testnets only. ChainRender is in active alpha and deployed on testnets only — Ethereum Sepolia, the Robinhood Chain Testnet, and the Circle Arc Testnet — not on any mainnet. Contracts, addresses, and APIs may change. Do not use with real funds or production assets.
← Back to chainrender.orgOpen the Visual Builder ↗
Guided Tours

Guided Tours

Short, complete, copy-paste walkthroughs that take you from an empty canvas to a live, graded, fully on-chain app — with the real gotchas called out at the exact step they bite.

Every other section explains concepts and single tasks. A Guided Tour is different: it is one unbroken path through the whole build process for a real app, with the exact JSON, the exact commands, the exact errors you might see, and why. If you have ever gotten a cryptic builder error and not known whether it was your app, your config, or the chain — these tours are the antidote.

How these tours work

Each tour follows the same spine, so once you've done one the rest are fast:

  1. Build or import the app (we give you the full JSON to import, so you see the UI before writing anything).
  2. Preview it in the Visual Builder and read the grade badge.
  3. Fix the gotchas — the import/compile pitfalls, explained where they happen.
  4. Point it at the chain — set the Interpreter + RPC, then deploy and seed the backing contracts.
  5. Go live — confirm real data renders and the grade holds.

Everything here is honest about grade: a value only claims Grade A when it is an on-chain read. Where a capability has an off-chain half (an event-log feed, a client-side artifact hash), the tour says so and shows the ≤ C label — it never dresses one up as the other. See The Trust Grade.

Before you start

  • Open the Visual Builder — /builder/index.html. Import lives under ⋯ More → Import JSON.
  • A browser wallet (for the deploy/seed steps only; import + preview need no wallet).
  • An RPC for your target testnet — Ethereum Sepolia (11155111), Robinhood Chain (46630), or Circle Arc (5042002). Set it in the builder's config bar (the gear).
  • Up-to-date builder vocabulary. The builder renders from an embedded snapshot of the resolver vocabulary. If a tour's resolver kind doesn't appear in the slot picker, your snapshot is stale — regenerate it from the source of truth (one command, shown in each tour):
    npx tsx scripts/sync-builder-vocab.mjs    # VOCAB.resolverKinds <- chainc/resolverkinds.ts

The tours

Tour You'll build New capabilities exercised
Your First Grade-A App: Settlement Desk a settlement agreement card settle-status, settle-principal, settle-repaid, trust-facets
Proof & Compute a trusted-setup pin + metered-credit card proof-setup, compute-credit, trust-facets
Doorstep a public on-chain tribute door-knocks, the identicon floor, trust-facets (and the honest ≤ C door-feed)

Start with Settlement Desk — it carries the full explanation of the import/compile pitfalls that every builder user hits once. The other two reuse that spine and focus on what's new.

These three apps are also provided as ready-to-import files in builder/showcase/ in the repo. The JSON in each tour is the same, inline, so the tour is self-contained.

← Your First AppYour First Grade-A App: Settlement Desk →