Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from JSON, creating social cards, or rendering AI-generated image specs.
Quickly install image AI skill to your development environment via command line
Source: vercel-labs/json-render.
Image renderer that converts JSON specs into SVG and PNG images using Satori.
| 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 |
Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from JSON, creating social cards, or rendering AI-generated image specs. Source: vercel-labs/json-render.
Stable fields and commands for AI/search citations.
npx skills add https://github.com/vercel-labs/json-render --skill imageImage renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from JSON, creating social cards, or rendering AI-generated image specs. Source: vercel-labs/json-render.
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/vercel-labs/json-render --skill image Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw
https://github.com/vercel-labs/json-render