Component Reference
Document
Root component representing the PDF document.
| Prop |
Type |
Default |
Description |
title |
string |
- |
Document title metadata |
author |
string |
- |
Document author metadata |
subject |
string |
- |
Document subject metadata |
keywords |
string |
- |
Document keywords metadata |
creator |
string |
- |
Application that created the document |
producer |
string |
- |
PDF producer |
pdfVersion |
string |
"1.3" |
PDF version |
language |
string |
- |
Default document language |
pageMode |
string |
- |
Display mode: useNone, useOutlines, useThumbs, fullScreen, useOC, useAttachments |
pageLayout |
string |
- |
Page layout: singlePage, oneColumn, twoColumnLeft, twoColumnRight, twoPageLeft, twoPageRight |
onRender |
function |
- |
Callback after rendering with { blob } |
Page
Represents a single page in the document.
| Prop |
Type |
Default |
Description |
size |
string/array/object |
"A4" |
Page size (A4, Letter, Legal, etc.) or [width, height] or {width, height} |
orientation |
string |
"portrait" |
Page orientation: portrait, landscape |
wrap |
boolean |
true |
Enable automatic page wrapping |
style |
object/array |
- |
Page styling |
debug |
boolean |
false |
Show bounding box |
dpi |
number |
72 |
Custom DPI setting |
id |
string |
- |
Destination ID for internal links |
View
Container component for layout, similar to div.
| Prop |
Type |
Default |
Description |
wrap |
boolean |
true |
Enable page wrapping |
style |
object/array |
- |
View styling |
render |
function |
- |
Dynamic content: ({ pageNumber, totalPages, subPageNumber, subPageTotalPages }) => content |
debug |
boolean |
false |
Show bounding box |
fixed |
boolean |
false |
Render on all wrapped pages |
break |
boolean |
false |
Force page break before this element |
minPresenceAhead |
number |
- |
Minimum space ahead before breaking |
id |
string |
- |
Destination ID for internal links |
Text
Displays text content.
| Prop |
Type |
Default |
Description |
wrap |
boolean |
true |
Enable page wrapping |
style |
object/array |
- |
Text styling |
render |
function |
- |
Dynamic content function |
debug |
boolean |
false |
Show bounding box |
fixed |
boolean |
false |
Render on all wrapped pages |
hyphenationCallback |
function |
- |
Custom hyphenation |
orphans |
number |
- |
Minimum lines at bottom of page |
widows |
number |
- |
Minimum lines at top of page |
id |
string |
- |
Destination ID |
Link
Creates hyperlinks.
| Prop |
Type |
Default |
Description |
src |
string |
- |
URL or internal destination (prefix with #) |
wrap |
boolean |
true |
Enable page wrapping |
style |
object/array |
- |
Link styling |
debug |
boolean |
false |
Show bounding box |
Image
Displays images.
| Prop |
Type |
Default |
Description |
src / source |
string/object/function |
- |
Image source: URL, file path, Buffer, or async function |
style |
object/array |
- |
Image styling |
debug |
boolean |
false |
Show bounding box |
cache |
boolean |
true |
Enable image caching |
Note
Adds annotation notes.
| Prop |
Type |
Default |
Description |
children |
string |
- |
Note text content |
style |
object/array |
- |
Note styling |
Canvas
Freeform drawing component.
| Prop |
Type |
Default |
Description |
paint |
function |
- |
Painter function: (painter, width, height) => void |
style |
object/array |
- |
Canvas styling |
debug |
boolean |
false |
Show bounding box |
Svg
SVG container component.
| Prop |
Type |
Default |
Description |
width |
string/number |
- |
SVG width |
height |
string/number |
- |
SVG height |
viewBox |
string |
- |
SVG viewBox |
preserveAspectRatio |
string |
- |
Aspect ratio handling |
style |
object/array |
- |
SVG styling |
SVG Shape Elements
| Element |
Key Props |
Line |
x1, y1, x2, y2, stroke, strokeWidth |
Rect |
x, y, width, height, rx, ry, fill, stroke |
Circle |
cx, cy, r, fill, stroke |
Ellipse |
cx, cy, rx, ry, fill, stroke |
Polygon |
points, fill, stroke |
Polyline |
points, fill, stroke |
Path |
d, fill, stroke |
Text |
x, y, fill, textAnchor |
Tspan |
x, y, dx, dy |
G |
transform (group container) |
Defs |
(definitions container) |
ClipPath |
id (clipping path) |
LinearGradient |
id, x1, y1, x2, y2 |
RadialGradient |
id, cx, cy, r, fx, fy |
Stop |
offset, stopColor, stopOpacity |
SVG Presentation Attributes
color, dominantBaseline, fill, fillOpacity, fillRule, opacity, stroke, strokeWidth,
strokeOpacity, strokeLinecap, strokeLinejoin, strokeDasharray, transform, textAnchor,
visibility
Supported CSS Properties
Flexbox
alignContent, alignItems, alignSelf, flex, flexDirection, flexWrap, flexFlow,
flexGrow, flexShrink, flexBasis, justifyContent, gap, rowGap, columnGap
Layout
bottom, display, left, position, right, top, overflow, zIndex
Dimensions
height, maxHeight, maxWidth, minHeight, minWidth, width
Color
backgroundColor, color, opacity
Text
fontSize, fontFamily, fontStyle, fontWeight, letterSpacing, lineHeight, maxLines,
textAlign, textDecoration, textDecorationColor, textDecorationStyle, textIndent,
textOverflow, textTransform
Margins
margin, marginTop, marginRight, marginBottom, marginLeft, marginHorizontal,
marginVertical
Padding
padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingHorizontal,
paddingVertical
Borders
border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor,
borderRightColor, borderBottomColor, borderLeftColor, borderStyle, borderTopStyle,
borderRightStyle, borderBottomStyle, borderLeftStyle, borderWidth, borderTopWidth,
borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadius, borderTopLeftRadius,
borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius
Transformations
rotate, scale, scaleX, scaleY, translate, translateX, translateY, skew, skewX,
skewY, matrix, transformOrigin
Object Fit
objectFit, objectPosition
1---2name: 2586-components-23eca15d3description: Component Reference4---5# Component Reference67## Document89Root component representing the PDF document.1011| Prop | Type | Default | Description |12| ------------ | -------- | ------- | -------------------------------------------------------------------------------------------- |13| `title` | string | - | Document title metadata |14| `author` | string | - | Document author metadata |15| `subject` | string | - | Document subject metadata |16| `keywords` | string | - | Document keywords metadata |17| `creator` | string | - | Application that created the document |18| `producer` | string | - | PDF producer |19| `pdfVersion` | string | "1.3" | PDF version |20| `language` | string | - | Default document language |21| `pageMode` | string | - | Display mode: useNone, useOutlines, useThumbs, fullScreen, useOC, useAttachments |22| `pageLayout` | string | - | Page layout: singlePage, oneColumn, twoColumnLeft, twoColumnRight, twoPageLeft, twoPageRight |23| `onRender` | function | - | Callback after rendering with `{ blob }` |2425## Page2627Represents a single page in the document.2829| Prop | Type | Default | Description |30| ------------- | ------------------- | ---------- | ------------------------------------------------------------------------- |31| `size` | string/array/object | "A4" | Page size (A4, Letter, Legal, etc.) or [width, height] or {width, height} |32| `orientation` | string | "portrait" | Page orientation: portrait, landscape |33| `wrap` | boolean | true | Enable automatic page wrapping |34| `style` | object/array | - | Page styling |35| `debug` | boolean | false | Show bounding box |36| `dpi` | number | 72 | Custom DPI setting |37| `id` | string | - | Destination ID for internal links |3839## View4041Container component for layout, similar to div.4243| Prop | Type | Default | Description |44| ------------------ | ------------ | ------- | -------------------------------------------------------------------------------------------- |45| `wrap` | boolean | true | Enable page wrapping |46| `style` | object/array | - | View styling |47| `render` | function | - | Dynamic content: `({ pageNumber, totalPages, subPageNumber, subPageTotalPages }) => content` |48| `debug` | boolean | false | Show bounding box |49| `fixed` | boolean | false | Render on all wrapped pages |50| `break` | boolean | false | Force page break before this element |51| `minPresenceAhead` | number | - | Minimum space ahead before breaking |52| `id` | string | - | Destination ID for internal links |5354## Text5556Displays text content.5758| Prop | Type | Default | Description |59| --------------------- | ------------ | ------- | ------------------------------- |60| `wrap` | boolean | true | Enable page wrapping |61| `style` | object/array | - | Text styling |62| `render` | function | - | Dynamic content function |63| `debug` | boolean | false | Show bounding box |64| `fixed` | boolean | false | Render on all wrapped pages |65| `hyphenationCallback` | function | - | Custom hyphenation |66| `orphans` | number | - | Minimum lines at bottom of page |67| `widows` | number | - | Minimum lines at top of page |68| `id` | string | - | Destination ID |6970## Link7172Creates hyperlinks.7374| Prop | Type | Default | Description |75| ------- | ------------ | ------- | ------------------------------------------- |76| `src` | string | - | URL or internal destination (prefix with #) |77| `wrap` | boolean | true | Enable page wrapping |78| `style` | object/array | - | Link styling |79| `debug` | boolean | false | Show bounding box |8081## Image8283Displays images.8485| Prop | Type | Default | Description |86| ---------------- | ---------------------- | ------- | ------------------------------------------------------- |87| `src` / `source` | string/object/function | - | Image source: URL, file path, Buffer, or async function |88| `style` | object/array | - | Image styling |89| `debug` | boolean | false | Show bounding box |90| `cache` | boolean | true | Enable image caching |9192## Note9394Adds annotation notes.9596| Prop | Type | Default | Description |97| ---------- | ------------ | ------- | ----------------- |98| `children` | string | - | Note text content |99| `style` | object/array | - | Note styling |100101## Canvas102103Freeform drawing component.104105| Prop | Type | Default | Description |106| ------- | ------------ | ------- | ---------------------------------------------------- |107| `paint` | function | - | Painter function: `(painter, width, height) => void` |108| `style` | object/array | - | Canvas styling |109| `debug` | boolean | false | Show bounding box |110111## Svg112113SVG container component.114115| Prop | Type | Default | Description |116| --------------------- | ------------- | ------- | --------------------- |117| `width` | string/number | - | SVG width |118| `height` | string/number | - | SVG height |119| `viewBox` | string | - | SVG viewBox |120| `preserveAspectRatio` | string | - | Aspect ratio handling |121| `style` | object/array | - | SVG styling |122123### SVG Shape Elements124125| Element | Key Props |126| ---------------- | ----------------------------------------- |127| `Line` | x1, y1, x2, y2, stroke, strokeWidth |128| `Rect` | x, y, width, height, rx, ry, fill, stroke |129| `Circle` | cx, cy, r, fill, stroke |130| `Ellipse` | cx, cy, rx, ry, fill, stroke |131| `Polygon` | points, fill, stroke |132| `Polyline` | points, fill, stroke |133| `Path` | d, fill, stroke |134| `Text` | x, y, fill, textAnchor |135| `Tspan` | x, y, dx, dy |136| `G` | transform (group container) |137| `Defs` | (definitions container) |138| `ClipPath` | id (clipping path) |139| `LinearGradient` | id, x1, y1, x2, y2 |140| `RadialGradient` | id, cx, cy, r, fx, fy |141| `Stop` | offset, stopColor, stopOpacity |142143### SVG Presentation Attributes144145`color`, `dominantBaseline`, `fill`, `fillOpacity`, `fillRule`, `opacity`, `stroke`, `strokeWidth`,146`strokeOpacity`, `strokeLinecap`, `strokeLinejoin`, `strokeDasharray`, `transform`, `textAnchor`,147`visibility`148149## Supported CSS Properties150151### Flexbox152153`alignContent`, `alignItems`, `alignSelf`, `flex`, `flexDirection`, `flexWrap`, `flexFlow`,154`flexGrow`, `flexShrink`, `flexBasis`, `justifyContent`, `gap`, `rowGap`, `columnGap`155156### Layout157158`bottom`, `display`, `left`, `position`, `right`, `top`, `overflow`, `zIndex`159160### Dimensions161162`height`, `maxHeight`, `maxWidth`, `minHeight`, `minWidth`, `width`163164### Color165166`backgroundColor`, `color`, `opacity`167168### Text169170`fontSize`, `fontFamily`, `fontStyle`, `fontWeight`, `letterSpacing`, `lineHeight`, `maxLines`,171`textAlign`, `textDecoration`, `textDecorationColor`, `textDecorationStyle`, `textIndent`,172`textOverflow`, `textTransform`173174### Margins175176`margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginHorizontal`,177`marginVertical`178179### Padding180181`padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingHorizontal`,182`paddingVertical`183184### Borders185186`border`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderColor`, `borderTopColor`,187`borderRightColor`, `borderBottomColor`, `borderLeftColor`, `borderStyle`, `borderTopStyle`,188`borderRightStyle`, `borderBottomStyle`, `borderLeftStyle`, `borderWidth`, `borderTopWidth`,189`borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, `borderRadius`, `borderTopLeftRadius`,190`borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius`191192### Transformations193194`rotate`, `scale`, `scaleX`, `scaleY`, `translate`, `translateX`, `translateY`, `skew`, `skewX`,195`skewY`, `matrix`, `transformOrigin`196197### Object Fit198199`objectFit`, `objectPosition`
tools-only