Turn JSON layout definitions into SVG or PNG images with Satori. Use this skill to create social sharing previews and cards, assemble standard layout and text components, or define custom components for image specifications.
中文简介正在准备中。当前显示英语简介。
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.
安装前可以查看交给 AI 代理的指令内容。
Image renderer that converts JSON specs into SVG and PNG images using Satori.
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" }],
});
import { defineCatalog } from "@json-render/core";
import { schema, standardComponentDefinitions } from "@json-render/image";
export const imageCatalog = defineCatalog(schema, {
components: standardComponentDefinitions,
});
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",
},
},
});
| 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 |
| 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 |
| 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 |
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Helps build custom code exporters from json-render UI specifications. Covers walking the UI tree, collecting components, state references, and actions, and formatting property values for JSX, the markup syntax used in React.
中文简介正在准备中。当前显示英语简介。
Define the structure and available components for AI-generated JSON screens or videos. Build generation prompts, process incremental updates, connect values to application state, and validate or repair definitions before passing them to a renderer.
中文简介正在准备中。当前显示英语简介。
Debug json-render interfaces with an inspector panel that shows screen specifications, editable runtime state, action history, and streamed updates. Select a rendered page element to locate its definition and investigate display or interaction problems.
中文简介正在准备中。当前显示英语简介。
Set up an inspection panel in React json-render apps to examine UI definitions, edit state, and review action and stream timelines. The skill also covers opening or toggling the panel and recording events from React code.
中文简介正在准备中。当前显示英语简介。
Add and troubleshoot the json-render inspection panel in SolidJS applications. This skill covers panel setup for examining specifications, editing state, reviewing action and stream timelines, browsing component catalogs, and selecting page elements for inspection.
中文简介正在准备中。当前显示英语简介。
Add and troubleshoot a developer panel in Svelte 5 json-render apps. Inspect JSON screen definitions, edit application state, review action and streaming timelines, browse component catalogs, and select elements directly from the page.
中文简介正在准备中。当前显示英语简介。