React Pdf

If you need to generate PDFs programmatically from JSON specs, this is a clean wrapper around react-pdf/renderer. You define your document structure as JSON with elements like Document, Page, Table, and Heading, then render to buffer, stream, or file. The component library covers the basics (flex layouts, tables, images, page numbers) and you can extend it with custom components through a typed catalog system. The external store option is nice if you need to manage state outside the rendering cycle. It's server-safe imports mean you can work with schemas without pulling in React, which matters for edge environments. Solid choice if you're already in the JSON render ecosystem or want declarative PDF generation without wrestling with layout primitives.

skills.sh installs: 2.4K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill react-pdf --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/react-pdf

React PDF renderer that generates PDF documents from JSON specs using @react-pdf/renderer.

Installation

npm install @json-render/core @json-render/react-pdf

Quick Start

import { renderToBuffer } from "@json-render/react-pdf";
import type { Spec } from "@json-render/core";

const spec: Spec = {
  root: "doc",
  elements: {
    doc: { type: "Document", props: { title: "Invoice" }, children: ["page"] },
    page: {
      type: "Page",
      props: { size: "A4" },
      children: ["heading", "table"],
    },
    heading: {
      type: "Heading",
      props: { text: "Invoice #1234", level: "h1" },
      children: [],
    },
    table: {
      type: "Table",
      props: {
        columns: [
          { header: "Item", width: "60%" },
          { header: "Price", width: "40%", align: "right" },
        ],
        rows: [
          ["Widget A", "$10.00"],
          ["Widget B", "$25.00"],
        ],
      },
      children: [],
    },
  },
};

const buffer = await renderToBuffer(spec);

Render APIs

import { renderToBuffer, renderToStream, renderToFile } from "@json-render/react-pdf";

SKILL.md on GitHub

Details

Repository: github.com/vercel-labs/json-render
Categories: Frontend Development, Cloud & Infrastructure, Office & Documents
First seen: Apr 16, 2026