DOCSEARCHbyAlgolia
Submit Docs

Forme PDF Rendering Engine

repository·main·Indexed 40 days ago

https://github.com/danmolitor/forme

A high-performance, page-native PDF rendering engine written in Rust and compiled to WASM. Forme allows developers to render paginated PDFs using HTML/CSS or frameworks like React, Svelte, Vue, and Preact without a headless browser. Available as the forme-pdf crate (v0.25.0), it focuses on layout into pages rather than an infinite canvas.

Tokens
253.9K
Snippets
725
Records
1K
Agent score
51%

What's inside Forme

  1. Overview of the invoice-detailed template

    main

    The invoice-detailed template is a three-page progress-billing invoice designed for complex financial reporting. It features grouped line-item sections, section subtotals, and a carried-forward/brought-forward mechanism at the page 2/3 boundary. It also includes a stack for retainage and tax totals.

    Important Implementation Note: When modifying this template, you must update the sections and their sums in a specific order to maintain mathematical integrity. The summary table, carried-forward figures, and totals must remain reconciled. The data chain is managed via data.json.

  2. Overview of the payslip template

    main

    The payslip template generates a semi-monthly statement of earnings. It features side-by-side tables for earnings and deductions, leave balances, and a net-pay stack including a deposit note. The template is marked as confidential in the masthead sub-line.

    Data Requirements

    When providing data for this template, ensure the following arithmetic logic is maintained:

    • Gross Pay - Total Deductions = Net Pay
    • SS (Social Security): 6.2% of gross
    • Medicare: 1.45% of gross

    Note: The data.json file typically carries this arithmetic logic.

    Technical Features Used

    This template demonstrates several advanced engine features:

    • @page margin boxes with page counters
    • Ratio split columns using explicit widths
    • gsub summary rows
    • border-collapse tables

  3. Overview of the Northmoor Document System

    main

    The Northmoor document system is a collection of thirty print-first business document templates designed for Northmoor Industrial Group, Inc. The system is intended to be implemented as a document/template engine (server- or client-rendered) that handles complex pagination, printing, and PDF export.

    Key characteristics include:

    • Pagination as a first-class feature: Supports running headers on continuation pages, page counters (e.g., Page 2 of 3), repeating table headers, and carried-forward subtotal rows.
    • High Fidelity: Requires exact recreation of colors, type scales, rule weights, and margins.
    • Data-Driven: Documents should be modeled as templates + a data contract (parties, line items, totals, etc.) rather than hand-authored pages.
    • Grayscale Compliance: Every document must remain legible and meaningful when printed in black-and-white. Color must not carry information alone; critical data must also be emphasized via weight or captioning.

  4. Overview of the offer-letter template

    main

    The offer-letter template generates a one-page employment offer. It features letter prose surrounding a two-column particulars table, an HR signatory, and an acceptance signature pair.

    Key Design Constraints:

    • The acceptance signature pair uses unique captions (no repeating words between the two).
    • The page counter is designed to read Page 1 of 1.
    • Data Consistency: When customizing the candidate, position, or particulars, you must ensure that the reference, start date, and salary (e.g., 96,000.00) remain consistent across the employment-contract and policy-acknowledgement templates. These templates are linked via data.json.

    Engine Features Used:

    • @page margin boxes
    • Page counters
    • Fixed-height page fill
    • Particulars table with th scope
    • Flex signature pair

  5. Overview of the invoice-standard template

    main

    The invoice-standard template is a one-page standard invoice designed for the Northmoor document system. It features a masthead, a four-column meta grid, an itemized table, a totals stack, and an accent amount-due block.

    Customization Workflow

    To customize the invoice, you should modify the data in index.html. Note that data.json mirrors every field in the HTML, so ensure changes are reflected in both if you are using data-driven workflows.

    Layout and Page Sizing

    • Footer Behavior: The footer is automatically pushed to the bottom of the page using a fixed-height flex column sized to the Letter paper content box.
    • Switching to A4: To convert the template from Letter to A4, you must:
      1. Change the @page { size: ... } property.
      2. Update the .pagefill height property.

    Technical Features Used

    This template demonstrates several engine capabilities:

    • @page margin boxes with counter(page) and counter(pages).
    • border-collapse tables.
    • Flexbox with flex: 1 columns.
    • Absolute positioning for full-bleed head rules.

  6. Overview of the expense-report template

    main

    The expense-report template is a complex document example designed to demonstrate advanced engine features. It includes an itemized claim table, a category summary, and a settlement stack that nets company-card charges against the claim.

    Key features demonstrated in this template include:

    • @page margin boxes: Used for displaying page counters.
    • Complex Tables: A six-column claim table utilizing split columns via explicit widths.
    • Layout Patterns: A three-slot signature row.
    • Business Logic: Automatic recomputation of category totals and settlement values (e.g., ensuring totals reach a specific net value like 1,089.79).

  7. Structure and design of the service-agreement template

    main

    The service-agreement template is a three-page planned-maintenance agreement designed to demonstrate advanced CSS Paged Media features.

    Document Layout

    • Page 1: Contains clauses 1–3 and a response-time table.
    • Page 2: Contains clauses 4–8 and schedules 1–2.
    • Page 3: Contains schedule 3 and the execution block.

    Implementation Details

    • Page Breaks: Uses break-before: page at specific design breakpoints to manage page transitions.
    • Execution Block: The execution block is protected from splitting across pages using break-inside: avoid.
    • Footers: Initials are automatically included in every page footer.
    • Data Requirements: To ensure financial accuracy, the equipment allocations defined in data.json must sum to the total annual charge (e.g., 4 visits totaling 28,800.00).

    Engine Features Demonstrated

    This template exercises several advanced engine capabilities:

    • @page :first selector for first-page specific styling.
    • Running-header margin boxes.
    • Page counters.
    • break-before: page and break-inside: avoid.
    • Grouped table subtotal rows.
    • Multiple data tables utilizing th scope for accessibility and structure.

  8. Explore Dev Server features

    main

    The forme dev server includes several tools for inspecting and debugging your PDF layout:

    • Live preview: Hot reload on file changes.
    • Element inspector: View the box model, computed styles, and breadcrumb navigation.
    • Component tree: Visualize the document structure.
    • Click-to-source: Automatically opens your editor (VS Code, Cursor, WebStorm, Zed) at the exact line of the element.
    • Responsive preview: Switch between page sizes like Letter, A4, Legal, Tabloid, or custom sizes.
    • Data editor: Live JSON editing when a --data file is provided.
    • Debug overlays: Visual indicators for margins, padding, and element bounds.

  9. Key features of the forme-pdf engine

    main

    The forme-pdf engine is a page-native rendering engine written in Rust. Unlike engines that use an infinite canvas, forme layouts directly into pages, ensuring correct page breaks, table headers, and flex layouts.

    Core Capabilities

    • Layout: Page-native layout with flexbox (row/column, wrap, grow/shrink), CSS Grid, and absolute positioning.
    • Typography: OpenType shaping, Knuth-Plass line breaking, hyphenation (35+ languages), BiDi, and per-character font fallback.
    • Graphics: Support for Images (JPEG, PNG, WebP), inline SVG, and a Canvas-like API for arbitrary vector drawing.
    • Data Visualization: Engine-native charts (Bar, Line, Pie, Area, DotPlot) without requiring JavaScript.
    • Specialized Content: QR codes, barcodes (Code128, Code39, EAN13, etc.), and watermarks.
    • Forms & Compliance:
      • AcroForms: Fillable PDF forms (TextField, Checkbox, Dropdown, RadioButton) with flattening support.
      • Accessibility: PDF/UA-1 compliance (structure tree, tab order, role map, artifact tagging).
      • Archival: PDF/A compliance (PDF/A-2b, PDF/A-2a) with full font embedding and XMP metadata.
    • Security: Digital signatures via PKCS#7 detached signatures with X.509 certificates.
    • Dynamic Content: Template expression language supporting $ref, $each, and $if.
    • Platform: Compiles to WebAssembly (WASM) for browser and serverless environments.

  10. Overview of @formepdf/core capabilities

    main

    The @formepdf/core package contains the compiled WASM binary of Forme's Rust layout engine. It is responsible for the heavy lifting of PDF generation, including:

    • Page-native layout: Handles automatic content splitting across pages.
    • Font management: Handles font loading, subsetting, and TrueType embedding.
    • PDF features: Generates PDFs with support for links, bookmarks, images, and SVG.
    • Table layout: Provides automatic header repetition in tables.

    While you define your document structure using @formepdf/react components, @formepdf/core performs the actual rendering into PDF bytes.

  12. Engine features used in termination-letter

    main

    The termination-letter template demonstrates several advanced engine capabilities:

    • @page margin boxes: Used for positioning elements in the page margins.
    • Page counters: Automatic numbering/referencing in the footer.
    • Fixed-height page fill: Ensures the document occupies the full page height.
    • Data tables: Implementation of tables with th scope and custom 'ink' subtotal keylines.