### Start Development Server

Source: https://github.com/diegomura/react-pdf/blob/master/packages/examples/vite/README.md

Starts the development server. Navigate to the vite example directory before running.

```bash
cd packages/examples/vite
yarn dev
```

--------------------------------

### Installation

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Install the @react-pdf/math package and its peer dependencies.

```APIDOC
## Installation

### npm

```bash
npm install @react-pdf/math
```

### yarn

```bash
yarn add @react-pdf/math
```

### Peer Dependencies

```bash
npm install @react-pdf/renderer react
```
```

--------------------------------

### Install @react-pdf/math

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Commands to install the package and its required peer dependencies.

```bash
npm install @react-pdf/math
# or
yarn add @react-pdf/math
```

```bash
npm install @react-pdf/renderer react
```

--------------------------------

### Installation

Source: https://github.com/diegomura/react-pdf/blob/master/packages/mermaid/README.md

Install the @react-pdf/mermaid package using yarn.

```APIDOC
## Installation

```bash
yarn add @react-pdf/mermaid
```
```

--------------------------------

### Install Dependencies and Build Project

Source: https://github.com/diegomura/react-pdf/blob/master/packages/examples/vite/README.md

Installs project dependencies and builds the project. Run these commands from the repository root.

```bash
yarn install
yarn build
```

--------------------------------

### Install @react-pdf/textkit

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Use yarn to add the package to your project.

```bash
yarn add @react-pdf/textkit
```

--------------------------------

### Install @react-pdf/stylesheet

Source: https://github.com/diegomura/react-pdf/blob/master/packages/stylesheet/README.md

The installation command for the stylesheet library using yarn.

```bash
yarn add @react-pdf/stylesheet
```

--------------------------------

### Install @react-pdf/image

Source: https://github.com/diegomura/react-pdf/blob/master/packages/image/README.md

The installation command for the library using the yarn package manager.

```bash
yarn add @react-pdf/image
```

--------------------------------

### Regenerate PDFs

Source: https://github.com/diegomura/react-pdf/blob/master/packages/examples/vite/README.md

Regenerates all PDFs for the examples. Ensure you are in the vite example directory.

```bash
cd packages/examples/vite
node generate-pdfs.mjs
```

--------------------------------

### Install @react-pdf/svg

Source: https://github.com/diegomura/react-pdf/blob/master/packages/svg/README.md

Use npm or yarn to add the package to your project.

```bash
npm install @react-pdf/svg
# or
yarn add @react-pdf/svg
```

--------------------------------

### Install @react-pdf/fns

Source: https://github.com/diegomura/react-pdf/blob/master/packages/fns/README.md

Installation command for adding the library to a project using yarn.

```bash
yarn add @react-pdf/fns
```

--------------------------------

### Start the Next.js development server

Source: https://github.com/diegomura/react-pdf/blob/master/packages/examples/next-14/README.md

Use these commands to launch the local development environment. Choose the command corresponding to your preferred package manager.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install @react-pdf/mermaid

Source: https://github.com/diegomura/react-pdf/blob/master/packages/mermaid/README.md

Use yarn to add the package to your project dependencies.

```bash
yarn add @react-pdf/mermaid
```

--------------------------------

### Using Themes

Source: https://github.com/diegomura/react-pdf/blob/master/packages/mermaid/README.md

Example of how to apply a built-in theme to the Mermaid diagram.

```APIDOC
## Themes

The following built-in themes are available via the `theme` prop:

- `tokyo-night`, `tokyo-night-storm`, `tokyo-night-light`
- `catppuccin-mocha`, `catppuccin-latte`
- `nord`, `nord-light`
- `dracula`
- `github-dark`, `github-light`
- `solarized-dark`, `solarized-light`
- `one-dark`
- `zinc-dark`, `zinc-light`

```jsx
<Mermaid theme="nord" width={400}>
  {`graph LR
    A --> B --> C`}
</Mermaid>
```
```

--------------------------------

### Install @react-pdf/primitives

Source: https://github.com/diegomura/react-pdf/blob/master/packages/primitives/README.md

Command to install the primitives package via the yarn package manager.

```bash
yarn add @react-pdf/primitives
```

--------------------------------

### Configure Math Display Modes

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Examples showing the difference between default display mode and inline mode.

```tsx
<Math>{"\int_0^\infty e^{-x^2} dx = \sqrt{\pi}"}</Math>
```

```tsx
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <Text>The equation </Text>
  <Math inline>{"E = mc^2"}</Math>
  <Text> is famous.</Text>
</View>
```

--------------------------------

### Install React PDF Renderer

Source: https://github.com/diegomura/react-pdf/blob/master/packages/renderer/README.md

Use this command to add the @react-pdf/renderer package to your project.

```sh
yarn add @react-pdf/renderer
```

--------------------------------

### Install @react-pdf/types

Source: https://github.com/diegomura/react-pdf/blob/master/packages/types/README.md

Use this command to add the TypeScript definitions to your project via yarn.

```sh
yarn add @react-pdf/types
```

--------------------------------

### Render Matrices

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Example of rendering a matrix using LaTeX.

```tsx
<Math>{"\begin{pmatrix} a & b \\ c & d \end{pmatrix}"}</Math>
```

--------------------------------

