Image

Name: Image
Author: vercel-labs

vercel-labs/json-render

1.1k installs
15.8k repo stars
Updated July 8, 2026
vercel-labs/json-render

image is a json-render skill for SVG and PNG generation from JSON specs via Satori.

About

The image json-render skill converts JSON UI specs into SVG and PNG images using the @json-render/image package powered by Satori. It supports OG image generation, social cards, and AI-generated visual assets from declarative JSON rather than hand-coded canvas logic. Agents define component registries and layout specs then render raster or vector outputs for sharing pipelines. The skill pairs with other json-render renderers for multi-target content from one spec source. JSON specs to SVG and PNG via @json-render/image. Satori-powered OG images and social cards. Declarative layout specs instead of canvas code. AI-generated image rendering from JSON definitions. Pairs with json-render multi-renderer ecosystem. Render JSON specs into SVG and PNG images via @json-render/image and Satori.

JSON specs to SVG and PNG via @json-render/image.
Satori-powered OG images and social cards.
Declarative layout specs instead of canvas code.
AI-generated image rendering from JSON definitions.
Pairs with json-render multi-renderer ecosystem.

Image by the numbers

1,099 all-time installs (skills.sh)
+48 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #339 of 2,277 Frontend Development skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

From the docs

What image says it does

Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori.

SKILL.md

npx skills add https://github.com/vercel-labs/json-render --skill image

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/vercel-labs/json-render/image.svg)](https://skillselion.com/skills/vercel-labs/json-render/image)

Installs	1.1k
repo stars	★ 15.8k
Security audit	3 / 3 scanners passed
Last updated	July 8, 2026
Repository	vercel-labs/json-render ↗

How do I generate OG images or social cards from a JSON spec?

Render JSON specs into SVG and PNG images via @json-render/image and Satori.

Who is it for?

Developers building OG images, social cards, or spec-driven graphics.

Skip if: Skip for hand-coded Figma exports without JSON spec pipelines.

When should I use this skill?

User works with @json-render/image, OG images from JSON, or Satori rendering.

What you get

Rendered SVG or PNG assets from @json-render/image with Satori layout.

PNG image file
SVG image file

By the numbers

Example OG Frame spec uses 1200×630 pixel dimensions

Files

SKILL.mdMarkdownGitHub ↗

@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