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.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
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.
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.
import { Renderer } from'@json-render/react'import { webRegistry } from'./registries/web'// webRegistry comes from `defineRegistry(catalog, { components })`.// RendererProps is { spec, registry, loading?, fallback? } — no catalog prop.exportconstDashboard = ({ spec }) => (
<Rendererspec={spec}registry={webRegistry} />
)
Render to PDF
import { renderToBuffer, renderToFile } from'@json-render/react-pdf'import { pdfRegistry } from'./registries/pdf'// Buffer for HTTP response. PDF options are { registry?, state?, handlers? }.// includeStandard is an EMAIL option, not a PDF one (see references/upstream-pdf.md).const buffer = awaitrenderToBuffer(spec, { registry: pdfRegistry })
// Direct file output — renderToFile(spec, filePath, options?)awaitrenderToFile(spec, './output/report.pdf', { registry: pdfRegistry })
Render to Email
import { renderToHtml } from'@json-render/react-email'import { emailRegistry } from'./registries/email'const html = awaitrenderToHtml(spec, { registry: emailRegistry })
awaitsendEmail({ to: user.email, subject: 'Weekly Report', html })
// Verified 2026-07-31 against @json-render/remotion@0.19.0: the export is// `Renderer` and its props are { spec, components }. fps and durationInFrames// belong on Remotion's own Composition, not on this renderer.import { Renderer } from'@json-render/remotion'import { remotionComponents } from'./registries/remotion'exportconstDemoVideo = () => (
<Rendererspec={spec}components={remotionComponents} />
)
// createNextApp lives on the /server subpath, not the package root.import { createNextApp } from'@json-render/next/server'const { getPageData, generateMetadata, generateStaticParams } = createNextApp({
spec, // NextAppSpec: routes keyed by Next.js URL patternsloaders: { getPost }, // server-side data loaders referenced by route.loader
})
It does not scaffold a project on disk. createNextApp returns the server-side pieces you
re-export from a catch-all route, and the page itself renders through PageRenderer:
A spec describes a route tree (pages, layouts, metadata, loading and error states), not just a
component tree.
Decision Matrix — When to Use Each Target
Target
Package
When to Use
Output
React
@json-render/react
Web apps, SPAs
JSX
Next.js
@json-render/next(0.16+)
Full apps: routes, layouts, SSR, metadata
Next.js app
Vue
@json-render/vue
Vue projects
Vue components
Svelte
@json-render/svelte
Svelte projects
Svelte components
Svelte+shadcn
@json-render/shadcn-svelte(0.16+)
36-component Svelte 5 catalog
Svelte + Tailwind
React Native
@json-render/react-native
Mobile apps (25+ components)
Native views
Terminal
@json-render/ink(0.15+)
CLI UIs, TUIs, streaming chat
Ink (terminal)
PDF
@json-render/react-pdf
Reports, documents
PDF buffer/file
Email
@json-render/react-email
Notifications, digests
HTML string
Remotion
@json-render/remotion
Demo videos, marketing
MP4/WebM
Image
@json-render/image
OG images, social cards
SVG/PNG (Satori)
YAML
@json-render/yaml(0.14+)
Token optimization, streaming parser
YAML string
MCP
@json-render/mcp
Claude/Cursor/ChatGPT conversations
Sandboxed iframe
3D
@json-render/react-three-fiber
3D scenes (19 components, verified 2026-07-31; roster lives upstream)
Three.js canvas
Codegen
@json-render/codegen
Source code from specs
TypeScript/JSX
All @json-render/* renderers are verified against 0.19.0 (@json-render/core).
Load rules/target-selection.md for detailed selection criteria and trade-offs.
Upstream coverage (do not restate)
This skill wraps @json-render/*. Vendor documentation is fetched, not repeated. What survives here
is the house delta: references/ork-delta.md plus the five rules.
Topic
Source
Full renderer signatures and option objects (renderToBuffer / renderToFile / renderToStream, renderToHtml / renderToPlainText, renderToSvg / renderToPng, Remotion exports)
references/upstream-pdf.md, upstream-email.md, upstream-image.md, upstream-remotion.md (vendored verbatim; re-sync with bash scripts/sync-vercel-skills.sh)
Standard component rosters per target (Document, Page, Table, email Section / Row / Column, Remotion transitions and effects)
the same four vendored references/upstream-*.md files
Read references/ork-delta.md before writing renderer code: it carries the API-drift rule, the
Remotion and PDF latency budgets, and the PDF / React Native registry layout ceiling.
PDF Renderer — Reports and Documents
The @json-render/react-pdf package renders specs to PDF using react-pdf under the hood. Three output modes: buffer, file, and stream.
Load rules/pdf-email-renderer.md for PDF registry patterns and email rendering.
Image Renderer — OG Images and Social Cards
The @json-render/image package uses Satori to convert specs to SVG, then optionally to PNG. Designed for server-side generation of social media images.
Load rules/video-image-renderer.md for Satori constraints and Remotion composition patterns.
Registry Mapping — Same Catalog, Platform-Specific Components
Each surface needs its own registry. The registry maps catalog types to platform-specific component implementations while the catalog and spec stay identical.
