# ChainRender Docs > ChainRender is an ownerless, immutable, fully on-chain UI framework: apps are content-addressed compositions stored on-chain and rendered by a free eth_call, with every data source graded by trust (A = fully on-chain). Alpha: deployed on testnets only (Ethereum Sepolia, Robinhood Chain Testnet, Circle Arc Testnet). Every page below is Markdown (append .md to any page URL). The complete docs in one file: https://chainrender.org/docs/llms-full.txt ## About - [What Is ChainRender?](https://chainrender.org/docs/about/what-is-chainrender.md): A one-page orientation for newcomers — the elevator pitch, the shape of the system, and where to go next. - [Mission & Vision](https://chainrender.org/docs/about/mission-and-vision.md): Make the interface as trustless as the contract. - [Brand & Identity](https://chainrender.org/docs/about/brand.md): ChainRender's brand is built the way ChainRender apps are built: fully on-chain. ## Getting Started - [Introduction](https://chainrender.org/docs/getting-started/introduction.md): Do not hand-write a React app from scratch (it tends to drift into a viem dashboard that only prints a hash). - [Scaffolding a Project](https://chainrender.org/docs/getting-started/scaffolding.md): The fastest way to a working project is the scaffolder: - [Quick Start](https://chainrender.org/docs/getting-started/quick-start.md): Render a fully on-chain component in five minutes. - [Your First App](https://chainrender.org/docs/getting-started/first-app.md): Build, grade, and understand a real component end-to-end. ## Guided Tours - [Overview](https://chainrender.org/docs/guided-tours/index.md): 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. - [Your First Grade-A App: Settlement Desk](https://chainrender.org/docs/guided-tours/settlement-desk.md): You'll build a Settlement Desk: a card that reads a settlement agreement's live on-chain state (status, pooled principal, percent repaid) and shows its self-declared trust facets. - [Proof & Compute](https://chainrender.org/docs/guided-tours/proof-and-compute.md): Two zipcoin-derived capabilities, both Grade A on-chain reads: a trusted-setup artifact pinned by SHA-256 (content-addressed, append-only) and a play-key's metered compute credit drawn down against… - [Doorstep](https://chainrender.org/docs/guided-tours/doorstep.md): A public on-chain tribute. ## Concepts - [Overview & Mental Model](https://chainrender.org/docs/concepts/overview.md): ChainRender has five moving parts. - [Building Correctly](https://chainrender.org/docs/concepts/building-correctly.md): The single most common mistake when building on ChainRender is treating it as a library a React app calls to produce a hash, instead of the framework the app is built in and rendered from. - [No Hosting: How It Works](https://chainrender.org/docs/concepts/no-hosting.md): A ChainRender app has no host. - [What You Can Build](https://chainrender.org/docs/concepts/what-you-can-build.md): ChainRender scales from a single element to a full multi-view application. - [Content Addressing](https://chainrender.org/docs/concepts/content-addressing.md): Content addressing is the foundation everything else in ChainRender rests on. - [Economics: Write Once, Read Free](https://chainrender.org/docs/concepts/economics.md): ChainRender has an unusual and powerful cost model: you pay gas once to store an app, then render it for free, forever. - [What's Fully On-Chain](https://chainrender.org/docs/concepts/fully-on-chain.md): ChainRender's central claim is that apps are fully on-chain. - [The Render Pipeline](https://chainrender.org/docs/concepts/render-pipeline.md): What actually happens when an app renders, start to finish. - [Resolvers & Data Binding](https://chainrender.org/docs/concepts/resolvers.md): A resolver is an on-chain contract that supplies live data to your UI at render time. - [DeFi Capabilities](https://chainrender.org/docs/concepts/defi-capabilities.md): ChainRender can build fully on-chain DeFi frontends: apps that render live market data, a user's actual positions, and pre-trade quotes, then let the user act — all as eth_call renders plus declare… - [Proven Balances (Cross-Chain)](https://chainrender.org/docs/concepts/cross-chain-balances.md): A ChainRender app can show a token balance that is proven, not just reported. - [Intent DeFi & CoW Protocol](https://chainrender.org/docs/concepts/intent-defi-cow.md): Most DeFi is transactional: you sign a specific swap at a specific block. - [RWA Capabilities](https://chainrender.org/docs/concepts/rwa-capabilities.md): ChainRender is a rendering + on-chain-verification layer, not an asset platform: it issues nothing and custodies nothing. - [Reputation Capabilities](https://chainrender.org/docs/concepts/reputation-capabilities.md): ChainRender can build fully on-chain reputation UI: apps that render an address's social graph (via EFP), delegated vouches and flags, credential and attestation status, and identity claims — as et… - [The Trust Grade](https://chainrender.org/docs/concepts/trust-grade.md): Every ChainRender app carries a trust grade — a single letter (A / B / C) that tells a user, before they interact, exactly how trustless the app is. - [The Capability Enforcer](https://chainrender.org/docs/concepts/enforcer.md): The enforcer is the on-chain component that makes ChainRender apps safe by construction. - [The Floor](https://chainrender.org/docs/concepts/the-floor.md): "The floor" is the single most important architectural principle in ChainRender. - [Presentation & Theming](https://chainrender.org/docs/concepts/theming.md): Presentation — colors, spacing, fonts, chart dimensions — is a render-time parameter in ChainRender. - [Actions & Signing](https://chainrender.org/docs/concepts/actions.md): An action is how a ChainRender UI lets a user sign a transaction. - [Payments](https://chainrender.org/docs/concepts/payments.md): ChainRender lets developers add payments to their apps with the same discipline as everything else: the on-chain crypto payment is the floor (trustless, Grade A), and a fiat/card on-ramp is an opti… - [Composition & Mini-Apps](https://chainrender.org/docs/concepts/composition.md): Components compose. - [Privacy & Credentials](https://chainrender.org/docs/concepts/privacy.md): ChainRender's privacy model is about identity and claims: proving something about a user ("verified member," "over 18," "holds this credential") without revealing the underlying data. - [Versioning & Updates](https://chainrender.org/docs/concepts/versioning.md): Content-addressed apps are immutable — so how does a developer update one? - [Visual & Media Capabilities](https://chainrender.org/docs/concepts/visual-media.md): ChainRender's on-chain rendering goes far beyond text and buttons. - [Trust Signals & Lineage](https://chainrender.org/docs/concepts/trust-signals.md): Beyond the automatic trust grade, ChainRender has a layer of social trust signals — ways for the community to attest to, advise on, and trace the lineage of components. - [Size Limits & Glamsterdam](https://chainrender.org/docs/concepts/size-limits-and-glamsterdam.md): ChainRender stores your app as bytecode on-chain, so Ethereum's contract-size limit is a real constraint the architecture is built around — and an upcoming upgrade may relax it. - [Rich Media: p5.js & three.js](https://chainrender.org/docs/concepts/rich-media-p5-three.md): ChainRender supports rich, dynamic, GPU-accelerated visuals — p5.js sketches and three.js scenes — while staying trustless. - [Advanced Scenes, 3D & Effects](https://chainrender.org/docs/concepts/advanced-scenes.md): Beyond charts and generative art, ChainRender has a deep scene system for 3D, animated, interactive, and post-processed visuals — all with an on-chain floor. - [On-Chain Icons](https://chainrender.org/docs/concepts/icons.md): ChainRender ships a curated set of ~500 icons stored on-chain (from the public-domain-spirited Lucide set), available to any app through the icon node. - [Rendering Uniswap Hooks](https://chainrender.org/docs/concepts/rendering-uniswap-hooks.md): You do not need a special "hook resolver." A Uniswap V4 hook is just a contract, and ChainRender already ships a generic, robust, ethos-compliant way to read + render any contract's view function:… - [The Apps Directory](https://chainrender.org/docs/concepts/apps-directory.md): The Apps page (linked from the explorer header) is a browsable directory of runnable ChainRender apps. - [App Metadata](https://chainrender.org/docs/concepts/app-metadata.md): ChainRender apps carry descriptive metadata (title, author, description, kind, tags, …) in a single, versioned, open-ended container stored on-chain. - [L2 Deployment Strategy](https://chainrender.org/docs/concepts/l2-deployment-strategy.md): ChainRender's dominant cost is storing app bytecode on-chain (SSTORE2 chunks). - [Testing (Two-Layer Harness)](https://chainrender.org/docs/concepts/testing.md): ChainRender ships a two-layer test harness that catches the two distinct classes of bug in an on-chain-rendering system: the deterministic class (selectors, encoding, exports, config) and the live… - [Sepolia DeFi Addresses](https://chainrender.org/docs/concepts/sepolia-defi-addresses.md): A DeFi resolver renders data from a protocol's own contracts, so it can only return data on a chain where that protocol actually exists. ## Guides - [Build, Grade & Style Before Deploy](https://chainrender.org/docs/guides/test-before-deploy.md): One of ChainRender's most useful properties: you can fully build, grade, preview, and style your app locally — at zero cost — before you deploy anything on-chain. - [Building with AI](https://chainrender.org/docs/guides/building-with-ai.md): ChainRender was designed to be built with AI. - [Local Build Environment (Solidity + Hardhat)](https://chainrender.org/docs/guides/local-build-environment.md): Most ChainRender apps need no Solidity — you compose a tree, grade it and register it. - [Render an On-Chain Component](https://chainrender.org/docs/guides/render-component.md): Goal: display a deployed ChainRender component in your web page. - [Bind Live On-Chain Data](https://chainrender.org/docs/guides/bind-data.md): Goal: show real, current chain state (a price, a balance) in your UI. - [Add a Chart](https://chainrender.org/docs/guides/add-chart.md): Goal: render an on-chain chart (line/area/bar/scatter/pie) from live data. - [Theme Without Redeploying](https://chainrender.org/docs/guides/theme-without-redeploy.md): Goal: change your app's colors, spacing, or fonts — at zero gas, no redeploy. - [Grade B — a Pinned-IPFS Dependency](https://chainrender.org/docs/guides/pinned-ipfs-dependency.md): Grade A means everything the app renders from is on-chain. - [Declare a Safe Action](https://chainrender.org/docs/guides/declare-action.md): Goal: add a button that signs a transaction — safely. - [Build a Multi-View App](https://chainrender.org/docs/guides/multi-view-app.md): Goal: an app with tabs (or wizard/master-detail/modal navigation). - [Build an NFT Collection Frontend](https://chainrender.org/docs/guides/nft-collection-frontend.md): ChainRender delivers the entire frontend for an NFT collection — mint, gallery, my-collection, and the on-chain art itself — driven by your ERC-721 backend. - [Update a Deployed App](https://chainrender.org/docs/guides/update-app.md): ChainRender apps are immutable — you don't change a deployed app, you publish a new version and point your name at it, through the on-chain SubnameVersionRegistry. - [Ship as a Farcaster Mini App](https://chainrender.org/docs/guides/farcaster-miniapp.md): Distribute your ChainRender app as a Farcaster Mini App using @chainrender/client/miniapp. - [ENS Names & Integration](https://chainrender.org/docs/guides/ens-integration.md): ChainRender integrates deeply with ENS — for naming apps, resolving them, and rendering ENS identity. - [Deploying an App](https://chainrender.org/docs/guides/deploying.md): Once you've built, graded, and styled your app locally (see Build, Grade & Style Before You Deploy), deploying is registering your app's bytes on-chain — a one-time cost, after which anyone renders… - [Wallet Connection & Signing](https://chainrender.org/docs/guides/wallet-and-signing.md): ChainRender apps read from the chain for free, but actions (claiming, swapping, minting) require a wallet and a signed transaction. - [Live Data, Events & Local State](https://chainrender.org/docs/guides/live-data-and-events.md): Beyond binding a single value, @chainrender/client/runtime gives you batched reads, event log access, and opt-in local state — everything a live, reactive UI needs, while keeping the app itself ful… - [Using ChainRender with React](https://chainrender.org/docs/guides/using-react.md): @chainrender/client/react provides a component and a hook for rendering on-chain apps in React. - [Writing a Custom Resolver](https://chainrender.org/docs/guides/writing-a-resolver.md): Resolvers are how a ChainRender app gets any on-chain data or media. - [Authoring & Committing a Theme](https://chainrender.org/docs/guides/authoring-themes.md): ChainRender themes are built from design tokens and generated as CSS on-chain. - [Registering a Subname](https://chainrender.org/docs/guides/registering-a-name.md): Give your app a human name — myapp.chainrender.eth — so it's discoverable and resolvable by name instead of by hash. - [Submitting to the Catalog + Staking](https://chainrender.org/docs/guides/submitting.md): ChainRender's catalog — components, apps, and themes — is open and permissionless. - [Building a 3D Scene](https://chainrender.org/docs/guides/building-a-scene.md): ChainRender scenes render 2D/3D visuals on-chain via SceneIR — declarative, analyzable, with an on-chain poster floor and optional GPU enhancement. - [Applying Post-Processing Effects](https://chainrender.org/docs/guides/applying-effects.md): ChainRender's effects library (EffectPresetRegistry) applies post-processing — CRT, glass, vignette, scanlines, grain — over a rendered scene or image, as a composable, content-addressed stack. - [Composing Apps (Compositor & Sockets)](https://chainrender.org/docs/guides/composing-apps.md): Beyond nesting components, ChainRender has an on-chain compositor (CompositionRouter) that assembles multiple components/scenes into one output via sockets — named slots a child plugs into. - [Serving via web3://](https://chainrender.org/docs/guides/web3-serving.md): ChainRender apps can be served through the web3:// protocol (ERC-5219 + ERC-4804) — an ownerless, on-chain way to serve content addressable by a web3:// URL, no HTTP server involved. - [Example: On-Chain Tetris](https://chainrender.org/docs/guides/onchain-tetris.md): A complete, playable Tetris — the game code and the p5.js library live on-chain (content-addressed), and the play runs client-side over an on-chain poster floor. ## Reference - [Feature Catalog](https://chainrender.org/docs/reference/feature-catalog.md): Everything ChainRender can do, at a glance. - [On-Chain Capabilities Checklist](https://chainrender.org/docs/reference/onchain-capabilities.md): A scannable checklist of what ChainRender does fully on-chain — every item below is stored, computed, and rendered on-chain, and is Grade A (fully trustless) unless a note says otherwise. - [Integrations & Libraries](https://chainrender.org/docs/reference/integrations.md): Every integration, library, and feature ChainRender ships first-class, in one place — so developers, the visual builder, and the AI can discover them and bind them directly. - [@chainrender/client](https://chainrender.org/docs/reference/sdk-client.md): The SDK is the headless, framework-agnostic core for authoring, grading, and rendering ChainRender apps. - [The Vocabulary](https://chainrender.org/docs/reference/vocabulary.md): The vocabulary is the closed set of everything a ChainRender app can express. - [Node Fields (generated)](https://chainrender.org/docs/reference/node-fields.md): Every field the compiler encodes, per node type. - [Runtime API](https://chainrender.org/docs/reference/runtime.md): @chainrender/client/runtime — rendering an app and turning declared actions into wallet transactions. - [React API](https://chainrender.org/docs/reference/react.md): @chainrender/client/react — React bindings (peer dep: react). - [Resolver Catalog](https://chainrender.org/docs/reference/resolvers.md): ChainRender ships a large library of resolvers — on-chain contracts that supply live data or media to your UI. - [All Resolver Kinds (generated)](https://chainrender.org/docs/reference/resolver-kinds.md): ChainRender ships 66 first-party resolver kinds — 61 resolve on-chain during the render eth_call, 5 reach an off-chain edge and therefore declare CLIENT_FETCH (grade ≤ C by Invariant R2). - [create-chainrender](https://chainrender.org/docs/reference/create-chainrender.md): Scaffold a working ChainRender project in one command: - [Templates](https://chainrender.org/docs/reference/templates.md): ChainRender provides two kinds of templates: project templates (scaffold a whole app) and navigation templates (structure a multi-view app). - [Themes in Depth](https://chainrender.org/docs/reference/theming-in-depth.md): The complete theming feature set. - [Data Sources & Integrations](https://chainrender.org/docs/reference/data-sources.md): ChainRender apps show live on-chain data through resolvers — small view contracts that read chain state at render time. - [Instructing an AI](https://chainrender.org/docs/reference/instructing-ai.md): How to phrase instructions so an AI produces correct, Grade-A ChainRender apps. - [MCP Server & AI Skill](https://chainrender.org/docs/reference/mcp-and-skill.md): Two packaged tools make AI-assisted ChainRender development first-class: the MCP server (so an AI calls the SDK as tools) and the app-builder skill (so an AI knows the workflow). ## Contracts - [Deployed Contracts](https://chainrender.org/docs/contracts/deployed-contracts.md): ChainRender is live on three testnets — the Ethereum Sepolia, Robinhood Chain, and Circle Arc testnets. - [Architecture](https://chainrender.org/docs/contracts/architecture.md): The on-chain system, in layers: - [Reading On-Chain](https://chainrender.org/docs/contracts/reading.md): Everything you need to display or verify an app is a free view call: - [Registries](https://chainrender.org/docs/contracts/registries.md): The governance-free registries that make ChainRender a store, not just an archive: - [Verifying an App](https://chainrender.org/docs/contracts/verifying.md): The whole point of content addressing is that you can verify. ## Resources - [Principles & Ethos](https://chainrender.org/docs/resources/ethos.md): ChainRender is built on a small set of non-negotiable principles. - [Design Rationale](https://chainrender.org/docs/resources/design-rationale.md): This page collects the why behind ChainRender's most important design choices. - [Comparison to Alternatives](https://chainrender.org/docs/resources/comparison.md): When to use ChainRender: when the interface needs the same trust properties as the contract — canonical frontends for protocols, transaction-signing UIs where spoofing is a real risk, apps that mus… - [Glossary](https://chainrender.org/docs/resources/glossary.md) - [FAQ](https://chainrender.org/docs/resources/faq.md): *Is the UI really fully on-chain? - [Gotchas, Do's & Don'ts](https://chainrender.org/docs/resources/gotchas.md): The practical wisdom for building ChainRender apps well. - [Troubleshooting](https://chainrender.org/docs/resources/troubleshooting.md): Symptom → likely cause → fix. - [Roadmap, Governance & Sustainability](https://chainrender.org/docs/resources/roadmap-governance.md): This page covers the forward-looking and governance aspects of ChainRender — how it evolves, how it's kept honest, and how it sustains itself. - [Visual Builder & Playground](https://chainrender.org/docs/resources/visual-builder.md): 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.