### Render Fractions and Roots

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Example of rendering a fraction with a square root.

```tsx
<Math>{"\frac{\sqrt{3}}{2}"}</Math>
```

--------------------------------

### Render Limits

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Example of rendering a limit expression.

```tsx
<Math>{"\lim_{x \to 0} \frac{\sin x}{x} = 1"}</Math>
```

--------------------------------

### Render Summations and Integrals

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Examples of complex mathematical notations like summations and integrals.

```tsx
<Math>{"\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}"}</Math>
<Math>{"\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}"}</Math>
```

--------------------------------

### Install @react-pdf/render

Source: https://github.com/diegomura/react-pdf/blob/master/packages/render/README.md

This snippet shows the command to add the @react-pdf/render package to your project using Yarn.

```sh
yarn add @react-pdf/render
```

--------------------------------

### Install @react-pdf/font

Source: https://github.com/diegomura/react-pdf/blob/master/packages/font/README.md

Installs the @react-pdf/font package using Yarn. This is the primary step to include the font management library in your project.

```bash
yarn add @react-pdf/font
```

--------------------------------

### Create a PDF Document Component

Source: https://github.com/diegomura/react-pdf/blob/master/packages/renderer/README.md

Define your PDF content using React components and StyleSheet for styling. This example shows a basic document with two sections.

```jsx
import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);
```

--------------------------------

### Render Greek Letters and Operators

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Example of rendering vector calculus notation.

```tsx
<Math>{"\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}"}</Math>
```

--------------------------------

### Rendering to PDF with @react-pdf/render and pdfkit

Source: https://github.com/diegomura/react-pdf/blob/master/packages/render/README.md

This example shows how to render a document structure to a PDF file using @react-pdf/render in conjunction with pdfkit. It involves creating a PDFDocument instance and piping it to a file stream.

```javascript
import fs from 'fs';
import render from '@react-pdf/render';
import pdfkit from '@react-pdf/pdfkit';

const PDFDocument = pdfkit.default;

const ctx = new PDFDocument({ autoFirstPage: false });

const doc = {}; // See above

render.default(ctx, doc);

const stream = fs.createWriteStream('./test.pdf');

ctx.pipe(stream);
```

--------------------------------

### Convert CSS Units

Source: https://github.com/diegomura/react-pdf/blob/master/packages/stylesheet/README.md

Examples of how various CSS units are converted to PDF points (pt).

```javascript
const style = {
  width: '2in',
  height: '50mm',
  padding: '1cm',
  margin: '10vh',
  fontSize: '5vw',
  gap: '2rem',
  left: '100px',
};
```

--------------------------------

### React-PDF Form Components Example

Source: https://context7.com/diegomura/react-pdf/llms.txt

Demonstrates the usage of various interactive form components including TextInput, Checkbox, Select, and FieldSet. It requires '@react-pdf/renderer' and includes basic styling for layout and appearance. The output is a PDF document with form fields.

```jsx
import { Document, Page, View, Text, TextInput, Checkbox, Select, FieldSet, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: { padding: 30 },
  label: { fontSize: 12, marginBottom: 5 },
  input: {
    width: 200,
    height: 25,
    marginBottom: 15,
    borderWidth: 1,
    borderColor: '#333',
  },
  checkbox: {
    width: 15,
    height: 15,
    marginRight: 10,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  fieldset: {
    marginBottom: 20,
    padding: 15,
    borderWidth: 1,
    borderColor: '#ddd',
  },
});

const FormExample = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <FieldSet name="personalInfo">
        <Text style={styles.label}>Full Name:</Text>
        <TextInput
          name="fullName"
          style={styles.input}
          defaultValue="John Doe"
          required
        />

        <Text style={styles.label}>Email:</Text>
        <TextInput
          name="email"
          style={styles.input}
          format={{ type: 'email' }}
        />

        <Text style={styles.label}>Phone:</Text>
        <TextInput
          name="phone"
          style={styles.input}
          format={{ type: 'phone' }}
        />

        <Text style={styles.label}>Password:</Text>
        <TextInput
          name="password"
          style={styles.input}
          password
        />

        <Text style={styles.label}>Comments:</Text>
        <TextInput
          name="comments"
          style={{ ...styles.input, height: 80 }}
          multiline
        />
      </FieldSet>

      <View style={styles.row}>
        <Checkbox
          name="newsletter"
          style={styles.checkbox}
          checked
          backgroundColor="#f0f0f0"
          borderColor="#333"
        />
        <Text style={styles.label}>Subscribe to newsletter</Text>
      </View>

      <View style={styles.row}>
        <Checkbox
          name="terms"
          style={styles.checkbox}
          required
          xMark
        />
        <Text style={styles.label}>I accept the terms and conditions</Text>
      </View>

      <Text style={styles.label}>Country:</Text>
      <Select
        name="country"
        style={styles.input}
        select={['United States', 'Canada', 'United Kingdom', 'Germany', 'France']}
        defaultValue="United States"
        sort
      />
    </Page>
  </Document>
);

```

--------------------------------

### Registering a Hyphenation Callback

Source: https://github.com/diegomura/react-pdf/blob/master/packages/font/README.md

Demonstrates how to register a custom hyphenation callback function to enable text wrapping. It shows an example using the 'hyphen/en' library.

