Renderers

json-render supports multiple output targets. Each renderer takes the same core concept -- a JSON spec constrained to a catalog -- and renders it natively on a different platform or into a different format.

All renderers share the same workflow:

Define a catalog with defineCatalog
AI generates a JSON spec
The renderer turns the spec into platform-native output

Renderer	Package	Output
React	`@json-render/react`	React component tree
Vue	`@json-render/vue`	Vue 3 component tree
shadcn/ui	`@json-render/shadcn`	Pre-built Radix UI + Tailwind components (uses React renderer)
React Native	`@json-render/react-native`	Native mobile views
Image	`@json-render/image`	SVG / PNG (via Satori)
React PDF	`@json-render/react-pdf`	PDF documents
Remotion	`@json-render/remotion`	Video compositions

React

Render specs as React component trees in the browser. Supports data binding, streaming, actions, validation, visibility, and computed values.

import { defineRegistry, Renderer } from "@json-render/react";
import { schema } from "@json-render/react/schema";

const { registry } = defineRegistry(catalog, { components });
<Renderer spec={spec} registry={registry} />

Use StateProvider, VisibilityProvider, and ActionProvider for full interactivity. See the @json-render/react API reference for details.

Vue

Vue 3 renderer with full feature parity with React: data binding, visibility, actions, validation, repeat scopes, and streaming.

import { defineRegistry, Renderer } from "@json-render/vue";
import { schema } from "@json-render/vue/schema";

const { registry } = defineRegistry(catalog, {
  components: {
    Card: ({ props, children }) =>
      h("div", { class: "card" }, [h("h3", null, props.title), children]),
  },
});

Uses composables (useStateStore, useStateBinding, useActions, etc.) instead of React hooks. See the @json-render/vue API reference for details.

shadcn/ui

36 pre-built components using Radix UI and Tailwind CSS. Built on top of @json-render/react -- no custom renderer needed.

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { defineRegistry, Renderer } from "@json-render/react";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { shadcnComponents } from "@json-render/shadcn";

const catalog = defineCatalog(schema, {
  components: {
    Card: shadcnComponentDefinitions.Card,
    Button: shadcnComponentDefinitions.Button,
  },
});

const { registry } = defineRegistry(catalog, {
  components: {
    Card: shadcnComponents.Card,
    Button: shadcnComponents.Button,
  },
});

See the @json-render/shadcn API reference for the full component list.

React Native

Render specs as native mobile views. Includes 25+ standard components and standard action definitions.

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react-native/schema";
import { standardComponentDefinitions, standardActionDefinitions } from "@json-render/react-native/catalog";
import { defineRegistry, Renderer } from "@json-render/react-native";

const catalog = defineCatalog(schema, {
  components: { ...standardComponentDefinitions },
  actions: standardActionDefinitions,
});

const { registry } = defineRegistry(catalog, { components: {} });
<Renderer spec={spec} registry={registry} />

See the @json-render/react-native API reference for details.

Image

Generate SVG and PNG images from JSON specs using Satori. Ideal for OG images, social cards, and banners.

import { renderToSvg, renderToPng } from "@json-render/image/render";

const svg = await renderToSvg(spec, { fonts });
const png = await renderToPng(spec, { fonts });

Nine standard components: Frame, Box, Row, Column, Heading, Text, Image, Divider, Spacer. PNG output requires @resvg/resvg-js as an optional peer dependency.

See the @json-render/image API reference for details.

React PDF

Generate PDF documents from JSON specs using @react-pdf/renderer. Render to buffer, stream, or file.

import { renderToBuffer, renderToStream, renderToFile } from "@json-render/react-pdf";

const buffer = await renderToBuffer(spec);
const stream = await renderToStream(spec);
await renderToFile(spec, "./output.pdf");

Standard components include Document, Page, View, Row, Column, Heading, Text, Image, Table, List, Divider, Spacer, Link, and PageNumber.

See the @json-render/react-pdf API reference for details.

Remotion

Turn JSON timeline specs into video compositions with Remotion.

import { Player } from "@remotion/player";
import { Renderer } from "@json-render/remotion";

<Player
  component={Renderer}
  inputProps={{ spec }}
  durationInFrames={spec.composition.durationInFrames}
  fps={spec.composition.fps}
  compositionWidth={spec.composition.width}
  compositionHeight={spec.composition.height}
/>

Uses a timeline spec format with compositions, tracks, and clips. Includes standard components (TitleCard, TypingText, ImageSlide, etc.), transitions (fade, slide, zoom, wipe), and effects.

See the @json-render/remotion API reference for details.

Custom Renderers

You can build your own renderer for any output target. See the Custom Schema & Renderer guide for how to define a custom schema and wire it to your own rendering logic.