JSON 转 SVG/PNG 图像渲染器 | 基于 Satori 的 Vercel Labs 开源工具

image by vercel-labs/json-render

284 周安装量

13,800 GitHub Stars

GitHub

安装命令

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

内容创作数据可视化开发

🇨🇳中文介绍

@json-render/image

使用 Satori 将 JSON 规范转换为 SVG 和 PNG 图像的图像渲染器。

快速开始

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",
    },
  },
});

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

812,900 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

269,400 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

218,000 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

147,400 周安装

组件	类别	描述
`Frame`	根容器	根容器。定义宽度、高度、背景。必须是根元素。
`Box`	布局	具有内边距、外边距、边框、绝对定位的容器
`Row`	布局	水平弹性布局
`Column`	布局	垂直弹性布局
`Heading`	内容	h1-h4 标题文本
`Text`	内容	具有完整样式的正文文本
`Image`	内容	来自 URL 的图像
`Divider`	装饰	水平分隔线
`Spacer`	装饰	垂直空白空间

导出项	用途
`renderToSvg`	将规范渲染为 SVG 字符串
`renderToPng`	将规范渲染为 PNG 缓冲区（需要 `@resvg/resvg-js`）
`schema`	图像元素模式
`standardComponents`	预构建的组件注册表
`standardComponentDefinitions`	用于 AI 提示的目录定义

导出项	描述
`@json-render/image`	完整包：模式、组件、渲染函数
`@json-render/image/server`	仅模式和目录定义（无 React/Satori）
`@json-render/image/catalog`	标准组件定义和类型
`@json-render/image/render`	仅渲染函数

🇺🇸English

@json-render/image

Image renderer that converts JSON specs into SVG and PNG images using Satori.

Quick Start

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" }],
});

Using Standard Components

import { defineCatalog } from "@json-render/core";
import { schema, standardComponentDefinitions } from "@json-render/image";

export const imageCatalog = defineCatalog(schema, {
  components: standardComponentDefinitions,
});

Adding Custom Components

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",
    },
  },
});

Standard Components

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

Key Exports

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

Sub-path Exports

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

Weekly Installs

226

Repository

vercel-labs/json-render

GitHub Stars

13.3K

First Seen

Mar 7, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex221

cursor218

opencode218

kimi-cli217

amp217

cline217

JSON 转 SVG/PNG 图像渲染器 | 基于 Satori 的 Vercel Labs 开源工具

🇨🇳中文介绍

@json-render/image

快速开始

使用标准组件

添加自定义组件

相关 Skills

标准组件

主要导出项

子路径导出项

🇺🇸English

@json-render/image

Quick Start

Using Standard Components

Adding Custom Components

Standard Components

Key Exports

Sub-path Exports

最新 Skills