image

Render JSON image specs into SVG and PNG files using Satori-based tools.

Updated Jan 18, 2026
One-click install
npx skills add https://github.com/xztxy/json-render --skill image-xztxy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image
Source: https://github.com/xztxy/json-render/tree/main/skills/image
Command: npx skills add https://github.com/xztxy/json-render --skill image-xztxy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts JSON-based image specifications into SVG and PNG assets, enabling automated generation of visuals for social cards, OG images, and AI-generated image specs.

Core Features & Use Cases

  • Render JSON specs to scalable SVG and PNG outputs using Satori.
  • Support for a catalog of standard components and custom typography for consistent visuals.
  • Use Case: Generate a social card image for a shared link or a branded graphic for AI-generated specs.

Quick Start

Provide a Spec object and call renderToPng to generate an image.

Frequently Asked Questions about image

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

FAQPage Schema
How do I generate social card images from JSON specs?▼

You can generate social card images from JSON specs by providing a Spec object and calling renderToPng. This Skill uses a Satori-based renderer to convert JSON specifications into SVG and PNG assets for social cards.

What is the best way to render Open Graph images dynamically?▼

The best way to render Open Graph images dynamically is by using a Satori-based renderer to convert JSON specs into SVG and PNG assets. This allows automated generation of visuals without manual design work.

Can I use custom typography and components when rendering SVG from JSON?▼

Yes, you can use custom typography and a catalog of standard components when rendering SVG from JSON. The renderer supports custom typography and catalog-based component definitions through its core modules.

Does Satori support exporting JSON specs to both SVG and PNG formats?▼

Yes, Satori supports exporting JSON specs to both SVG and PNG formats. This renderer uses @json-render/core and @json-render/image to output scalable vector and raster graphics from your specifications.

Why convert JSON specs to PNG for AI-generated image specs?▼

Converting JSON specs to PNG for AI-generated image specs allows automated, programmatic generation of branded graphics. It enables systems to dynamically produce visual assets directly from structured data using Satori.