image
installsforks
How to install image?
vercel-labs/json-render/image
$npx -y skills add 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.
SKILL.md
| 1 | # @json-render/image |
| 2 | |
| 3 | Image renderer that converts JSON specs into SVG and PNG images using Satori. |
| 4 | |
| 5 | ## Quick Start |
| 6 | |
| 7 | ```typescript |
| 8 | import { renderToPng } from "@json-render/image/render"; |
| 9 | import type { Spec } from "@json-render/core"; |
| 10 | |
| 11 | const spec: Spec = { |
| 12 | root: "frame", |
| 13 | elements: { |
| 14 | frame: { |
| 15 | type: "Frame", |
| 16 | props: { width: 1200, height: 630, backgroundColor: "#1a1a2e" }, |
| 17 | children: ["heading"], |
| 18 | }, |
| 19 | heading: { |
| 20 | type: "Heading", |
| 21 | props: { text: "Hello World", level: "h1", color: "#ffffff" }, |
| 22 | children: [], |
| 23 | }, |
| 24 | }, |
| 25 | }; |
| 26 | |
| 27 | const png = await renderToPng(spec, { |
| 28 | fonts: [{ name: "Inter", data: fontData, weight: 400, style: "normal" }], |
| 29 | }); |
| 30 | ``` |
| 31 | |
| 32 | ## Using Standard Components |
| 33 | |
| 34 | ```typescript |
| 35 | import { defineCatalog } from "@json-render/core"; |
| 36 | import { schema, standardComponentDefinitions } from "@json-render/image"; |
| 37 | |
| 38 | export const imageCatalog = defineCatalog(schema, { |
| 39 | components: standardComponentDefinitions, |
| 40 | }); |
| 41 | ``` |
| 42 | |
| 43 | ## Adding Custom Components |
| 44 | |
| 45 | ```typescript |
| 46 | import { z } from "zod"; |
| 47 | |
| 48 | const catalog = defineCatalog(schema, { |
| 49 | components: { |
| 50 | ...standardComponentDefinitions, |
| 51 | Badge: { |
| 52 | props: z.object({ label: z.string(), color: z.string().nullable() }), |
| 53 | slots: [], |
| 54 | description: "A colored badge label", |
| 55 | }, |
| 56 | }, |
| 57 | }); |
| 58 | ``` |
| 59 | |
| 60 | ## Standard Components |
| 61 | |
| 62 | | Component | Category | Description | |
| 63 | |-----------|----------|-------------| |
| 64 | | `Frame` | Root | Root container. Defines width, height, background. Must be root. | |
| 65 | | `Box` | Layout | Container with padding, margin, border, absolute positioning | |
| 66 | | `Row` | Layout | Horizontal flex layout | |
| 67 | | `Column` | Layout | Vertical flex layout | |
| 68 | | `Heading` | Content | h1-h4 heading text | |
| 69 | | `Text` | Content | Body text with full styling | |
| 70 | | `Image` | Content | Image from URL | |
| 71 | | `Divider` | Decorative | Horizontal line separator | |
| 72 | | `Spacer` | Decorative | Empty vertical space | |
| 73 | |
| 74 | ## Key Exports |
| 75 | |
| 76 | | Export | Purpose | |
| 77 | |--------|---------| |
| 78 | | `renderToSvg` | Render spec to SVG string | |
| 79 | | `renderToPng` | Render spec to PNG buffer (requires `@resvg/resvg-js`) | |
| 80 | | `schema` | Image element schema | |
| 81 | | `standardComponents` | Pre-built component registry | |
| 82 | | `standardComponentDefinitions` | Catalog definitions for AI prompts | |
| 83 | |
| 84 | ## Sub-path Exports |
| 85 | |
| 86 | | Export | Description | |
| 87 | |--------|-------------| |
| 88 | | `@json-render/image` | Full package: schema, components, render functions | |
| 89 | | `@json-render/image/server` | Schema and catalog definitions only (no React/Satori) | |
| 90 | | `@json-render/image/catalog` | Standard component definitions and types | |
| 91 | | `@json-render/image/render` | Render functions only | |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
