mcpField
J
json-render-image

json-render-image

github.com/vercel-labs创意与媒体18.8k37 次安装5 天前更新
代码仓库

关于 json-render-image

这是一个使用 Satori 将 json-render 规格转换为 SVG 或 PNG 图片的渲染器。它包含标准布局和内容组件，也支持添加自定义目录组件。

主要功能

  1. 01将规格渲染为 SVG 字符串
  2. 02将规格渲染为 PNG 缓冲区
  3. 03提供标准布局和内容组件
  4. 04支持添加自定义目录组件
  5. 05支持服务端安全的模式和目录导入

适用场景

  1. 01从 JSON 规格生成 SVG 图片
  2. 02将声明式布局输出为 PNG
  3. 03用自定义组件扩展图片目录

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/json-render-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",
    },
  },
});

标准组件

组件类别描述
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仅包含渲染函数

评论

支持 Markdown