⚠️ 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 ↗
Resources

Visual Builder

Live now: the ChainRender Visual Builder is at chainrender.org/builder — compose, grade, theme, and deploy on-chain apps in the browser, no install required.

ChainRender is designed to support a visual builder — a graphical canvas where developers compose apps by dragging, arranging, and configuring components instead of writing code. This page explains the vision, what already exists to make it possible, and its current status.

The vision

A visual builder would let a developer:

  • Drag components (buttons, charts, tables, images, scenes) onto a canvas from the vocabulary.
  • Bind data by picking a resolver from a list, not writing an ABI call.
  • See the live grade update as they build — add an off-chain image and watch the grade drop from A to C, with the reason shown inline.
  • Preview the render in real time (the on-chain output, exactly as it will appear).
  • Theme visually — adjust tokens with color pickers and sliders, at zero gas (presentation is render-time).
  • Export the composition to deploy — a content-addressed, graded, validated app.

In short: the full compose → grade → compile → validate loop, but graphical.

Why the foundation already exists

The visual builder isn't a separate product to invent — it's a client of the SDK that's already shipped. The SDK was architected for exactly this:

  • The vocabulary is machine-readable. vocabulary() returns every node type, capability, and resolver kind — so a builder can populate its component palette automatically, and a new component added to ChainRender appears in the builder with no builder code change (the SDK spec guarantees this: additions "propagate to the SDK, builder, MCP tools, and AI vocabulary with no code change").
  • Grading is instant and drift-locked. grade() gives the builder a live trust badge that matches the chain.
  • Compiling is deterministic. The builder's output is a reproducible hash.
  • The compositor is builder-friendly by design. The on-chain compositor's socket/anchor model ("anchor to a declared point on the scene") was explicitly designed as "the piece most worth carrying into a builder/canvas" — placement is semantic, declarative data, not layout code.

So a visual builder sits on the same foundation as the MCP server (which gives AI tool access to that foundation) — the builder gives humans graphical access to it. Same SDK, same verifiable loop, different interface.

Current status

  • The foundation (SDK, vocabulary(), grade(), deterministic compile, the builder-friendly compositor) — shipped.
  • The visual builder UI itself — LIVE at chainrender.org/builder. A schema-driven canvas: drag components, bind live on-chain data (ENS, Chainlink, NFT media, p5/three), watch the trust grade update live, theme visually, and connect a wallet to deploy + render on-chain — all from the browser.

The builder sits on the shipped SDK: it bundles vocabulary(), grade(), and compileComponent() in-browser, so everything it does is verifiable — the same grade/compile the chain computes, live as you build.

Ways to build

You have four ways to build a ChainRender app:

  • The visual builder at chainrender.org/builder — compose visually, grade + validate live, connect a wallet, and deploy on-chain. No install.
  • Code with @chainrender/client (compose.* builders) — see Quick Start.
  • AI via the MCP server or the app-builder skill — see Building with AI.
  • Scaffold a working project with create-chainrender — see Scaffolding.

All three produce the same graded, content-addressed, verifiable apps a visual builder eventually would.

Related

← Roadmap, Governance & Sustainability