## File: README.md

## Lost?

This package is used to _create_ PDFs using React. If you wish to _display_ existing PDFs, you may be looking for [react-pdf](https://github.com/wojtekmaj/react-pdf).

## How to install

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

## How it works

```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>
    
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    
  </Document>
);
```

### `Web.` Render in DOM

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

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

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

### `Node.` Save in a file

```jsx
import React from 'react';
import ReactPDF from '@react-pdf/renderer';

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

## Contributors

This project exists thanks to all the people who contribute. Looking to contribute? Please check our [[contribute]](https://github.com/diegomura/react-pdf/blob/master/.github/CONTRIBUTING.md) document for more details about how to setup a development environment and submitting code.

[](https://github.com/diegomura/react-pdf/blob/master/.github/CONTRIBUTING.md)

## Sponsors

Thank you to all our sponsors! [[Become a sponsors](https://opencollective.com/react-pdf#sponsors)]

[](https://opencollective.com/react-pdf#sponsors)

## Backers

Thank you to all our backers! [[Become a backer](https://opencollective.com/react-pdf#backer)]

[](https://opencollective.com/react-pdf#backers)

## License

MIT © [Diego Muracciole](http://github.com/diegomura)

---

[](https://www.npmjs.com/package/@react-pdf/renderer)

---

## File: packages/types/README.md

# @react-pdf/types

> React-pdf TypeScript definitions

## How to install

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

## License

MIT © [Diego Muracciole](http://github.com/diegomura)

---

## File: packages/textkit/README.md

# @react-pdf/textkit

> An advanced text layout framework

A comprehensive text layout engine for react-pdf. Handles complex text rendering including bidirectional text, line breaking, hyphenation, justification, font substitution, and text decoration.

## Acknowledges

This project is a fork of [textkit](https://github.com/foliojs/textkit) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Installation

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

## Usage

```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, {});
```

## Layout Process

The layout engine processes text through the following steps:

1. Split into paragraphs
2. Get bidi runs and paragraph direction
3. Font substitution - map to resolved font runs
4. Script itemization
5. Font shaping - text to glyphs
6. Line breaking
7. Bidi reordering
8. Justification
9. Get a list of rectangles by intersecting path, line, and exclusion paths
10. Perform line breaking to get acceptable break points for each fragment
11. Ellipsize line if necessary
12. Bidi reordering
13. Justification

## Engines

The layout engine uses several specialized engines that can be customized:

### bidi

Handles bidirectional text analysis using the Unicode Bidirectional Algorithm. Determines text direction for mixed LTR/RTL content.

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

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

### linebreaker

Performs line breaking using the Knuth-Plass algorithm with fallback to best-fit. Handles hyphenation points and produces optimal line breaks.

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

const linebreakerEngine = linebreaker({
  tolerance: 4,
  hyphenationPenalty: 100,
});
```

### justification

Adjusts character and word spacing to achieve justified text alignment. Based on Apple's justification algorithm.

```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 },
});
```

### fontSubstitution

Automatically substitutes fonts when the primary font doesn't have glyphs for certain characters. Picks the best font from the font stack.

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

const fontSubstitutionEngine = fontSubstitution();
```

### scriptItemizer

Identifies Unicode script runs in text (Latin, Arabic, Han, etc.) to enable proper font selection and shaping.

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

const scriptItemizerEngine = scriptItemizer();
```

### wordHyphenation

Provides word hyphenation using language-specific patterns. Supports soft hyphens and custom hyphenation callbacks.

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

const wordHyphenationEngine = wordHyphenation();
const syllables = wordHyphenationEngine('hyphenation'); // ['hy', 'phen', 'a', 'tion']
```

### textDecoration

Generates decoration lines (underline, strikethrough) for styled text runs.

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

const textDecorationEngine = textDecoration();
```

## API Reference

### layoutEngine(engines)

Creates a layout function with the specified engines.

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

### fromFragments(fragments)

Creates an AttributedString from text fragments.

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

