Image Renderer
OfficialFreeTransform JSON specs into SVG and PNG images.
Free · Opens the source repo
What Image Renderer does
The Image Renderer skill leverages the @json-render/image library to convert JSON specifications into SVG and PNG images. This skill is particularly useful for developers and designers looking to generate images programmatically from structured data. By using Satori, the renderer can create high-quality images suitable for various applications, including social media cards and Open Graph images.
To get started, users can import the render functions from the library and define their image specifications using a structured JSON format. The renderer supports standard components such as frames, headings, and text, allowing for flexible design options. Users can easily customize their images by defining properties like dimensions and colors, ensuring that the generated images meet their specific needs.
Additionally, the skill allows for the creation of custom components, enabling users to extend the functionality of the renderer. This is beneficial for teams that require unique design elements that are not covered by the standard components. The skill is designed for those who need to automate image generation as part of their development workflow or design process, making it a valuable addition to any project that involves dynamic content creation.
Overall, the Image Renderer skill is an efficient tool for anyone involved in web development or design who needs to create images from JSON data quickly and effectively.
When to use it
Use this skill when you need to create images programmatically from JSON data, such as for social media cards or dynamic graphics.
When not to use it
This skill may not be suitable for one-off image designs or when manual graphic design tools are preferred for detailed customization.
What you can build with it
Generating Social Media Cards
Create visually appealing social media cards by defining the layout and content in JSON format.
Automating Image Creation for Blogs
Automatically generate images for blog posts based on structured data, ensuring consistency in design.
Dynamic Graphics for Web Applications
Render images on-the-fly in web applications using JSON specifications to adapt to user input.
How to install Image Renderer
View source1. Install with the skills CLI
npx skills add vercel-labs/json-render/image --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by vercel-labs@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 |
Frequently asked questions about Image Renderer
Similar skills
Excalidraw Diagram Generator
Transform natural language into Excalidraw diagrams.
Draw.io Diagram Generator
Easily create and validate draw.io diagrams.
Image Annotations
Easily annotate images with callouts and highlights.
Banner Design
Create stunning banners for any platform effortlessly.
Scientific Schematics
Generate publication-quality scientific diagrams effortlessly.
Infographics
Create professional infographics with ease and accuracy.