# Visual Builder

> **Live now:** the ChainRender Visual Builder is at **[chainrender.org/builder](https://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](../reference/mcp-and-skill.md)** (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](https://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](https://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](../getting-started/quick-start.md)**.
- **AI** via the MCP server or the app-builder skill — see **[Building with AI](../guides/building-with-ai.md)**.
- **Scaffold** a working project with `create-chainrender` — see **[Scaffolding](../getting-started/scaffolding.md)**.

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

## Related
- **[MCP Server & AI Skill](../reference/mcp-and-skill.md)** — the AI-facing client of the same foundation.
- **[The Vocabulary](../reference/vocabulary.md)** — what a builder's palette derives from.
- **[Building with AI](../guides/building-with-ai.md)** — the AI/MCP path to the same foundation.