react-pdf Documentation

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.

How to install

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] document for more details about how to setup a development environment and submitting code.

Backers

Thank you to all our backers! [Become a backer]

License

MIT © Diego Muracciole

File: packages/types/README.md

@react-pdf/types

React-pdf TypeScript definitions

How to install

yarn add @react-pdf/types

License

MIT © Diego Muracciole

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

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:

Split into paragraphs
Get bidi runs and paragraph direction
Font substitution - map to resolved font runs
Script itemization
Font shaping - text to glyphs
Line breaking
Bidi reordering
Justification
Get a list of rectangles by intersecting path, line, and exclusion paths
Perform line breaking to get acceptable break points for each fragment
Ellipsize line if necessary
Bidi reordering
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.

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.

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.

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.

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.

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

const scriptItemizerEngine = scriptItemizer();

wordHyphenation

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

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.

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

const textDecorationEngine = textDecoration();

API Reference

layoutEngine(engines)

Creates a layout function with the specified engines.

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

fromFragments(fragments)

Creates an AttributedString from text fragments.

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:

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

Run

A styled segment of text:

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

Attributes

Style attributes for text runs:

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:

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

Rect

A rectangle definition:

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

Fragment

Input format for creating attributed strings:

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

LayoutOptions

Options for the layout process:

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:

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

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.

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.

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).

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.

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

// 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

// 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

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

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

Gap

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

Object Position

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

Transform Origin

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

Transform Parsing

Parses CSS transform strings into structured transform arrays.

// 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.

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.

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

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

Types

Container

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:

text

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

SafeStyle

The resolved output style with normalized values:

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

Transform

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

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

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

Backers

Thank you to all our backers! [Become a backer]

License

File: packages/render/README.md

@react-pdf/render

React-pdf render engine

How to install

yarn add @react-pdf/render

How it works

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

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

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

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 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 to see for yourself!
You can also read the guide as a self-generated PDF with example output displayed inline.
If you'd like to see how it was generated, check out the README in the docs
folder.

You can also try out an interactive in-browser demo of PDFKit here.

Installation

Installation uses the npm package manager. Just type the following command after installing npm.

text

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 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.

License

PDFKit is available under the MIT license.

File: README.md Copy Chapter

Lost? Copy Chapter

How to install Copy Chapter

How it works Copy Chapter

`Web.` Render in DOM Copy Section

`Node.` Save in a file Copy Section

Contributors Copy Chapter

Sponsors Copy Chapter

Backers Copy Chapter

License Copy Chapter

File: packages/types/README.md Copy Chapter

@react-pdf/types

How to install Copy Chapter

License Copy Chapter

File: packages/textkit/README.md Copy Chapter

@react-pdf/textkit

Acknowledges Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

Layout Process Copy Chapter

Engines Copy Chapter

bidi Copy Section

linebreaker Copy Section

justification Copy Section

fontSubstitution Copy Section

scriptItemizer Copy Section

wordHyphenation Copy Section

textDecoration Copy Section

API Reference Copy Chapter

layoutEngine(engines) Copy Section

fromFragments(fragments) Copy Section

Types Copy Chapter

AttributedString Copy Section

Run Copy Section

Attributes Copy Section

Container Copy Section

Rect Copy Section

Fragment Copy Section

LayoutOptions Copy Section

Engines Copy Section

License Copy Chapter

File: packages/stylesheet/README.md Copy Chapter

@react-pdf/stylesheet

Installation Copy Chapter

Usage Copy Chapter

Features Copy Chapter

Style Flattening Copy Section

Media Queries Copy Section

Unit Conversion Copy Section

Color Transformation Copy Section

Shorthand Expansion Copy Section

Margin & Padding

Border

Flex

Gap

Object Position

Transform Origin

Transform Parsing Copy Section

Font Weight Resolution Copy Section

API Reference Copy Chapter

Default Export Copy Section

`stylesheet(container, style)`

Named Exports Copy Section

`flatten(styles)`

`transformColor(value)`

Types Copy Chapter

Container Copy Section

Style Copy Section

SafeStyle Copy Section

Transform Copy Section

FontWeight Copy Section

License Copy Chapter

File: packages/renderer/README.md Copy Chapter

How to install Copy Chapter

How it works Copy Chapter

`Web.` Render in DOM Copy Section

`Node.` Save in a file Copy Section

Contributors Copy Chapter

Sponsors Copy Chapter

Backers Copy Chapter

File: README.md

Lost?

How to install

How it works

`Web.` Render in DOM

`Node.` Save in a file

Contributors

Sponsors

Backers

License

File: packages/types/README.md

How to install

License

File: packages/textkit/README.md

Acknowledges

Installation

Usage

Layout Process

Engines

bidi

linebreaker

justification

fontSubstitution

scriptItemizer

wordHyphenation

textDecoration

API Reference

layoutEngine(engines)

fromFragments(fragments)

Types

AttributedString

Run

Attributes

Container

Rect

Fragment

LayoutOptions

Engines

License

File: packages/stylesheet/README.md

Installation

Usage

Features

Style Flattening

Media Queries

Unit Conversion

Color Transformation

Shorthand Expansion

Transform Parsing

Font Weight Resolution

API Reference

Default Export

Named Exports

Types

Container

Style

SafeStyle

Transform

FontWeight

License

File: packages/renderer/README.md

How to install

How it works

`Web.` Render in DOM

`Node.` Save in a file

Contributors

Sponsors

Backers

License

File: packages/render/README.md

How to install

How it works

Node structure

node.type

node.box

node.style

node.props

PDF example

License

File: packages/reconciler/README.md