```javascript
import hyphenationCallback from 'hyphen/en';

fontStore.registerHyphenationCallback(hyphenationCallback);
```

--------------------------------

### Registering Single and Multiple Font Variants

Source: https://github.com/diegomura/react-pdf/blob/master/packages/font/README.md

Provides examples for registering font families. The first shows registering a single font with its weight and style, while the second demonstrates bulk registration of multiple weights and styles for a font family.

```javascript
// Single Font
fontStore.register({
  family: 'Roboto',
  src: 'https://example.com/fonts/Roboto-Regular.ttf',
  fontWeight: 400,
  fontStyle: 'normal',
});

// Multiple Weights and Styles (Bulk Registration)
fontStore.register({
  family: 'Roboto',
  fonts: [
    { src: 'https://example.com/fonts/Roboto-Regular.ttf', fontWeight: 400 },
    { src: 'https://example.com/fonts/Roboto-Bold.ttf', fontWeight: 700 },
    {
      src: 'https://example.com/fonts/Roboto-Italic.ttf',
      fontWeight: 400,
      fontStyle: 'italic',
    },
    {
      src: 'https://example.com/fonts/Roboto-BoldItalic.ttf',
      fontWeight: 700,
      fontStyle: 'italic',
    },
  ],
});
```

--------------------------------

### Example SvgNode output

Source: https://github.com/diegomura/react-pdf/blob/master/packages/svg/README.md

The structure of the object returned by the parseSvg function.

```javascript
{
  type: 'SVG',
  props: { viewBox: '0 0 100 100' },
  children: [
    {
      type: 'CIRCLE',
      props: { cx: '50', cy: '50', r: '40', fill: 'red' },
      children: []
    }
  ]
}
```

--------------------------------

### Registering Fonts from Remote URLs

Source: https://github.com/diegomura/react-pdf/blob/master/packages/font/README.md

Shows how to register fonts using remote URLs. It includes a basic registration and an advanced example with custom request options like method, headers, and body for fetching the font file.

```javascript
fontStore.register({
  family: 'Open Sans',
  src: 'https://example.com/fonts/OpenSans-Regular.ttf',
});

// With custom request options:
fontStore.register({
  family: 'Open Sans',
  src: 'https://example.com/fonts/OpenSans-Regular.ttf',
  method: 'GET',
  headers: {
    Authorization: 'Bearer token',
  },
  body: null,
});
```

--------------------------------

### Express.js Endpoint for PDF Generation

Source: https://context7.com/diegomura/react-pdf/llms.txt

An example of an Express.js route that generates a PDF invoice using React-PDF and sends it as an HTTP response. It utilizes `renderToBuffer` for efficient response handling. Requires 'express' and '@react-pdf/renderer'.

```jsx
import express from 'express';
import { renderToBuffer } from '@react-pdf/renderer';

// Assuming InvoiceDocument component is defined elsewhere and imported
// import InvoiceDocument from './InvoiceDocument'; 

const app = express();

app.get('/api/invoice/:id', async (req, res) => {
  try {
    const invoice = {
      id: req.params.id,
      customer: 'Customer Name',
      amount: 199.99,
      date: new Date().toISOString().split('T')[0],
    };

    // Placeholder for InvoiceDocument component
    const InvoiceDocument = ({ invoice }) => (
      <Document>
        <Page size="A4" style={styles.page}>
          <Text style={styles.title}>Invoice #{invoice.id}</Text>
          <Text>Customer: {invoice.customer}</Text>
          <Text>Amount: ${invoice.amount}</Text>
          <Text>Date: {invoice.date}</Text>
        </Page>
      </Document>
    );
    // Placeholder styles and Document/Page/Text imports
    const styles = { page: {}, title: {} };
    const Document = ({ children }) => children;
    const Page = ({ children }) => children;
    const Text = ({ children }) => children;

    const buffer = await renderToBuffer(<InvoiceDocument invoice={invoice} />);

    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', `attachment; filename=invoice-${invoice.id}.pdf`);
    res.send(buffer);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Example of starting the server (not included in original snippet but necessary for context)
// const PORT = process.env.PORT || 3000;
// app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

```

--------------------------------

### React-PDF: Page Wrapping and Breaks with JSX

Source: https://context7.com/diegomura/react-pdf/llms.txt

This snippet demonstrates how to implement automatic page wrapping and manual page breaks in React-PDF using JSX. It includes examples of fixed headers and footers, controlling content flow with `break` and `minPresenceAhead`, and protecting against orphans and widows. The `wrap={false}` prop is used to keep specific sections together.

