react-pdf
installsforks
How to install react-pdf?
vercel-labs/json-render/react-pdf
$npx -y skills add vercel-labs/json-render --skill react-pdfReact PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF buffers/streams/files.
SKILL.md
| 1 | # @json-render/react-pdf |
| 2 | |
| 3 | React PDF renderer that generates PDF documents from JSON specs using `@react-pdf/renderer`. |
| 4 | |
| 5 | ## Installation |
| 6 | |
| 7 | ```bash |
| 8 | npm install @json-render/core @json-render/react-pdf |
| 9 | ``` |
| 10 | |
| 11 | ## Quick Start |
| 12 | |
| 13 | ```typescript |
| 14 | import { renderToBuffer } from "@json-render/react-pdf"; |
| 15 | import type { Spec } from "@json-render/core"; |
| 16 | |
| 17 | const spec: Spec = { |
| 18 | root: "doc", |
| 19 | elements: { |
| 20 | doc: { type: "Document", props: { title: "Invoice" }, children: ["page"] }, |
| 21 | page: { |
| 22 | type: "Page", |
| 23 | props: { size: "A4" }, |
| 24 | children: ["heading", "table"], |
| 25 | }, |
| 26 | heading: { |
| 27 | type: "Heading", |
| 28 | props: { text: "Invoice #1234", level: "h1" }, |
| 29 | children: [], |
| 30 | }, |
| 31 | table: { |
| 32 | type: "Table", |
| 33 | props: { |
| 34 | columns: [ |
| 35 | { header: "Item", width: "60%" }, |
| 36 | { header: "Price", width: "40%", align: "right" }, |
| 37 | ], |
| 38 | rows: [ |
| 39 | ["Widget A", "$10.00"], |
| 40 | ["Widget B", "$25.00"], |
| 41 | ], |
| 42 | }, |
| 43 | children: [], |
| 44 | }, |
| 45 | }, |
| 46 | }; |
| 47 | |
| 48 | const buffer = await renderToBuffer(spec); |
| 49 | ``` |
| 50 | |
| 51 | ## Render APIs |
| 52 | |
| 53 | ```typescript |
| 54 | import { renderToBuffer, renderToStream, renderToFile } from "@json-render/react-pdf"; |
| 55 | |
| 56 | // In-memory buffer |
| 57 | const buffer = await renderToBuffer(spec); |
| 58 | |
| 59 | // Readable stream (pipe to HTTP response) |
| 60 | const stream = await renderToStream(spec); |
| 61 | stream.pipe(res); |
| 62 | |
| 63 | // Direct to file |
| 64 | await renderToFile(spec, "./output.pdf"); |
| 65 | ``` |
| 66 | |
| 67 | All render functions accept an optional second argument: `{ registry?, state?, handlers? }`. |
| 68 | |
| 69 | ## Standard Components |
| 70 | |
| 71 | | Component | Description | |
| 72 | |-----------|-------------| |
| 73 | | `Document` | Top-level PDF wrapper (must be root) | |
| 74 | | `Page` | Page with size (A4, LETTER), orientation, margins | |
| 75 | | `View` | Generic container (padding, margin, background, border) | |
| 76 | | `Row`, `Column` | Flex layout with gap, align, justify | |
| 77 | | `Heading` | h1-h4 heading text | |
| 78 | | `Text` | Body text (fontSize, color, weight, alignment) | |
| 79 | | `Image` | Image from URL or base64 | |
| 80 | | `Link` | Hyperlink with text and href | |
| 81 | | `Table` | Data table with typed columns and rows | |
| 82 | | `List` | Ordered or unordered list | |
| 83 | | `Divider` | Horizontal line separator | |
| 84 | | `Spacer` | Empty vertical space | |
| 85 | | `PageNumber` | Current page number and total pages | |
| 86 | |
| 87 | ## Custom Catalog |
| 88 | |
| 89 | ```typescript |
| 90 | import { defineCatalog } from "@json-render/core"; |
| 91 | import { schema, defineRegistry, renderToBuffer } from "@json-render/react-pdf"; |
| 92 | import { standardComponentDefinitions } from "@json-render/react-pdf/catalog"; |
| 93 | import { z } from "zod"; |
| 94 | |
| 95 | const catalog = defineCatalog(schema, { |
| 96 | components: { |
| 97 | ...standardComponentDefinitions, |
| 98 | Badge: { |
| 99 | props: z.object({ label: z.string(), color: z.string().nullable() }), |
| 100 | slots: [], |
| 101 | description: "A colored badge label", |
| 102 | }, |
| 103 | }, |
| 104 | actions: {}, |
| 105 | }); |
| 106 | |
| 107 | const { registry } = defineRegistry(catalog, { |
| 108 | components: { |
| 109 | Badge: ({ props }) => ( |
| 110 | <View style={{ backgroundColor: props.color ?? "#e5e7eb", padding: 4 }}> |
| 111 | <Text>{props.label}</Text> |
| 112 | </View> |
| 113 | ), |
| 114 | }, |
| 115 | }); |
| 116 | |
| 117 | const buffer = await renderToBuffer(spec, { registry }); |
| 118 | ``` |
| 119 | |
| 120 | ## External Store (Controlled Mode) |
| 121 | |
| 122 | Pass a `StateStore` for full control over state: |
| 123 | |
| 124 | ```typescript |
| 125 | import { createStateStore } from "@json-render/react-pdf"; |
| 126 | |
| 127 | const store = createStateStore({ invoice: { total: 100 } }); |
| 128 | store.set("/invoice/total", 200); |
| 129 | ``` |
| 130 | |
| 131 | ## Server-Safe Import |
| 132 | |
| 133 | Import schema and catalog without pulling in React: |
| 134 | |
| 135 | ```typescript |
| 136 | import { schema, standardComponentDefinitions } from "@json-render/react-pdf/server"; |
| 137 | ``` |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
