# Overview & Mental Model

ChainRender has five moving parts. Once you can name them, the whole system fits in your head.

1. **The Vocabulary** — a closed set of UI primitives (box, text, button, image, chart, table, controls, …) you
   compose an app from. You cannot express anything outside it, which is what makes apps analyzable and safe.
2. **The Compiler** — turns your composition into content-addressed bytes. The hash of those bytes *is* the app.
3. **Resolvers** — on-chain contracts that supply *live data* (a price, a balance, an ENS name, a chart series).
   Your UI binds to them; they're read at render time.
4. **The Enforcer & Grade** — proves what an app can do, refuses unsafe ones, and assigns an honest trust grade.
5. **The Renderer** — a `view` function that turns a hash into HTML/SVG, deterministically, for free.

The flow: **compose → compile (get a hash) → register bytes once → render for free forever**, with resolvers
supplying live data and the grade disclosing trust. Presentation (theme) is a render-time parameter layered on top;
versioning is an explicit registry layered on top. Everything else is immutable.

## Start here — build it correctly

Before the feature list: a ChainRender app is a **compiled component, registered on-chain, rendered by an
`eth_call`** — the component *is* the app. The most common mistake is building a normal React app that fetches data
with viem and only uses ChainRender to display a hash. That is not a ChainRender app. See
**[Building Correctly](./building-correctly.md)** for the sharp line + the compile→register→render flow. **Building
with an AI?** Give it the **[MCP server & app-builder skill](../reference/mcp-and-skill.md)** so it builds correctly
by default.

## Capability map — what you can build

ChainRender is one primitive (compose → compile → register → render) applied across many capability areas. Each links
to its guide:

- **UI & components** — the [render pipeline](./render-pipeline.md), the closed [vocabulary](./resolvers.md), and
  [theming](./theming.md) applied at render time.
- **Live on-chain data** — [resolvers](./resolvers.md) read prices, balances, ENS, attestations, and any contract's
  view state, [rendered honestly](./trust-grade.md).
- **DeFi** — a complete [DeFi capability suite](./defi-capabilities.md): market prices, a user's LP + lending
  positions (with health factor), pre-trade quotes, approval-state gating, Curve, portfolio totals, and
  [Uniswap hook rendering](./rendering-uniswap-hooks.md).
- **RWA (real-world assets)** — a [RWA capability suite](./rwa-capabilities.md): Proof-of-Reserve coverage,
  ERC-3643 (T-REX) compliance display, and issuer-bound credential lifecycle — display compliance, never *become*
  the compliance authority.
- **Reputation & social** — a [reputation capability suite](./reputation-capabilities.md): the EFP social graph
  (forward follow/tag/block/mute, Grade A), delegated address vouching (`rep-vouch`/`rep-tally`), a cross-source
  aggregate (`rep-aggregate`, grade capped at the weakest source), and ERC-725Y / ERC-735 account claim reads
  (the standard behind LUKSO Universal Profiles — read on the chain the resolver is deployed on, ≤ C; LUKSO's own
  chain is not integrated) — read + render reputation, never mint a score.
- **Actions & payments** — declared [actions](./actions.md) decoded before signing, and [payments](./payments.md)
  (crypto floor + optional off-chain card on-ramp, honestly graded).
- **Rich media** — [p5.js & three.js](./rich-media-p5-three.md) running over an on-chain floor, plus
  [on-chain icons](./icons.md) and [advanced scenes](./advanced-scenes.md).
- **Composition & multi-view** — [composing apps](./composition.md) from registered components.
- **Discovery & sharing** — the [Apps directory](./apps-directory.md) (deployed apps read on-chain, self-updating).
- **Trust & privacy** — the [trust grade](./trust-grade.md), the [enforcer](./enforcer.md),
  [trust signals](./trust-signals.md), and [privacy](./privacy.md).
- **Deploying & scaling** — [L2 deployment strategy](./l2-deployment-strategy.md),
  [size limits & Glamsterdam](./size-limits-and-glamsterdam.md), and [testing](./testing.md).
- **Where Ethereum is heading** — how upcoming protocol changes meet the render-and-declare, read-first, ownerless
  model: bigger contracts but pricier storage ([Size Limits & Glamsterdam](./size-limits-and-glamsterdam.md)) and
  balances proven across chains instead of bridged ([Proven Balances](./cross-chain-balances.md)).

See **[The Render Pipeline](./render-pipeline.md)** for the step-by-step, and
**[Content Addressing](./content-addressing.md)** for the foundation.