```jsx
import { Document, Page, View, Text, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: { padding: 30 },
  section: { marginBottom: 20 },
  header: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  paragraph: {
    fontSize: 12,
    lineHeight: 1.5,
  },
  fixedHeader: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 40,
    backgroundColor: '#333',
    padding: 10,
  },
  fixedFooter: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 30,
    borderTopWidth: 1,
    borderTopColor: '#ddd',
    padding: 5,
    textAlign: 'center',
  },
  content: {
    marginTop: 50,
    marginBottom: 40,
  },
});

const LongDocument = () => (
  <Document>
    {/* Page with wrapping enabled */}
    <Page size="A4" style={styles.page} wrap>
      {/* Fixed header appears on all wrapped pages */}
      <View style={styles.fixedHeader} fixed>
        <Text style={{ color: 'white' }}>Document Header</Text>
      </View>

      <View style={styles.content}>
        {/* Regular sections that will wrap */}
        <View style={styles.section}>
          <Text style={styles.header}>Chapter 1</Text>
          <Text style={styles.paragraph}>
            Long content that will automatically wrap to the next page when it
            exceeds the available space...
          </Text>
        </View>

        {/* Force page break before this section */}
        <View style={styles.section} break>
          <Text style={styles.header}>Chapter 2 (New Page)</Text>
          <Text style={styles.paragraph}>This chapter starts on a new page.</Text>
        </View>

        {/* Prevent orphaned headers - keep header with following content */}
        <View style={styles.section} minPresenceAhead={50}>
          <Text style={styles.header}>Chapter 3</Text>
          <Text style={styles.paragraph}>
            The header will move to next page if less than 50pt available.
          </Text>
        </View>

        {/* Orphan and widow protection for text */}
        <Text style={styles.paragraph} orphans={3} widows={2}>
          This paragraph ensures at least 3 lines at bottom of page (orphans)
          and at least 2 lines at top of next page (widows).
        </Text>

        {/* Prevent wrapping for specific element */}
        <View style={styles.section} wrap={false}>
          <Text style={styles.header}>Keep Together</Text>
          <Text style={styles.paragraph}>
            This entire section will not be split across pages.
          </Text>
        </View>
      </View>

      {/* Fixed footer on all pages */}
      <Text
        style={styles.fixedFooter}
        render={({ pageNumber, totalPages }) =>
          `Page ${pageNumber} of ${totalPages}`
        }
        fixed
      />
    </Page>
  </Document>
);

```

--------------------------------

### Initialize and use the layout engine

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Configure the layout engines and process an attributed string within a defined container.

```js
import layoutEngine, {
  bidi,
  linebreaker,
  justification,
  textDecoration,
  scriptItemizer,
  wordHyphenation,
  fontSubstitution,
  fromFragments,
} from '@react-pdf/textkit';

// Create engines configuration
const engines = {
  bidi: bidi(),
  linebreaker: linebreaker({}),
  justification: justification({}),
  textDecoration: textDecoration(),
  scriptItemizer: scriptItemizer(),
  wordHyphenation: wordHyphenation(),
  fontSubstitution: fontSubstitution(),
};

// Create attributed string from fragments
const attributedString = fromFragments([
  { string: 'Hello ', attributes: { fontSize: 12, font: [myFont] } },
  { string: 'World!', attributes: { fontSize: 12, font: [myFont] } },
]);

// Define container
const container = {
  x: 0,
  y: 0,
  width: 400,
  height: 600,
};

// Layout text
const layout = layoutEngine(engines);
const paragraphs = layout(attributedString, container, {});
```

--------------------------------

### Manage package versions and releases

Source: https://github.com/diegomura/react-pdf/blob/master/CLAUDE.md

Commands for handling versioning and publishing using Changesets.

```bash
yarn changeset          # Create a changeset
yarn version-packages   # Apply changesets to bump versions
yarn release            # Publish to npm
```

--------------------------------

### Basic Usage

Source: https://github.com/diegomura/react-pdf/blob/master/packages/mermaid/README.md

Demonstrates how to import and use the Mermaid component within a react-pdf Document.

```APIDOC
## Usage

```jsx
import { Document, Page, View } from '@react-pdf/renderer';
import { Mermaid } from '@react-pdf/mermaid';

const MyDocument = () => (
  <Document>
    <Page size="A4">
      <View style={{ padding: 30 }}>
        <Mermaid width={400} height={300}>
          {`graph TD
            A[Start] --> B{Decision}
            B -->|Yes| C[OK]
            B -->|No| D[End]`}
        </Mermaid>
      </View>
    </Page>
  </Document>
);
```
```

--------------------------------

### Import and Use Primitives

Source: https://github.com/diegomura/react-pdf/blob/master/packages/primitives/README.md

Demonstrates how to import primitive constants from the package and verify their string values.

```javascript
import { View, Text, Page, Document } from '@react-pdf/primitives';

console.log(View); // 'VIEW'
console.log(Text); // 'TEXT'
console.log(Page); // 'PAGE'
console.log(Document); // 'DOCUMENT'
```

--------------------------------

### Execute layoutEngine

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Creates a layout function with the specified engines and processes text.

```js
const layout = layoutEngine(engines);
const paragraphs = layout(attributedString, container, options);
```

--------------------------------

### Basic Font Registration and Loading with FontStore

Source: https://github.com/diegomura/react-pdf/blob/master/packages/font/README.md

Demonstrates the fundamental usage of FontStore for registering a custom font from a remote URL and then loading it for use. This involves creating a FontStore instance, registering the font with its family and source, and then awaiting the load operation.

```javascript
import FontStore from '@react-pdf/font';

const fontStore = new FontStore();

// Register a custom font
fontStore.register({
  family: 'Roboto',
  src: 'https://example.com/fonts/Roboto-Regular.ttf',
});

// Load the font
await fontStore.load({
  fontFamily: 'Roboto',
  fontStyle: 'normal',
  fontWeight: 400,
});
```

--------------------------------

### Run common development commands

