image

vercel-labs/json-render · updated Apr 8, 2026

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

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

skill.md

@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

Discussion

Product Hunt–style comments (not star reviews)
  • No comments yet — start the thread.
general reviews

Ratings

4.731 reviews
  • Yusuf Tandon· Dec 28, 2024

    image fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.

  • Benjamin Perez· Dec 28, 2024

    image reduced setup friction for our internal harness; good balance of opinion and flexibility.

  • Yusuf Li· Dec 24, 2024

    I recommend image for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.

  • Dhruvi Jain· Dec 8, 2024

    image fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.

  • Oshnikdeep· Nov 27, 2024

    image is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.

  • Li Anderson· Nov 27, 2024

    Useful defaults in image — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.

  • Mei Rahman· Nov 19, 2024

    image is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.

  • Arjun Park· Nov 15, 2024

    Solid pick for teams standardizing on skills: image is focused, and the summary matches what you get after install.

  • Ganesh Mohane· Oct 18, 2024

    Keeps context tight: image is the kind of skill you can hand to a new teammate without a long onboarding doc.

  • Mei Zhang· Oct 10, 2024

    Keeps context tight: image is the kind of skill you can hand to a new teammate without a long onboarding doc.

showing 1-10 of 31

1 / 4