skills.rest
vercel-labs
vercel-labsOFFICIAL
Explore all skills by this author →
Website𝕏@vercelGitHub

react-pdf

Convert JSON specs into printable PDF documents using React-based rendering APIs.

15.9k|859|Updated Jan 14, 2026
Search Tags:#typescript#pdf#react#spec#pdf-generation#render
One-click install
npx skills add https://github.com/vercel-labs/json-render --skill react-pdf-vercel-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-pdf
Source: https://github.com/vercel-labs/json-render/tree/main/skills/react-pdf
Command: npx skills add https://github.com/vercel-labs/json-render --skill react-pdf-vercel-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a React-based PDF renderer that converts JSON specs into printable PDF documents, enabling developers to generate consistent, type-safe PDFs from dynamic data.

Core Features & Use Cases

  • Render APIs: renderToBuffer, renderToStream, renderToFile to produce in-memory buffers, streams, or files.
  • Component catalog: top-level components like Document, Page, View, Text, Table, List, Image to build rich PDFs from JSON specs.
  • Server-safe usage: Import schema and catalog without React for server-side rendering and automation.
  • Custom catalogs and state: Define catalogs and catalogs with registered components, and use an external store for controlled rendering.
  • External storage and assets: Store documentation and assets for reuse in PDFs.

Quick Start

Render a sample spec to a PDF using renderToBuffer from @json-render/react-pdf.

Frequently Asked Questions about react-pdf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate PDF documents from JSON data in a React application?▼

You can generate PDFs from JSON specs by passing structured data to a React-based renderer that outputs printable documents via renderToBuffer, renderToStream, or renderToFile APIs. This approach enables type-safe, dynamic document generation for invoices, reports, and dashboards.

Can I render PDFs on the server without loading the React DOM?▼

Yes, server-side PDF generation is supported through a server-safe import path that allows you to import the schema and component catalog without requiring React. This enables automated document generation workflows in server environments.

What components are available for building PDF documents from JSON specs?▼

The component catalog includes top-level components such as Document, Page, View, Text, Table, List, and Image. These components allow you to build rich, structured PDF layouts directly from JSON specifications.

Does this PDF generation approach support custom component catalogs and external state?▼

Yes, the renderer supports defining custom component catalogs with registered components and using an external store for controlled rendering. You can also store documentation and assets externally for reuse across multiple generated PDF documents.

What is the best way to generate dynamic invoices and reports as PDFs from structured data?▼

Rendering JSON specs into printable PDF documents using React components provides a type-safe workflow for producing consistent, data-driven invoices and reports. It supports web and server environments through buffer, stream, and file output APIs.

Related Skills

Explore More Software Engineering Skills→
sethdfordsethdford
2

Markdown to ADF Converter

Convert Markdown content to Confluence ADF JSON structure.

Community
Advanced
Kirankumar2604Kirankumar2604

invoice-generator

Generate print-ready invoices as HTML pages or React components with PDF export.

Community
Intermediate
davidrrowleydavidrrowley

zustand-store-ts

Create type-safe Zustand stores in TypeScript with separate state and actions interfaces.

Community
Intermediate
sametozkalesametozkale

react-pdf

Convert JSON specifications into PDF buffers, streams, or files.

Community
Intermediate