Source: https://github.com/diegomura/react-pdf/blob/master/CLAUDE.md

Use these Yarn commands to manage the monorepo, including building, testing, and linting packages.

```bash
yarn install              # Install dependencies and bootstrap monorepo
yarn build                # Build all packages (lerna run build)
yarn watch                # Watch mode - rebuilds on changes (for development)
yarn test                 # Run all tests (vitest)
yarn test packages/layout # Run tests for a specific package
yarn lint                 # Lint all packages (eslint packages)
yarn typecheck            # TypeScript type checking across all packages
yarn dev                  # Run example apps
```

--------------------------------

### Preview PDF pages as images

Source: https://github.com/diegomura/react-pdf/blob/master/CLAUDE.md

Convert PDF pages to PNG images for visual inspection during debugging.

```bash
pdftoppm -png -r 200 document.pdf preview
```

--------------------------------

### Render PDF to File, Buffer, and Stream in Node.js

Source: https://context7.com/diegomura/react-pdf/llms.txt

Demonstrates how to render a React PDF document to a file, a buffer (for sending as HTTP responses), and a stream (for piping). Requires '@react-pdf/renderer' and Node.js environment.

```jsx
import React from 'react';
import { renderToFile, renderToBuffer, renderToStream, Document, Page, Text, StyleSheet } from '@react-pdf/renderer';
import fs from 'fs';

const styles = StyleSheet.create({
  page: { padding: 30 },
  title: { fontSize: 24, marginBottom: 20 },
});

const InvoiceDocument = ({ invoice }) => (
  <Document>
    <Page size="A4" style={styles.page}>
      <Text style={styles.title}>Invoice #{invoice.id}</Text>
      <Text>Customer: {invoice.customer}</Text>
      <Text>Amount: ${invoice.amount}</Text>
      <Text>Date: {invoice.date}</Text>
    </Page>
  </Document>
);

// Render to file
const generateFile = async () => {
  await renderToFile(
    <InvoiceDocument invoice={{ id: '001', customer: 'John', amount: 100, date: '2024-01-01' }} />,
    './invoice.pdf',
    (stream, filePath) => {
      console.log(`PDF saved to ${filePath}`);
    }
  );
};

// Render to buffer (useful for sending as response)
const generateBuffer = async () => {
  const buffer = await renderToBuffer(
    <InvoiceDocument invoice={{ id: '002', customer: 'Jane', amount: 250, date: '2024-01-15' }} />
  );
  console.log('PDF buffer size:', buffer.length);
  return buffer;
};

// Render to stream (useful for piping)
const generateStream = async () => {
  const stream = await renderToStream(
    <InvoiceDocument invoice={{ id: '003', customer: 'Bob', amount: 500, date: '2024-02-01' }} />
  );

  // Pipe to file
  const writeStream = fs.createWriteStream('./streamed-invoice.pdf');
  stream.pipe(writeStream);

  return new Promise((resolve, reject) => {
    writeStream.on('finish', resolve);
    writeStream.on('error', reject);
  });
};

// Using render() alias for renderToFile
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(
  <InvoiceDocument invoice={{ id: '004', customer: 'Alice', amount: 750, date: '2024-03-01' }} />,
  './output.pdf'
);

```

--------------------------------

### Registering Emoji Sources

Source: https://github.com/diegomura/react-pdf/blob/master/packages/font/README.md

Explains how to enable emoji rendering by registering an emoji source. Two methods are shown: using a URL pattern and providing a custom builder function.

```javascript
// Using a URL pattern (must end with trailing slash)
fontStore.registerEmojiSource({
  url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',
  format: 'png',
});

// Using a custom builder function
fontStore.registerEmojiSource({
  builder: (code) => `https://example.com/emojis/${code}.png`,
});
```

--------------------------------

### Basic Rendering with @react-pdf/render

Source: https://github.com/diegomura/react-pdf/blob/master/packages/render/README.md

Demonstrates how to use the render function from @react-pdf/render to render a document structure. It requires importing primitives and providing a context for rendering.

```javascript
import render from '@react-pdf/render';
import primitives from '@react-pdf/primitives';

const view = {
  type: primitives.View,
  style: {
    backgroundColor: 'red',
    borderTopLeftRadius: 5,
    borderTopRightRadius: 10,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 15,
    borderTopColor: 'yellow',
    borderLeftColor: 'green',
    borderBottomColor: 'black',
    borderRightColor: 'purple',
  },
  box: {
    left: 20,
    top: 20,
    width: 100,
    height: 80,
    borderTopWidth: 3,
    borderLeftWidth: 2,
    borderBottomWidth: 1,
    borderRightWidth: 4,
  },
};

const doc = {
  type: primitives.Document,
  children: [
    {
      type: primitives.Page,
      box: { width: 400, height: 600 },
      children: [view],
    },
  ],
};

// Provide your own context
const ctx = createContext();

render.default(ctx, doc);
```

--------------------------------

### Render PDF in Browser and Node.js

Source: https://github.com/diegomura/react-pdf/blob/master/README.md

Shows how to display a PDF in the browser using the PDFViewer component and how to save a PDF file directly to the disk in a Node.js environment.

```jsx
// Web: Render in DOM
import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

