json-render-image

@json-render/image Image renderer that converts JSON specs into SVG and PNG images using Satori. Quick Start import { renderToPng } from "@json-render/image/render" ; import type { Spec } from "@json-render/core" ; const spec : Spec = { root : "frame" , elements : { frame : { type : "Frame" , props : { width : 1200 , height : 630 , backgroundColor : "#1a1a2e" } , children : [ "heading" ] , } , heading : { type : "Heading" , props : { text : "Hello World" , level : "h1" , color : "#ffffff" } , children : [ ] , } , } , } ; const png = await renderToPng ( spec , { fonts : [ { name : "Inter" , data : fontData , weight : 400 , style : "normal" } ] , } ) ; Using Standard Components import { defineCatalog } from "@json-render/core" ; import { schema , standardComponentDefinitions } from "@json-render/image" ; export const imageCatalog = defineCatalog ( schema , { components : standardComponentDefinitions , } ) ; Adding Custom Components import { z } from "zod" ; const catalog = defineCatalog ( schema , { components : { ... standardComponentDefinitions , Badge : { props : z . object ( { label : z . string ( ) , color : z . string ( ) . nullable ( ) } ) , slots : [ ] , description : "A colored badge label" , } , } , } ) ; 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