const attributedString = fromFragments([
  { string: 'Hello ', attributes: { fontSize: 14 } },
  { string: 'World!', attributes: { fontSize: 14, color: 'blue' } },
]);
```

## Types

### AttributedString

The main data structure representing styled text:

```ts
type AttributedString = {
  string: string;
  runs: Run[];
  syllables?: string[];
  box?: Rect;
  decorationLines?: DecorationLine[];
};
```

### Run

A styled segment of text:

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

### Attributes

Style attributes for text runs:

```ts
type Attributes = {
  align?: string;
  alignLastLine?: string;
  attachment?: Attachment;
  backgroundColor?: string;
  bidiLevel?: number;
  characterSpacing?: number;
  color?: string;
  direction?: 'rtl' | 'ltr';
  features?: unknown[];
  fill?: boolean;
  font?: Font[];
  fontSize?: number;
  hangingPunctuation?: boolean;
  hyphenationFactor?: number;
  indent?: number;
  justificationFactor?: number;
  lineHeight?: number;
  lineSpacing?: number;
  link?: string;
  margin?: number;
  marginLeft?: number;
  marginRight?: number;
  opacity?: number;
  padding?: number;
  paddingTop?: number;
  paragraphSpacing?: number;
  scale?: number;
  script?: unknown;
  shrinkFactor?: number;
  strike?: boolean;
  strikeColor?: string;
  strikeStyle?: string;
  stroke?: boolean;
  underline?: boolean;
  underlineColor?: string;
  underlineStyle?: string;
  verticalAlign?: string;
  wordSpacing?: number;
  yOffset?: number;
};
```

### Container

The area where text will be laid out:

```ts
type Container = {
  x: number;
  y: number;
  width: number;
  height: number;
  truncateMode?: 'ellipsis';
  maxLines?: number;
  excludeRects?: Rect[];
};
```

### Rect

A rectangle definition:

```ts
type Rect = {
  x: number;
  y: number;
  width: number;
  height: number;
};
```

### Fragment

Input format for creating attributed strings:

```ts
type Fragment = {
  string: string;
  attributes?: Attributes;
};
```

### LayoutOptions

Options for the 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;
};
```

### Engines

The engines configuration object:

```ts
type Engines = {
  bidi: ReturnType<typeof bidi>;
  linebreaker: ReturnType<typeof linebreaker>;
  justification: ReturnType<typeof justification>;
  fontSubstitution: ReturnType<typeof fontSubstitution>;
  scriptItemizer: ReturnType<typeof scriptItemizer>;
  textDecoration: ReturnType<typeof textDecoration>;
  wordHyphenation?: ReturnType<typeof wordHyphenation>;
};
```

## License

MIT

---

## File: packages/stylesheet/README.md

# @react-pdf/stylesheet

Styles resolution engine for react-pdf. Transforms CSS-like style objects into normalized, resolved values ready for layout and rendering. Handles unit conversions, color parsing, shorthand expansion, media queries, and style flattening.

## Installation

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

## Usage

```js
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);

// Result:
// {
//   width: 200,
//   height: 120,
//   marginTop: 20,
//   marginLeft: 20,
//   marginRight: 20,
//   marginBottom: 20,
//   borderTopLeftRadius: 5,
//   borderTopRightRadius: 5,
//   borderBottomLeftRadius: 5,
//   borderBottomRightRadius: 5,
//   fontWeight: 600,
//   borderBottomWidth: 2,
//   borderBottomStyle: 'solid',
//   borderBottomColor: 'yellow',
//   backgroundColor: '#FF0000'
// }
```

## Features

### Style Flattening

Merges arrays of style objects into a single object. Supports nested arrays and filters out null/undefined values.

```js
import stylesheet, { flatten } from '@react-pdf/stylesheet';

const baseStyle = { margin: 10, padding: 5 };
const activeStyle = { backgroundColor: 'blue' };

// Pass an array of styles
const computed = stylesheet(container, [baseStyle, activeStyle]);

// Or use flatten directly
const merged = flatten([baseStyle, null, activeStyle, undefined]);
// => { margin: 10, padding: 5, backgroundColor: 'blue' }
```