// Node: Save in a file
import React from 'react';
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);
```

--------------------------------

### Preview PDF pages using PyMuPDF

Source: https://github.com/diegomura/react-pdf/blob/master/CLAUDE.md

Use PyMuPDF as a fallback method to convert PDF pages to images if pdftoppm is unavailable.

```bash
pip install pymupdf
```

```python
import fitz

doc = fitz.open("document.pdf")
for i, page in enumerate(doc):
    pix = page.get_pixmap(dpi=200)
    pix.save(f"page-{i+1}.png")
```

--------------------------------

### Define PDF Document Structure

Source: https://github.com/diegomura/react-pdf/blob/master/README.md

Demonstrates how to create a basic PDF document structure using React components like Document, Page, View, and Text, along with StyleSheet for layout styling.

```jsx
import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);
```

--------------------------------

### Basic Usage

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Import and use the Math component within your react-pdf document.

```APIDOC
## Basic Usage

### Import

```tsx
import React from 'react';
import { Document, Page } from '@react-pdf/renderer';
import { Math } from '@react-pdf/math';
```

### Example Document

```tsx
const MyDocument = () => (
  <Document>
    <Page size="A4" style={{ padding: 40 }}>
      <Math>{\"x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\"}</Math>
    </Page>
  </Document>
);
```
```

--------------------------------

### Run a specific test file

Source: https://github.com/diegomura/react-pdf/blob/master/CLAUDE.md

Execute a single test file using the Vitest runner.

```bash
yarn vitest run path/to/test.ts
```

--------------------------------

### Configure bidi engine

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Handles bidirectional text analysis using the Unicode Bidirectional Algorithm.

```js
import { bidi } from '@react-pdf/textkit';

const bidiEngine = bidi();
const result = bidiEngine(attributedString);
```

--------------------------------

### Define LayoutOptions type

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Configuration options for controlling the text layout process.

```ts
type LayoutOptions = {
  hyphenationCallback?: (
    word: string | null,
    fallback: (word: string | null) => string[],
  ) => string[];
  tolerance?: number;
  hyphenationPenalty?: number;
  expandCharFactor?: JustificationFactor;
  shrinkCharFactor?: JustificationFactor;
  expandWhitespaceFactor?: JustificationFactor;
  shrinkWhitespaceFactor?: JustificationFactor;
};
```

--------------------------------

### Create PDF Document with Metadata (@react-pdf/renderer)

Source: https://context7.com/diegomura/react-pdf/llms.txt

Demonstrates how to create a root PDF Document component using @react-pdf/renderer. It includes setting metadata like title, author, and subject, along with basic page styling and content.

```jsx
import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: {
    flexDirection: 'column',
    backgroundColor: '#ffffff',
    padding: 30,
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

const MyDocument = () => (
  <Document
    title="Annual Report 2024"
    author="John Smith"
    subject="Company Financial Summary"
    creator="react-pdf"
    producer="react-pdf"
    keywords="report, financial, annual"
    language="en"
    pdfVersion="1.5"
    pageMode="useOutlines"
    pageLayout="singlePage"
    onRender={({ blob }) => console.log('PDF rendered, size:', blob?.size)}
  >
    <Page size="A4" style={styles.page}>
      <Text style={styles.title}>Annual Report</Text>
    </Page>
  </Document>
);

```

--------------------------------

### Apply Media Queries

Source: https://github.com/diegomura/react-pdf/blob/master/packages/stylesheet/README.md

Configures conditional styles based on container dimensions and orientation using the @media syntax.

```javascript
const style = {
  fontSize: 12,
  '@media max-width: 500': {
    fontSize: 10,
  },
  '@media orientation: landscape': {
    flexDirection: 'row',
  },
  '@media min-width: 400 and max-width: 800': {
    padding: 20,
  },
};
```

--------------------------------

### Configure textDecoration engine

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Generates decoration lines like underline or strikethrough for styled text.

```js
import { textDecoration } from '@react-pdf/textkit';

const textDecorationEngine = textDecoration();
```

--------------------------------

### Registering Fonts from Local Files (Node.js)

Source: https://github.com/diegomura/react-pdf/blob/master/packages/font/README.md

Illustrates how to register a font using a local file path. This functionality is specifically available in Node.js environments.

```javascript
fontStore.register({
  family: 'Custom Font',
  src: '/path/to/font.ttf',
});
```

--------------------------------

### Resolve Styles with stylesheet

Source: https://github.com/diegomura/react-pdf/blob/master/packages/stylesheet/README.md

Demonstrates how to use the main stylesheet function to resolve a style object against a container context. It handles unit conversion, shorthand expansion, and media queries.

```javascript
import stylesheet from '@react-pdf/stylesheet';

const container = { width: 400, height: 600, orientation: 'portrait' };
const style = {
  margin: 20,
  width: '50vw',
  height: '20vh',
  borderRadius: 5,
  fontWeight: 'semibold',
  borderBottom: '2 solid yellow',
  '@media max-width: 500': {
    backgroundColor: 'rgb(255, 0, 0)',
  },
};

const computed = stylesheet(container, style);
```

--------------------------------

### LayoutOptions

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Configuration options that control the text layout process, including hyphenation and justification.

```APIDOC
## LayoutOptions

### Description
Options for the layout process.

### Type Definition
```typescript
type LayoutOptions = {
  hyphenationCallback?: (
    word: string | null,
    fallback: (word: string | null) => string[],
  ) => string[];
  tolerance?: number;
  hyphenationPenalty?: number;
  expandCharFactor?: JustificationFactor;
  shrinkCharFactor?: JustificationFactor;
  expandWhitespaceFactor?: JustificationFactor;
  shrinkWhitespaceFactor?: JustificationFactor;
};
```
```

--------------------------------

### Configure justification engine

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Adjusts character and word spacing to achieve justified text alignment.

```js
import { justification } from '@react-pdf/textkit';

const justificationEngine = justification({
  expandCharFactor: { before: 0, after: 0 },
  shrinkCharFactor: { before: 0, after: 0 },
  expandWhitespaceFactor: { before: 0.5, after: 0.5 },
  shrinkWhitespaceFactor: { before: 0.5, after: 0.5 },
});
```

--------------------------------

### Apply Mermaid Themes

Source: https://github.com/diegomura/react-pdf/blob/master/packages/mermaid/README.md

Use the theme prop to apply built-in styling presets to the diagram.

```jsx
<Mermaid theme="nord" width={400}>
  {`graph LR
    A --> B --> C`}
</Mermaid>
```

--------------------------------

### Math Component API

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

The `<Math>` component accepts several props to customize the rendering of LaTeX expressions.

```APIDOC
## Math Component API

### Description

This component renders LaTeX math expressions within react-pdf documents.

### Props

#### `children`
- **Type**: `string`
- **Default**: `—`
- **Description**: The LaTeX math expression to render.

#### `inline`
- **Type**: `boolean`
- **Default**: `false`
- **Description**: Set to `true` for inline mode (compact) or `false` for display mode (centered, larger).

#### `width`
- **Type**: `number | string`
- **Default**: `—`
- **Description**: The width of the SVG element.

#### `height`
- **Type**: `number | string`
- **Default**: `—`
- **Description**: The height of the SVG element.

#### `color`
- **Type**: `string`
- **Default**: `"black"`
- **Description**: The color for the math expression.

#### `debug`
- **Type**: `boolean`
- **Default**: `false`
- **Description**: If `true`, adds a visible border around the SVG element for debugging layout.

### Usage Examples

**Display Mode (Default):**
```tsx
<Math>{\"\\int_0^\\infty e^{-x^2} dx = \\sqrt{\\pi}\"}</Math>
```

**Inline Mode:**
```tsx
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <Text>The equation </Text>
  <Math inline>{\"E = mc^2\"}</Math>
  <Text> is famous.</Text>
</View>
```
```

--------------------------------

### Display Images with React-PDF Image Component

Source: https://context7.com/diegomura/react-pdf/llms.txt

Demonstrates how to use the Image component to display images from various sources like URLs, local files (in Node.js environments), and base64 encoded strings. It also shows how to control image scaling with object-fit properties and manage caching.

```jsx
import { Document, Page, Image, View, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: { padding: 20 },
  imageContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
  },
  image: {
    width: 200,
    height: 150,
  },
  imageCover: {
    width: 200,
    height: 150,
    objectFit: 'cover',
  },
  imageContain: {
    width: 200,
    height: 150,
    objectFit: 'contain',
    backgroundColor: '#f0f0f0',
  },
  fullWidth: {
    width: '100%',
    height: 200,
    objectFit: 'cover',
    objectPosition: '50% 30%',
  },
});

