Image

Turns JSON specifications into SVG and PNG images using Satori under the hood. You'd reach for this when building OG image generators, social card systems, or anything that needs programmatic image creation from structured data. Ships with standard components like Frame, Box, Row, Column, and text elements that handle the common layout patterns. The catalog system is designed to work with AI prompts, which makes sense if you're having Claude generate image specs on the fly. Clean separation between server-side definitions and rendering logic through sub-path exports. If you're tired of wrestling with HTML-to-image converters or need deterministic visual output from JSON, this gives you a typed, component-based approach that actually composes well.

skills.sh installs: 1.6K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill image --agent claude-code

Installs into .claude/skills of the current project.

Files

@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,
});