multi-surface-render

name	multi-surface-render
compatibility	Claude Code 2.1.220+
description	Multi-surface rendering with json-render — one JSON spec produces React web, Next.js, React Native, Ink terminal UIs, PDFs, emails, Remotion videos, OG images, and 3D scenes. Covers renderer target selection, registry mapping, and platform APIs (renderToBuffer, renderToStream, renderToFile). Use when generating output for several platforms or creating PDF reports, email templates, demo videos, or social images from one component spec.
tags	["json-render","multi-surface","pdf","email","remotion","video","image","react","rendering","ink","nextjs"]
version	1.1.0
author	OrchestKit
user-invocable	false
disable-model-invocation	false
complexity	medium
context	inherit
persuasion-type	reference
metadata	{"category":"frontend","upstream-package":"@json-render/core","upstream-version-tested":"0.19.0"}

Multi-Surface Rendering with json-render

Define once, render everywhere. A single json-render catalog and spec can produce React web UIs, PDF reports, HTML emails, Remotion demo videos, and OG images — each surface gets its own registry that maps catalog types to platform-native components.

Quick Reference

Category	Rules	Impact	When to Use
Target Selection	1	HIGH	Choosing which renderer for your use case
React Renderer	1	MEDIUM	Web apps, SPAs, dashboards
PDF & Email Renderer	1	HIGH	Reports, documents, notifications
Video & Image Renderer	1	MEDIUM	Demo videos, OG images, social cards
Registry Mapping	1	HIGH	Platform-specific component implementations

Total: 5 rules across 5 categories

How Multi-Surface Rendering Works

1. One catalog — Zod-typed component definitions shared across all surfaces
2. One spec — flat-tree JSON/YAML describing the UI structure
3. Many registries — each surface maps catalog types to its own component implementations
4. Many renderers — each package renders the spec using its registry

The catalog is the contract. The spec is the data. The registry is the platform-specific implementation.

Quick Start — Same Catalog, Different Renderers

Shared Catalog (used by all surfaces)

import { defineCatalog } from '@json-render/core'
import { schema } from '@json-render/react/schema'
import { z } from 'zod'

export const catalog = defineCatalog(schema, {
  : {
    : {
      : z.({
        : z.(),
        : z.([, , ]),
      }),
      : ,
    },
    : {
      : z.({ : z.() }),
      : ,
    },
    : {
      : z.({
        : z.(),
        : z.(),
        : z.([, , ]).(),
      }),
      : ,
    },
  },
})