react-pdf

Generates PDF documents from structured JSON UI specifications using @react-pdf/renderer templates.

Updated Jun 24, 2026
One-click install
npx skills add https://github.com/hasna/render --skill react-pdf-hasna
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-pdf
Source: https://github.com/hasna/render/tree/main/skills/react-pdf
Command: npx skills add https://github.com/hasna/render --skill react-pdf-hasna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the need for manual PDF design and formatting by enabling programmatic generation of consistent PDF documents directly from structured JSON UI specifications, saving development time and ensuring output consistency.

Core Features & Use Cases

  • JSON-to-PDF Rendering: Convert json-render JSON specs to PDF buffers, streams, or files using @react-pdf/renderer for seamless integration into web and server workflows.
  • Pre-built Component Catalog: Access 12+ standard PDF components (Document, Page, Table, Heading, etc.) for common document layouts like invoices, reports, and forms out of the box.
  • Custom Component Support: Extend the standard catalog with custom React components for branded or specialized PDF use cases, with full control over styling and behavior.
  • Use Case: For example, use this Skill to auto-generate customer invoices from order data JSON and stream them directly to a user's browser for immediate download.

Quick Start

Use the react-pdf skill to render the provided JSON document spec to a PDF file and save it as ./output.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 automatically?

To generate PDF documents from JSON data automatically, you can use a JSON-to-PDF rendering approach that converts structured JSON UI specifications directly into PDF buffers, streams, or files. This eliminates manual formatting by programmatically mapping JSON data to standard document components like tables and headings.

Can I render PDFs on the server without a React runtime environment?

Yes, you can render PDFs on the server without a React runtime environment by using server-safe rendering capabilities that process JSON UI specs independently. This allows backend workflows to generate PDF buffers or streams directly without requiring a full React frontend setup.

What is the best way to create custom branded PDF invoices from order data?

The best way to create custom branded PDF invoices from order data is to extend a standard PDF component catalog with custom React components. By mapping order data JSON to these specialized components, you achieve full control over styling and layout for branded document generation.

Does JSON-to-PDF rendering support outputting to streams and files for automation?

JSON-to-PDF rendering fully supports outputting to streams and files for automation workflows. Beyond standard file generation, it provides PDF buffers and streams to seamlessly integrate document creation into web requests or server-side batch processing pipelines.

Do I need to manually format tables and headings when generating reports from JSON?

No, you do not need to manually format tables and headings when generating reports from JSON. A pre-built component catalog provides over 12 standard PDF components, such as Tables and Headings, that automatically format document layouts directly from your structured JSON specifications.