Productivity

image

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

$npx skills add https://github.com/vercel-labs/json-render --skill image
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
general reviews

Ratings

4.510 reviews
  • Shikha Mishra· Oct 10, 2024

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

  • Piyush G· Sep 9, 2024

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

  • Chaitanya Patil· Aug 8, 2024

    Registry listing for image matched our evaluation — installs cleanly and behaves as described in the markdown.

  • Sakshi Patil· Jul 7, 2024

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

  • Ganesh Mohane· Jun 6, 2024

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

  • Oshnikdeep· May 5, 2024

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

  • Dhruvi Jain· Apr 4, 2024

    image has been reliable in day-to-day use. Documentation quality is above average for community skills.

  • Rahul Santra· Mar 3, 2024

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

  • Pratham Ware· Feb 2, 2024

    We added image from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.

  • Yash Thakker· Jan 1, 2024

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