const ImageExample = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.imageContainer}>
        {/* Image from URL */}
        <Image
          style={styles.image}
          src="https://example.com/photo.jpg"
        />

        {/* Image with object-fit cover */}
        <Image
          style={styles.imageCover}
          src="https://example.com/landscape.jpg"
        />

        {/* Image with object-fit contain */}
        <Image
          style={styles.imageContain}
          src="https://example.com/portrait.jpg"
        />
      </View>

      {/* Full width banner with object position */}
      <Image
        style={styles.fullWidth}
        src="https://example.com/banner.jpg"
      />

      {/* Base64 encoded image */}
      <Image
        style={styles.image}
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
      />

      {/* Image with cache disabled (always re-fetch) */}
      <Image
        style={styles.image}
        src="https://example.com/dynamic.jpg"
        cache={false}
      />

      {/* Using source prop instead of src */}
      <Image
        style={styles.image}
        source={{
          uri: 'https://example.com/photo.jpg',
          method: 'GET',
          headers: { 'Authorization': 'Bearer token' },
          body: null,
        }}
      />
    </Page>
  </Document>
);

```

--------------------------------

### stylesheet(container, style)

Source: https://github.com/diegomura/react-pdf/blob/master/packages/stylesheet/README.md

Resolves styles for a given container, expanding shorthands and converting units.

```APIDOC
## `stylesheet(container, style)`

Resolves styles for a given container.

### Parameters

- `container` - Container dimensions and settings
- `style` - Style object or array of style objects

### Returns

