Labsco
vercel-labs logo

react-pdf

★ 15,600

by vercel · part of vercel-labs/json-render

React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF…

🔥🔥🔥✓ VerifiedFreeQuick setup
#payments#documents#git
🧰 Not standalone. This skill ships with vercel-labs/json-render and only works together with that tool — install the tool first, then add this skill.

React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF…

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by vercel

React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF… npx skills add https://github.com/vercel-labs/json-render --skill react-pdf Download ZIPGitHub15.6k

@json-render/react-pdf

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

Render APIs

Copy & paste — that's it
import { renderToBuffer, renderToStream, renderToFile } from "@json-render/react-pdf";

// In-memory buffer
const buffer = await renderToBuffer(spec);

// Readable stream (pipe to HTTP response)
const stream = await renderToStream(spec);
stream.pipe(res);

// Direct to file
await renderToFile(spec, "./output.pdf");

All render functions accept an optional second argument: { registry?, state?, handlers? }.

Standard Components

Component Description Document Top-level PDF wrapper (must be root) Page Page with size (A4, LETTER), orientation, margins View Generic container (padding, margin, background, border) Row, Column Flex layout with gap, align, justify Heading h1-h4 heading text Text Body text (fontSize, color, weight, alignment) Image Image from URL or base64 Link Hyperlink with text and href Table Data table with typed columns and rows List Ordered or unordered list Divider Horizontal line separator Spacer Empty vertical space PageNumber Current page number and total pages

Custom Catalog

Copy & paste — that's it
import { defineCatalog } from "@json-render/core";
import { schema, defineRegistry, renderToBuffer } from "@json-render/react-pdf";
import { standardComponentDefinitions } from "@json-render/react-pdf/catalog";
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",
 },
 },
 actions: {},
});

const { registry } = defineRegistry(catalog, {
 components: {
 Badge: ({ props }) => (
 
 {props.label} 
 
 ),
 },
});

const buffer = await renderToBuffer(spec, { registry });

External Store (Controlled Mode)

Pass a StateStore for full control over state:

Copy & paste — that's it
import { createStateStore } from "@json-render/react-pdf";

const store = createStateStore({ invoice: { total: 100 } });
store.set("/invoice/total", 200);

Server-Safe Import

Import schema and catalog without pulling in React:

Copy & paste — that's it
import { schema, standardComponentDefinitions } from "@json-render/react-pdf/server";