`. Defaults to column layout. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `style` | `Style` | - | CSS-like style properties | | `wrap` | `boolean` | `true` | Whether this container can break across pages. Set to `false` to keep all children on the same page. | | `href` | `string` | - | URL to link to. Makes the entire View a clickable link in the PDF. | | `bookmark` | `string` | - | Adds a PDF outline (bookmark) entry with this label. Readers can jump to this View from the bookmark panel. | ### Example ```tsx theme={null} {/* Row layout with gap */} Left Right {/* Card that stays on one page */} Important Card This content will not split across pages. {/* Absolute positioning */} Card content SALE ``` Views use flexbox column layout by default. All flex properties (`flexDirection`, `justifyContent`, `alignItems`, `flexWrap`, `gap`, `flexGrow`, `flexShrink`) are supported. Set `position: 'absolute'` to position a View relative to its **nearest positioned ancestor** — an element with `position: 'relative'` or `'absolute'` — or the page content box if there is none. Give the intended container `position: 'relative'` (as the card above does), or the absolute box will resolve against the page. *** ## Text Renders text content with font properties, colors, and alignment. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `style` | `Style` | - | Typography and color styles | | `children` | `string \| number \| Text` | - | Text content. Nest `` inside `` for inline styling (bold a word, change colors mid-sentence). | | `href` | `string` | - | URL to link to. Makes this text a clickable link in the PDF. | | `bookmark` | `string` | - | Adds a PDF outline (bookmark) entry with this label. | ### Example ```tsx theme={null} {/* Heading */} Invoice #2024-001 {/* Body text with line height */} Payment is due within 30 days of the invoice date. Late payments are subject to a 1.5% monthly finance charge. {/* Clickable link */} Visit our website {/* Bookmark (appears in PDF outline panel) */} Chapter 1: Introduction {/* Inline styling with nested Text */} This sentence has a bold word and a{' '} red word in the middle. {/* Strikethrough pricing */} $42.00 $56.00 {/* Dynamic page numbers */} Page {'{{pageNumber}}'} of {'{{totalPages}}'} ``` Text wraps automatically based on the available width. Use `{{pageNumber}}` and `{{totalPages}}` placeholders for dynamic page numbering. Nested `` elements share the same line and can have different styles, which is useful for inline formatting like bold words, colored spans, or strikethrough pricing. *** ## Image Embeds a JPEG or PNG image. Aspect ratio is preserved when only one dimension is specified. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `src` | `string` | (required) | Image source: base64 data URI (`data:image/png;base64,...`) or file path | | `width` | `number` | - | Display width in points | | `height` | `number` | - | Display height in points | | `style` | `Style` | - | Additional style properties (margin, etc.) | ### Example ```tsx theme={null} {/* From file path */}

{/* From data URI with both dimensions */}

{/* With margin */}

``` If only `width` is provided, height is calculated from the image's aspect ratio (and vice versa). Both JPEG and PNG formats are supported, including PNG transparency. *** ## Table Table container with column definitions. Children should be `` elements. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `columns` | `ColumnDef[]` | - | Column width definitions | | `style` | `Style` | - | Style properties for the table container | ### Column width types | Type | Example | Description | | - | - | - | | `{ fraction: number }` | `{ fraction: 0.5 }` | Proportional width (0.5 = 50% of table width) | | `{ fixed: number }` | `{ fixed: 100 }` | Fixed width in points | | `"auto"` | `"auto"` | Size to content | ### Example ```tsx theme={null} Item Qty Price Total Widget 5 $10.00 $50.00

