image

Render JSON-based specs into SVG and PNG images.

15.9k|859|Updated Jan 14, 2026

Search Tags:#png #image #svg #render #satori #json-render

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: image
Source: https://github.com/vercel-labs/json-render/tree/main/skills/image
Command: npx skills add https://github.com/vercel-labs/json-render --skill image-vercel-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts JSON specs produced by json-render into ready-to-use SVG and PNG images, enabling design previews, social cards, and OG graphics without manual image creation.

Core Features & Use Cases

Render to SVG and PNG from a Spec using renderToSvg and renderToPng.
Reuse the standard component definitions (Frame, Heading, Text, Image) or extend with custom components.
Generate social cards and OG images for marketing, dashboards, and AI-generated visuals from specs.

Quick Start

Provide a Spec and call renderToPng to generate a PNG image.

Frequently Asked Questions about image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert JSON specs into PNG images for social cards?▼

To convert JSON specs into PNG images, you can use the renderToPng function to process your structured data and generate ready-to-use graphics for marketing and dashboards.

How does rendering SVG from JSON specs work for design previews?▼

Rendering SVG from JSON specs works by passing structured UI definitions to the renderToSvg function, which uses Satori for font and layout processing to output scalable vector graphics.

Can I use custom components when generating OG images from JSON?▼

Yes, you can use custom components when generating OG images from JSON. The rendering engine supports standard frame and text components while allowing extensions with your own custom definitions.

What is the best way to automate social card generation for web apps?▼

The best way to automate social card generation for web apps is converting JSON-based UI specs directly into image files, eliminating manual image creation and streamlining marketing workflows.

Does Satori handle font and layout rendering for JSON to image conversion?▼

Yes, Satori handles font and layout rendering for JSON to image conversion, ensuring accurate text positioning and typography when generating SVG and PNG outputs from structured specifications.