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

Reference: @chainrender/client

Verify signatures against the shipped types. Code examples in these docs illustrate usage and intent. The authoritative signatures are the TypeScript types shipped with @chainrender/client — your editor's autocomplete and the package's .d.ts files are the source of truth. Where an example and the shipped type differ, the shipped type wins.

The SDK is the headless, framework-agnostic core for authoring, grading, and rendering ChainRender apps. Install:

npm install @chainrender/client viem

Exports

Import Purpose
@chainrender/client Authoring core: compose, compileComponent, grade, vocabulary, IR builders
@chainrender/client/runtime Rendering + actions: renderComponent, buildActionRequest, describeAction, wallet
@chainrender/client/react React components + hooks (ChainRenderView, live-grade badge)
@chainrender/client/miniapp Farcaster Mini App manifest + embed builders

Core functions

  • compose.* — build a component from the closed vocabulary (box, heading, text, button, image, chart, table, controls, …). Constrained by construction: you can't express outside the vocabulary.
  • compileComponent(node) → { hash, hex, … } — the content-addressed artifact. The hash is the app identity.
  • grade(node, opts?) → { letter, word, locks, envelope, deviations } — the trust grade, drift-locked with the chain. opts.pinnedDep (a raw-CIDv1 IPFS dependency, { protocol:"ipfs", cid }) grades B (Pinned), fail-closed to A if unverifiable; also read from a pinnedDep on the node. Helpers: isVerifiablePinnedDep, pinnedDependencyLevel, pinnedCid, RAW_CIDV1, type PinnedDep.
  • vocabulary() — the machine-readable schema (node types, capabilities, resolver kinds), derived from the real constants, so tooling never hardcodes them.

peerDependencies: viem (required); react + the Farcaster miniapp SDK (optional, for those subpaths).

App metadata

The app-metadata seam (see App Metadata) is exposed through the SDK so authoring tools can read and write an app's on-chain descriptive info:

  • encodeAppMeta(obj) → compact JSON string for the scene binding's meta field. Strips empties, size-capped.
  • decodeAppMeta(str) → AppMeta object; never throws, returns { v: 1 } on any malformed input.
  • getAppTitle / getAppAuthor / getAppDescription / getAppKind / getAppIcon / getAppCategory / getAppGrade / getAppGradeWord / getAppTags — safe accessors, each takes (meta, fallback?) and never throws.
  • gradeLocks(meta) → the lock string for a grade letter. hasAppMeta(meta) → whether any field beyond the version marker is set.
  • APP_META_VERSION — the current metadata schema version (readers are forward-compatible: a v1 reader still reads a future field's neighbours).

All are re-exported from chainc/appmeta.ts, the single source of truth. Adding a field there makes it available everywhere in one edit.

← Integrations & LibrariesThe Vocabulary →