image
Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from JSON, creating social cards, or rendering AI-generated image specs.
By vercel-labs · 1,351 installs
npx skills add vercel-labs/json-render --skill image
Source repository · Upstream listing
@json render/image
Image renderer that converts JSON specs into SVG and PNG images using Satori.
Quick Start
Using Standard Components
Adding Custom Components
Standard Components
Component Category Description
Frame Root Root container. Defines width, height, background. Must be root.
Box Layout Container with padding, margin, border, absolute positioning
Row Layout Horizontal flex layout
Column Layout Vertical flex layout
Heading Content h1 h4 heading text
Text Content Body text with full styling
Image Content Image from URL
Divider Decorative Horizontal line separator
Spacer Decorative Empty vertical space
Key Exports
Export Purpose
renderToSvg Render spec to SVG string
renderToPng Render spec to PNG buffer (requires @resvg/resvg js )
schema Image element schema
standardComponents Pre built component registry
standardComponentDefinitions Catalog definitions for AI prompts
Sub path Exports
Export Description
@json render/image Full package: schema, components, render functions
@json render/image/server Schema and catalog definitions only (no React/Satori)
@json render/image/catalog Standard component definitions and types
@json render/image/render Render functions only