### Media Queries

Apply styles conditionally based on container dimensions and orientation.

```js
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,
  },
};
```

Supported media features:

- `min-width` / `max-width`
- `min-height` / `max-height`
- `orientation` (`portrait` | `landscape`)

### Unit Conversion

Converts various CSS units to points (the PDF standard unit).

```js
const style = {
  width: '2in', // 144pt (72pt per inch)
  height: '50mm', // ~141.73pt
  padding: '1cm', // ~28.35pt
  margin: '10vh', // 10% of container height
  fontSize: '5vw', // 5% of container width
  gap: '2rem', // 36pt (default rem base: 18pt)
  left: '100px', // ~100pt at 72dpi
};
```

| Unit  | Description                          |
| ----- | ------------------------------------ |
| `pt`  | Points (default, 1pt = 1/72 inch)    |
| `in`  | Inches (1in = 72pt)                  |
| `mm`  | Millimeters                          |
| `cm`  | Centimeters                          |
| `vh`  | Percentage of container height       |
| `vw`  | Percentage of container width        |
| `rem` | Relative to rem base (default 18pt)  |
| `px`  | Pixels (converted using DPI setting) |

### Color Transformation

Normalizes color values to hexadecimal format.

```js
import { transformColor } from '@react-pdf/stylesheet';

transformColor('rgb(255, 0, 0)'); // => '#FF0000'
transformColor('rgba(0, 0, 255, 0.5)'); // => '#0000FF80'
transformColor('hsl(120, 100%, 50%)'); // => '#00FF00'
transformColor('hsla(0, 100%, 50%, 0.8)'); // => '#FF0000CC'
transformColor('red'); // => 'red' (passed through)
```

### Shorthand Expansion

Expands CSS shorthand properties into their individual components.

#### Margin & Padding

```js
// Input
{ margin: '10 20 30 40' }
// Output
{
  marginTop: 10,
  marginRight: 20,
  marginBottom: 30,
  marginLeft: 40
}

// Also supports marginHorizontal/marginVertical
{ marginHorizontal: 20, marginVertical: 10 }
// Output
{
  marginTop: 10,
  marginRight: 20,
  marginBottom: 10,
  marginLeft: 20
}
```

#### Border

```js
// Input
{ border: '2 solid red' }
// Output
{
  borderTopWidth: 2,
  borderTopStyle: 'solid',
  borderTopColor: 'red',
  borderRightWidth: 2,
  borderRightStyle: 'solid',
  borderRightColor: 'red',
  borderBottomWidth: 2,
  borderBottomStyle: 'solid',
  borderBottomColor: 'red',
  borderLeftWidth: 2,
  borderLeftStyle: 'solid',
  borderLeftColor: 'red',
}

// Border radius expansion
{ borderRadius: 5 }
// Output
{
  borderTopLeftRadius: 5,
  borderTopRightRadius: 5,
  borderBottomRightRadius: 5,
  borderBottomLeftRadius: 5,
}
```

#### Flex

```js
// Input
{ flex: '1 0 auto' }
// Output
{
  flexGrow: 1,
  flexShrink: 0,
  flexBasis: 'auto'
}

// Single value
{ flex: 1 }
// Output
{ flexGrow: 1 }
```

#### Gap

```js
// Input
{ gap: '10 20' }
// Output
{
  rowGap: 10,
  columnGap: 20
}
```

#### Object Position

```js
// Input
{ objectPosition: '50% 25%' }
// Output
{
  objectPositionX: 0.5,
  objectPositionY: 0.25
}
```

#### Transform Origin

```js
// Input
{ transformOrigin: 'center top' }
// Output
{
  transformOriginX: '50%',
  transformOriginY: '0%'
}
```

### Transform Parsing

Parses CSS transform strings into structured transform arrays.