Resolved style object with expanded shorthands and converted units
```

--------------------------------

### Define Reusable Styles with StyleSheet API

Source: https://context7.com/diegomura/react-pdf/llms.txt

The StyleSheet.create method allows for the definition of reusable style objects including support for flexbox, media queries, and transformations. Styles can be applied individually or combined as an array to components.

```jsx
import { Document, Page, View, Text, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: {
    padding: 30,
    backgroundColor: '#fff',
  },
  container: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 10,
    rowGap: 15,
    columnGap: 10,
  },
  card: {
    width: '30%',
    padding: 15,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
    borderStyle: 'solid',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    fontFamily: 'Helvetica-Bold',
    marginBottom: 10,
    color: '#333',
  },
  text: {
    fontSize: 12,
    lineHeight: 1.6,
    textAlign: 'left',
  },
  absolute: {
    position: 'absolute',
    top: 10,
    right: 10,
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  responsive: {
    width: 200,
    padding: 10,
    '@media max-width: 500': {
      width: 150,
      padding: 5,
    },
    '@media orientation: landscape': {
      width: 300,
    },
  },
  transform: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    transform: 'rotate(45deg)',
    transformOrigin: '50% 50%',
  },
});

const CombinedStyleExample = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={[styles.card, { backgroundColor: '#e0e0e0' }]}>
        <Text style={[styles.title, styles.text]}>Combined Styles</Text>
      </View>
    </Page>
  </Document>
);
```

--------------------------------

### layoutEngine(engines)

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Creates a layout function configured with specific engines to process text within a container.

```APIDOC
## layoutEngine(engines)

### Description
Creates a layout function with the specified engines to process an AttributedString into paragraphs within a defined container.

### Parameters
- **engines** (Object) - Required - A collection of configured engines (bidi, linebreaker, justification, etc.)

### Request Example
```js
const layout = layoutEngine(engines);
const paragraphs = layout(attributedString, container, options);
```
```

--------------------------------

### Resolve Images from Various Sources

Source: https://github.com/diegomura/react-pdf/blob/master/packages/image/README.md

Demonstrates how to use the resolveImage function to process images from local paths, remote URLs, base64 URIs, buffers, and browser blobs. It also shows how to configure custom request headers for remote images and disable caching.

```javascript
import resolveImage from '@react-pdf/image';

// Basic usage
const image = await resolveImage({ uri: './path/to/image.png' });

// Remote URL with custom options
const remoteImage = await resolveImage({
  uri: 'https://example.com/image.png',
  method: 'GET',
  headers: { Authorization: 'Bearer token' }
});

// Buffer input
import fs from 'fs';
const buffer = fs.readFileSync('./image.png');
const bufferImage = await resolveImage(buffer);

// Disable caching
const uncachedImage = await resolveImage({ uri: './image.png' }, { cache: false });
```

--------------------------------

### Run

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Defines a segment of text within an AttributedString that shares the same style attributes.

```APIDOC
## Run

### Description
A styled segment of text.

### Type Definition
```typescript
type Run = {
  start: number;
  end: number;
  attributes: Attributes;
  glyphs?: Glyph[];
  positions?: Position[];
  stringIndices?: number[];
  glyphIndices?: number[];
};
```
```

--------------------------------

### Render Math in react-pdf

Source: https://github.com/diegomura/react-pdf/blob/master/packages/math/README.md

Basic implementation of the Math component within a react-pdf Document.

```tsx
import React from 'react';
import { Document, Page } from '@react-pdf/renderer';
import { Math } from '@react-pdf/math';

const MyDocument = () => (
  <Document>
    <Page size="A4" style={{ padding: 40 }}>
      <Math>{"x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}"}</Math>
    </Page>
  </Document>
);
```

--------------------------------

### Configure fontSubstitution engine

Source: https://github.com/diegomura/react-pdf/blob/master/packages/textkit/README.md

Automatically substitutes fonts when the primary font lacks necessary glyphs.

```js
import { fontSubstitution } from '@react-pdf/textkit';

const fontSubstitutionEngine = fontSubstitution();
```

--------------------------------

### Create Links with React-PDF Link Component

Source: https://context7.com/diegomura/react-pdf/llms.txt

Illustrates how to use the Link component to create hyperlinks within PDF documents. This includes linking to external websites, internal document anchors, and creating clickable elements that function as buttons.

```jsx
import { Document, Page, Text, Link, View, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: { padding: 30 },
  link: {
    color: 'blue',
    textDecoration: 'underline',
  },
  button: {
    backgroundColor: '#007bff',
    padding: 10,
    borderRadius: 5,
    alignSelf: 'flex-start',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

const LinkExample = () => (
  <Document>
    <Page size="A4" style={styles.page} id="page1">
      <Text>Table of Contents</Text>

      {/* External URL link */}
      <Link src="https://react-pdf.org" style={styles.link}>
        Visit React-PDF Documentation
      </Link>

      {/* Internal link to another page */}
      <Link href="#page2" style={styles.link}>
        Go to Chapter 2
      </Link>

      {/* Link inside text */}
      <Text>
        Contact us at{' '}
        <Link src="mailto:hello@example.com" style={styles.link}>
          hello@example.com
        </Link>
      </Text>

      {/* Button-style link */}
      <Link src="https://example.com/signup">
        <View style={styles.button}>
          <Text style={styles.buttonText}>Sign Up Now</Text>
        </View>
      </Link>
    </Page>

    <Page size="A4" style={styles.page} id="page2">
      <Text>Chapter 2</Text>
      <Link href="#page1" style={styles.link}>
        Back to Table of Contents
      </Link>
    </Page>
  </Document>
);

```