JSON 转 SVG/PNG 图像渲染器 - 使用 Satori 将 JSON 规范快速生成图片

json-render-image by b-open-io/prompts

1 周安装量

7 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/b-open-io/prompts --skill json-render-image

图形渲染 Node.js 图像处理

🇨🇳中文介绍

@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

Node.js 环境配置指南：多环境管理、类型安全与最佳实践

10,500 周安装

Graft 框架：一次定义，同时提供 HTTP 和 MCP 服务的 API 开发与代理工具

916 周安装

MongoDB 与 Mongoose 使用指南：Node.js 数据库操作最佳实践与模式设计

869 周安装

OWASP 十大安全风险防范指南：Web应用安全漏洞与代码示例

866 周安装

组件	类别	描述
`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

Repository

b-open-io/prompts

GitHub Stars

First Seen

1 day ago

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

windsurf1

amp1

cline1

opencode1

cursor1

kimi-cli1

JSON 转 SVG/PNG 图像渲染器 - 使用 Satori 将 JSON 规范快速生成图片

🇨🇳中文介绍

@json-render/image

快速开始

使用标准组件

添加自定义组件

相关 Skills

标准组件

主要导出项

子路径导出项

🇺🇸English

@json-render/image

Quick Start

Using Standard Components

Adding Custom Components

Standard Components

Key Exports

Sub-path Exports

最新 Skills