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	レンダリング関数のみ