json-render-image

Original：🇺🇸 English
Translated

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.

3installs
Sourcevercel-labs/json-render
Added on

NPX Install

npx skill4agent add vercel-labs/json-render json-render-image

Tags

Translated version includes tags in frontmatter
json-render-imagesatori-renderingog-image-generationsocial-card-creationsvg-png-conversion

SKILL.md Content

View Translation Comparison →

@json-render/image

Image renderer that converts JSON specs into SVG and PNG images using Satori.

Quick Start

typescript
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

typescript
import { defineCatalog } from "@json-render/core";
import { schema, standardComponentDefinitions } from "@json-render/image";

export const imageCatalog = defineCatalog(schema, {
  components: standardComponentDefinitions,
});

Adding Custom Components

typescript
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

ComponentCategoryDescription
Frame
RootRoot container. Defines width, height, background. Must be root.
Box
LayoutContainer with padding, margin, border, absolute positioning
Row
LayoutHorizontal flex layout
Column
LayoutVertical flex layout
Heading
Contenth1-h4 heading text
Text
ContentBody text with full styling
Image
ContentImage from URL
Divider
DecorativeHorizontal line separator
Spacer
DecorativeEmpty vertical space

Key Exports

ExportPurpose
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

ExportDescription
@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