```js
// Input
{
  transform: 'translate(10, 20) rotate(45) scale(2)';
}
// Output
{
  transform: [
    { operation: 'translate', value: [10, 20] },
    { operation: 'rotate', value: [45] },
    { operation: 'scale', value: [2, 2] },
  ];
}
```

Supported transform functions:

- `translate(x, y)` - Translation
- `translateX(x)` / `translateY(y)` - Single-axis translation
- `rotate(angle)` - Rotation in degrees
- `scale(x, y)` - Scaling (y defaults to x if omitted)
- `scaleX(x)` / `scaleY(y)` - Single-axis scaling
- `skew(x, y)` - Skewing in degrees
- `skewX(x)` / `skewY(y)` - Single-axis skewing
- `matrix(a, b, c, d, e, f)` - Full transformation matrix

### Font Weight Resolution

Converts font weight keywords to numeric values.

| Keyword                    | Numeric Value |
| -------------------------- | ------------- |
| `thin`, `hairline`         | 100           |
| `ultralight`, `extralight` | 200           |
| `light`                    | 300           |
| `normal`                   | 400           |
| `medium`                   | 500           |
| `semibold`, `demibold`     | 600           |
| `bold`                     | 700           |
| `ultrabold`, `extrabold`   | 800           |
| `heavy`, `black`           | 900           |

## API Reference

### Default Export

#### `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

### Named Exports

#### `flatten(styles)`

Flattens an array of style objects into a single merged object.

```js
import { flatten } from '@react-pdf/stylesheet';

flatten([{ margin: 10 }, null, { padding: 5 }]);
// => { margin: 10, padding: 5 }
```

#### `transformColor(value)`

Transforms RGB/HSL color strings to hexadecimal format.

```js
import { transformColor } from '@react-pdf/stylesheet';

transformColor('rgb(255, 128, 0)'); // => '#FF8000'
```

## Types

### Container

```ts
type Container = {
  width: number; // Container width in points
  height: number; // Container height in points
  dpi?: number; // DPI for px unit conversion (default: 72)
  remBase?: number; // Base size for rem units (default: 18)
  orientation?: 'landscape' | 'portrait';
};
```

### Style

The input style object supporting all CSS-like properties:

```
/* Detailed source-code truncated for AI context efficiency. */
```

### SafeStyle

The resolved output style with normalized values:

```ts
type SafeStyle = {
  // All shorthand properties expanded
  // All units converted to points (numbers)
  // All colors normalized
  // Transforms parsed into structured arrays
};
```

### Transform

```ts
type Transform =
  | { operation: 'translate'; value: [number, number] }
  | { operation: 'rotate'; value: [number] }
  | { operation: 'scale'; value: [number, number] }
  | { operation: 'skew'; value: [number, number] }
  | {
      operation: 'matrix';
      value: [number, number, number, number, number, number];
    };
```

### FontWeight

```ts
type FontWeight =
  | number
  | 'thin'
  | 'hairline'
  | 'ultralight'
  | 'extralight'
  | 'light'
  | 'normal'
  | 'medium'
  | 'semibold'
  | 'demibold'
  | 'bold'
  | 'ultrabold'
  | 'extrabold'
  | 'heavy'
  | 'black';
```

## License

MIT

---

## File: packages/renderer/README.md

## How to install

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

## How it works

```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>
    
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    
  </Document>
);
```

### `Web.` Render in DOM

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

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

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

### `Node.` Save in a file