``` Tables automatically break across pages between rows. Header rows (marked with `header`) are repeated at the top of each continuation page. *** ## Row A table row. Must be a direct child of ``. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `header` | `boolean` | `false` | Whether this is a header row. Header rows repeat on every page when a table spans multiple pages. | | `style` | `Style` | - | Style properties (e.g., `backgroundColor` for alternating rows) | ### Example ```tsx theme={null} {/* Header row that repeats on page breaks */} Name Value {/* Alternating row colors */} Row 1 Value 1 Row 2 Value 2 ``` *** ## Cell A table cell inside a ``. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `colSpan` | `number` | `1` | Number of columns this cell spans | | `rowSpan` | `number` | `1` | Number of rows this cell spans | | `style` | `Style` | - | Style properties (padding, background, etc.) | ### Example ```tsx theme={null} {/* Standard cell */} Cell content {/* Spanning two columns */} This spans two columns ``` Cells can contain any Forme element, not just Text. *** ## Svg Renders inline SVG graphics. Supports basic SVG elements: `rect`, `circle`, `ellipse`, `line`, `polyline`, `polygon`, and `path`. Elements support `opacity`, `fill-opacity`, and `stroke-opacity` attributes with proper inheritance through `` groups. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `width` | `number` | (required) | Display width in points | | `height` | `number` | (required) | Display height in points | | `viewBox` | `string` | - | SVG viewBox attribute (e.g., `"0 0 100 100"`) | | `content` | `string` | - | SVG markup string containing the elements to render | | `children` | `ReactNode` | - | JSX children as an alternative to `content` | | `style` | `Style` | - | Additional style properties (margin, etc.) | Provide either `content` (a raw SVG string) or JSX `children` — not both. If both are provided, `content` takes priority. ### Example — content string ```tsx theme={null} {/* Simple shapes */} {/* Circle with stroke */} {/* Path element */} ``` ### Example — JSX children ```tsx theme={null} {/* Same shapes using JSX syntax */} {/* Grouped elements with inherited opacity */} ``` JSX children are serialized to SVG XML automatically. CamelCase props like `strokeWidth` are converted to their kebab-case SVG equivalents (`stroke-width`). SVG content is rendered directly into the PDF using native PDF drawing operations, not rasterized. This produces crisp vector output at any zoom level. *** ## QrCode Renders a QR code from a data string. Output is vector-based (not a raster image), so it stays crisp at any zoom level. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `data` | `string` | (required) | The data to encode (URL, text, etc.) | | `size` | `number` | - | Display size in points. QR codes are always square. Defaults to the available width. | | `color` | `string` | `"#000000"` | Color of the dark modules | | `style` | `Style` | - | Additional style properties (margin, etc.) | ### Example ```tsx theme={null} {/* QR code linking to a URL */} {/* QR code with custom color */} {/* QR code with margin */} ``` QR codes are rendered as filled rectangles in the PDF — one rectangle per dark module. This is a native vector representation, not an embedded image, which keeps file sizes small and output sharp. *** ## Barcode Renders a 1D barcode from a data string. Output is vector-based (filled rectangles), crisp at any zoom level. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `data` | `string` | (required) | The data to encode | | `format` | `"Code128"` \| `"Code39"` \| `"EAN13"` \| `"EAN8"` \| `"Codabar"` | `"Code128"` | Barcode format | | `width` | `number` | - | Display width in points. Defaults to available width. | | `height` | `number` | `60` | Bar height in points | | `color` | `string` | `"#000000"` | Color of the bars | | `style` | `Style` | - | Additional style properties (margin, etc.) | ### Example ```tsx theme={null} {/* Code 128 barcode (default format) */} {/* EAN-13 barcode */} {/* Code 39 with custom color */} ``` Barcodes are rendered as filled rectangles in the PDF — one rectangle per dark bar. Supported formats: Code 128 (general purpose), Code 39 (alphanumeric), EAN-13 (retail products), EAN-8 (small packages), and Codabar (libraries, blood banks). *** ## Fixed An element that repeats on every page as a header or footer. Reduces the available content area on each page. ### Props | Prop | Type | Default | Description | | - | - | - | - | | `position` | `"header"` \| `"footer"` | (required) | Whether to place at the top or bottom of each page | | `style` | `Style` | - | Style properties | ### Example ```tsx theme={null} Acme Corp Confidential Page {'{{pageNumber}}'} of {'{{totalPages}}'} {/* Page content goes here */} This content area is reduced by the header and footer heights. ``` Use `{{pageNumber}}` and `{{totalPages}}` placeholders inside Fixed elements for automatic page numbering. *** ## PageBreak Forces content after this element to start on a new page. ### Props None. ### Example ```tsx theme={null} This is on page 1. This is on page 2. ``` PageBreak is useful for separating document sections (e.g., cover page from content, or chapters from each other). *** ## Canvas Renders arbitrary vector graphics via a `draw` callback. The callback receives a recording context with a Canvas-like API. All drawing commands are serialized and rendered as native PDF vector operations. ### Props | Prop | Type | Description | | - | - | - | | `width` | `number` | Canvas width in points. | | `height` | `number` | Canvas height in points. | | `draw` | `(ctx: CanvasContext) => void` | Drawing callback. | ### CanvasContext methods `moveTo(x, y)`, `lineTo(x, y)`, `line(x1, y1, x2, y2)`, `bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`, `quadraticCurveTo(cpx, cpy, x, y)`, `arc(cx, cy, r, startAngle, endAngle, counterclockwise?)`, `circle(cx, cy, r)`, `rect(x, y, w, h)`, `ellipse(cx, cy, rx, ry)`, `closePath()`, `stroke()`, `fill()`, `setFillColor(r, g, b)`, `setStrokeColor(r, g, b)`, `setLineWidth(w)`, `setLineCap(cap)`, `setLineJoin(join)`, `save()`, `restore()`. `line(x1, y1, x2, y2)` is a convenience that emits `moveTo` + `lineTo` + `stroke` in one call. Colors use 0-255 RGB values (like HTML Canvas). Content is clipped to the canvas bounds (matching HTML Canvas behavior). ### Example ```tsx theme={null}