PDF generation with JSX. Page breaks that actually work.

Forme dev server

Every PDF tool makes you choose: fight with CSS page breaks or use an editor that can't handle dynamic data. Forme is a layout engine built for pages. No headless browser. No Chrome. Renders in milliseconds. Runs anywhere — Node, the browser, or at the edge.

Try it in the playground

npm install @formepdf/cli @formepdf/react @formepdf/core

import { Document, Page, View, Text } from '@formepdf/react';
import { renderDocument } from '@formepdf/core';
const pdf = await renderDocument(
 <Document>
 <Page size="Letter" margin={36}>
 <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Invoice #2024-001</Text>
 <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 24 }}>
 <Text>Widget Pro</Text>
 <Text>49ドル.00</Text>
 </View>
 </Page>
 </Document>
);
// pdf is a Uint8Array: save it, serve it, email it

npx forme dev invoice.tsx --data sample.json

Live preview with debug overlays. Click any element to inspect its computed styles.

Install Forme PDF Preview from the VS Code Marketplace.

• Live PDF preview in a webview panel
• Component tree in the sidebar with hover-to-highlight
• Inspector panel with box model, computed styles, and source navigation
• Click any element on the canvas to select it in the tree and inspector

• Page-native layout: Content flows into pages, not onto an infinite canvas. Page breaks happen at the right place, every time.
• React components: Document, Page, View, Text, Image, Table. If you know React, you know Forme.
• Live preview: forme dev shows your PDF updating in real time as you edit.
• Click-to-inspect: Select any element in the browser or VS Code to see its box model, computed styles, and position.
• Debug overlays: Toggle bounding boxes, margins, and page break points.
• Fast: Rust engine compiled to WASM. Renders in milliseconds, not seconds.
• OpenType shaping: Real GSUB/GPOS shaping via rustybuzz. Ligatures (fi, ffi), kerning (AV), and contextual forms render correctly with custom fonts.
• Optimal line breaking: Knuth-Plass algorithm (the same one TeX uses) considers the entire paragraph to minimize awkward spacing. Falls back to greedy when needed.
• Hyphenation: Automatic hyphenation in 35+ languages. Set hyphens: 'auto' and a lang tag. Uses the hypher crate with language-specific dictionaries.
• BiDi text: Right-to-left text (Arabic, Hebrew) with automatic direction detection. Mixed LTR/RTL paragraphs reorder correctly. Set direction: 'rtl' or direction: 'auto'.
• CSS Grid: 2D grid layout with display: 'grid'. Fixed, fractional (fr), and auto track sizing. Explicit placement, auto-placement, column/row spanning, and row-level page breaks.
• Flex wrap + align-content: Flex containers wrap across pages correctly. align-content distributes wrapped lines (center, space-between, space-around, space-evenly, flex-end, stretch).
• Widow/orphan control: Text paragraphs never leave a single orphan line at the bottom of a page or a single widow line at the top. Configurable via minWidowLines and minOrphanLines.
• Table overflow: Table cells with content taller than a page are preserved across page breaks, not silently clipped.
• Absolute positioning: position: 'absolute' with top, right, bottom, left relative to the parent View.
• Column flex: justifyContent and alignItems work in both row and column directions.
• SVG: Inline SVG rendering with support for rect, circle, ellipse, line, polyline, polygon, and path elements. Supports opacity, fill-opacity, and stroke-opacity. Pass SVG as a content string or as JSX children.
• QR codes: Built-in <QrCode> component. Vector-based, crisp at any zoom level.
• Barcodes: Built-in <Barcode> component. Code 128, Code 39, EAN-13, EAN-8, Codabar. Vector-based.
• Text overflow: textOverflow: 'ellipsis' truncates single-line text with "..." when it exceeds available width. Also supports 'clip'.
• Builtin Unicode support: Noto Sans is bundled - Cyrillic, Greek, and other non-Latin scripts work out of the box without registering fonts.
• Font fallback chains: fontFamily: "Inter, Helvetica" tries each font in order, falling back automatically.
• Custom fonts: TrueType font embedding with automatic subsetting.
• Links: Add href to any <Text>, <View>, <Image>, or <Svg> for clickable PDF links.
• Bookmarks: Add bookmark to any element for PDF outline entries. Navigate long documents from the bookmark panel.
• Inline text styling: Nest <Text> inside <Text> to bold a word, change colors mid-sentence, or apply strikethrough.
• Images: JPEG, PNG, and WebP with transparency support. alt text for accessibility.
• CSS shorthands: border: "1px solid #000", padding: "8 16", margin: [20, 40] — CSS-style shorthand strings and arrays parse automatically.
• Visual style properties: opacity cascades to children, wordSpacing, boxShadow, ubiquitous borderRadius (rounded clipping when overflow: hidden), and background accepting CSS gradient strings — linear-gradient(135deg, #667eea, #764ba2), radial-gradient(circle, #10b981, #059669). Multi-stop gradients supported.
• Page backgrounds: <Page backgroundImage="..." backgroundSize="cover" backgroundOpacity={0.08} /> for watermark-style overlays. Sizes: fill / cover / contain.
• Document language: <Document lang="en-US"> sets the PDF /Lang tag for accessibility.
• Dynamic page numbers: {{pageNumber}} and {{totalPages}} in any text element.
• Embedded data: Attach structured JSON to any PDF. Recipients can extract the original data programmatically — invoices carry their line items, reports carry their datasets.
• Browser rendering: Import @formepdf/core/browser to generate PDFs entirely client-side. Same engine, same templates — no server required.
• Tailwind CSS: tw("p-4 text-lg font-bold bg-blue-500") converts Tailwind classes to Forme style objects. Full color palette, grid, arbitrary values, negative values, fractions.
• Fillable forms: AcroForm components — <TextField>, <Checkbox>, <Dropdown>, <RadioButton>. Fill and flatten for non-editable delivery.
• PDF/UA accessibility: <Document pdfUa> generates PDF/UA-1 compliant documents with structure tree, tab order, role map, and artifact tagging.
• PDF/A archival: <Document pdfa="2b"> for long-term preservation. Supports PDF/A-2b and PDF/A-2a.
• Digital certification: PKCS#7 certification with X.509 certificates via the certification prop or /v1/certify API endpoint.
• PDF redaction: True content removal with metadata scrubbing. Text-search, regex, presets, and saved templates.
• PDF merging: Combine 2-20 PDFs into one via /v1/merge.
• PDF rasterization: Convert pages to PNG images via /v1/rasterize, powered by PDFium.

Generate PDFs in the browser with zero server dependencies:

import { renderDocument } from '@formepdf/core/browser';
import { Document, Page, Text } from '@formepdf/react';
const pdfBytes = await renderDocument(
 <Document>
 <Page size="Letter" margin={36}>
 <Text style={{ fontSize: 24 }}>Generated in the browser</Text>
 </Page>
 </Document>
);
// Download, display in an iframe, or upload
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
window.open(url);

Works with Vite, Next.js, Remix, or any bundler that handles WASM. The only difference from server-side usage is the import path.

Register TrueType fonts globally or per-document:

import { Font, Document, Text } from '@formepdf/react';
import { renderDocument } from '@formepdf/core';
// Global registration (works like react-pdf)
Font.register({
 family: 'Inter',
 src: './fonts/Inter-Regular.ttf',
});
Font.register({
 family: 'Inter',
 src: './fonts/Inter-Bold.ttf',
 fontWeight: 'bold',
});
const pdf = await renderDocument(
 <Document>
 <Text style={{ fontFamily: 'Inter', fontSize: 16 }}>
 Regular text
 </Text>
 <Text style={{ fontFamily: 'Inter', fontSize: 16, fontWeight: 'bold' }}>
 Bold text
 </Text>
 </Document>
);

Or pass fonts directly on the Document:

<Document fonts={[
 { family: 'Roboto', src: './fonts/Roboto-Regular.ttf' },
 { family: 'Roboto', src: './fonts/Roboto-Italic.ttf', fontStyle: 'italic' },
]}>

Font sources can be file paths, data URIs, or Uint8Array. Fonts are automatically subsetted — only glyphs used in the document are embedded.

See the templates/ directory for production-ready examples:

• Invoice
• Product Catalog
• Receipt
• Report
• Shipping Label
• Typography
• Grid Dashboard
• Charts Showcase
• Event Ticket

Style Forme components with Tailwind utility classes via @formepdf/tailwind:

npm install @formepdf/tailwind

import { tw } from '@formepdf/tailwind';
<View style={tw("flex-row items-center gap-4 p-6 bg-slate-100 rounded-lg")}>
 <Text style={tw("text-2xl font-bold text-slate-900")}>Invoice</Text>
 <Text style={tw("text-sm text-slate-500")}>Draft</Text>
</View>

Supports spacing, typography, colors (full Tailwind palette), flexbox, grid, borders, opacity, arbitrary values (w-[200], bg-[#f00]), negative values (-mt-4), fraction widths (w-1/2), and self-* alignment.

Full docs at docs.formepdf.com:

• Forms — fillable AcroForm components
• Accessibility — PDF/UA-1 compliance
• Archival — PDF/A compliance
• Digital Certification — PKCS#7 certification

Issues and PRs welcome.

MIT