```jsx
import React from 'react';
import ReactPDF from '@react-pdf/renderer';

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

## Contributors

This project exists thanks to all the people who contribute. Looking to contribute? Please check our [[contribute]](https://github.com/diegomura/react-pdf/blob/master/.github/CONTRIBUTING.md) document for more details about how to setup a development environment and submitting code.

[](https://github.com/diegomura/react-pdf/blob/master/.github/CONTRIBUTING.md)

## Sponsors

Thank you to all our sponsors! [[Become a sponsors](https://opencollective.com/react-pdf#sponsors)]

[](https://opencollective.com/react-pdf#sponsors)

## Backers

Thank you to all our backers! [[Become a backer](https://opencollective.com/react-pdf#backer)]

[](https://opencollective.com/react-pdf#backers)

## License

MIT © [Diego Muracciole](http://github.com/diegomura)

---

[](https://www.npmjs.com/package/@react-pdf/renderer)

---

## File: packages/render/README.md

# @react-pdf/render

> React-pdf render engine

## How to install

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

## How it works

```js
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);
```

This library exports a `render` function that takes two arguments:

- _ctx_: This is the target context where the document is going to be rendered. React-pdf currently uses a [pdfkit](https://github.com/react-pdf/pdfkit) document as context, but it can target any other type of structure as long as it signature matches pdfkit API. In the future this will enable rendering documents into muliple formats in addition to PDF.
- _node_: Document root node. A node is a nested structure that defines a single element in a document. They are defined by it's `type` and arguments.

## Node structure

A node represents a single element inside a document. It's mainly defined by it's `type` (mandatory) field in addition to other values to define where that element is positioned inside the document (`box`), how it looks (`style`), how it should behave (`params`) and what sub-nodes it contains (`children`).

The root node must always be of type `DOCUMENT`, containing as many `PAGE` nodes as desired inside it's children field.

Bare in mind this package does not handle any type of node positioning, inheritance, style transformations or any other layout related logic. It's role is limited to render exactly the node it get's into the provided context. Take this into account when definig styles as `paddingTop`, `paddingLeft` and so on instead of the shortcut `padding`. For layout or styles transformation this project provides separate packages.

### node.type

Mandatory field specifiying the type of the particular node. The full list of types can be found and imported from `@react-pdf/primitives`

### node.box

Defines bounding box where a particular node is located inside a document

- left
- top
- width
- height
- paddingTop
- paddingLeft
- paddingBottom
- paddingRight
- marginTop
- marginLeft
- marginBottom
- marginRight
- borderTopWidth
- borderLeftWidth
- borderBottomWidth
- borderRightWidth

### node.style

Defines how the node looks like. There are some types of nodes that expect special style values, but generally all support:

- color
- opacity
- overflow
- backgroundColor
- borderTopLeftRadius
- borderTopRightRadius
- borderBottomLeftRadius
- borderBottomRightRadius
- borderTopColor
- borderLeftColor
- borderBottomColor
- borderRightColor
- _others..._

### node.props

Specific node params needed to render correctly ot behave like certain way. Specially needed for SVG nodes

## PDF example

```js
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);
```

## License

MIT © [Diego Muracciole](http://github.com/diegomura)

---

## File: packages/reconciler/README.md

# @react-pdf/reconciler

---

## File: packages/primitives/README.md

# @react-pdf/primitives

Internal element type constants for react-pdf. This package defines the primitive node types used throughout the react-pdf rendering pipeline.

## Installation

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

## Usage

```js
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'
```

These constants are primarily used internally by react-pdf packages to identify element types during the rendering process.

## Available Primitives

### Document Structure

| Export     | Value        | Description                       |
| ---------- | ------------ | --------------------------------- |
| `Document` | `'DOCUMENT'` | Root document container           |
| `Page`     | `'PAGE'`     | Individual page within a document |
| `View`     | `'VIEW'`     | Generic container element         |
| `Text`     | `'TEXT'`     | Text content container            |
| `Link`     | `'LINK'`     | Hyperlink element                 |
| `Note`     | `'NOTE'`     | Annotation/note element           |
| `Image`    | `'IMAGE'`    | Image element                     |
| `Canvas`   | `'CANVAS'`   | Custom drawing canvas             |

### Form Elements

| Export      | Value          | Description                   |
| ----------- | -------------- | ----------------------------- |
| `FieldSet`  | `'FIELD_SET'`  | Form field grouping container |
| `TextInput` | `'TEXT_INPUT'` | Text input field              |
| `Select`    | `'SELECT'`     | Dropdown select field         |
| `Checkbox`  | `'CHECKBOX'`   | Checkbox input field          |
| `List`      | `'LIST'`       | List element for forms        |

### SVG Elements

| Export           | Value               | Description                |
| ---------------- | ------------------- | -------------------------- |
| `Svg`            | `'SVG'`             | SVG root container         |
| `G`              | `'G'`               | SVG group element          |
| `Path`           | `'PATH'`            | SVG path element           |
| `Rect`           | `'RECT'`            | SVG rectangle element      |
| `Line`           | `'LINE'`            | SVG line element           |
| `Circle`         | `'CIRCLE'`          | SVG circle element         |
| `Ellipse`        | `'ELLIPSE'`         | SVG ellipse element        |
| `Polygon`        | `'POLYGON'`         | SVG polygon element        |
| `Polyline`       | `'POLYLINE'`        | SVG polyline element       |
| `Tspan`          | `'TSPAN'`           | SVG text span element      |
| `ClipPath`       | `'CLIP_PATH'`       | SVG clipping path          |
| `Defs`           | `'DEFS'`            | SVG definitions container  |
| `Stop`           | `'STOP'`            | Gradient stop element      |
| `LinearGradient` | `'LINEAR_GRADIENT'` | Linear gradient definition |
| `RadialGradient` | `'RADIAL_GRADIENT'` | Radial gradient definition |

### Internal Types

| Export         | Value             | Description                             |
| -------------- | ----------------- | --------------------------------------- |
| `TextInstance` | `'TEXT_INSTANCE'` | Internal representation of text content |

## License

MIT

---

## File: packages/pdfkit/README.md

# @react-pdf/pdfkit

A JavaScript PDF generation library for Node and the browser.

## Acknowledges

This project is a fork of [pdfkit](https://github.com/foliojs/pdfkit) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Description

PDFKit is a PDF document generation library for Node and the browser that makes creating complex, multi-page, printable documents easy.
It's written in CoffeeScript, but you can choose to use the API in plain 'ol JavaScript if you like. The API embraces
chainability, and includes both low level functions as well as abstractions for higher level functionality. The PDFKit API
is designed to be simple, so generating complex documents is often as simple as a few function calls.

Check out some of the [documentation and examples](http://pdfkit.org/docs/getting_started.html) to see for yourself!
You can also read the guide as a [self-generated PDF](http://pdfkit.org/docs/guide.pdf) with example output displayed inline.
If you'd like to see how it was generated, check out the README in the [docs](https://github.com/devongovett/pdfkit/tree/master/docs)
folder.

You can also try out an interactive in-browser demo of PDFKit [here](http://pdfkit.org/demo/browser.html).

## Installation

Installation uses the [npm](http://npmjs.org/) package manager. Just type the following command after installing npm.

    npm install @react-pdf/pdfkit

## Features

- Vector graphics
  - HTML5 canvas-like API
  - Path operations
  - SVG path parser for easy path creation
  - Transformations
  - Linear and radial gradients
- Text
  - Line wrapping
  - Text alignments
  - Bulleted lists
- Font embedding
  - Supports TrueType (.ttf), OpenType (.otf), WOFF, WOFF2, TrueType Collections (.ttc), and Datafork TrueType (.dfont) fonts
  - Font subsetting
  - See [fontkit](http://github.com/devongovett/fontkit) for more details on advanced glyph layout support.
- Image embedding
  - Supports JPEG and PNG files (including indexed PNGs, and PNGs with transparency)
- Annotations
  - Links
  - Notes
  - Highlights
  - Underlines
  - etc.

## Coming soon!

- Patterns fills
- Outlines
- PDF Security
- Higher level APIs for creating tables and laying out content
- More performance optimizations
- Even more awesomeness, perhaps written by you! Please fork this repository and send me pull requests.

## Documentation

For complete API documentation and more examples, see the [PDFKit website](http://pdfkit.org/).

## License

PDFKit is available under the MIT license.