Press.js
Press.js is a browser-based layout engine for generating high-quality PDFs from web UIs. Instead of translating a design into a proprietary PDF drawing API, Press.js captures live HTML/CSS rendered in a headless Chromium browser and re-paginates it into a professional document layout.
Why Press.js?
Section titled “Why Press.js?”Traditional PDF libraries require you to learn a new set of layout primitives — draw commands, coordinate systems, and positioning APIs. Press.js lets you use the tools you already know:
- Standard HTML and CSS — style your documents with the same CSS you use for web apps
- Your favorite framework — first-class support for React and Vue, with semantic components that mark up your document structure
- Full power of the web — SVG charts, Canvas visualizations, tables, custom fonts, and any DOM API
How it works
Section titled “How it works”Press.js runs in three phases at render time:
- Ghost measurement — the runtime clones your live DOM, measures every element’s dimensions, and classifies nodes (block, table, atomic, header, footer, page-break)
- Fragmentation planning — the core algorithm creates a page-by-page plan, deciding which content fits on each page. Tables are split row-by-row, blocks are split recursively, and oversized nodes are flagged
- Materialization — the plan is realized as actual paginated output, then exported to PDF via Chromium’s print engine
During development, the Preview system gives you real-time feedback by running the full pagination pipeline in your browser.
During PDF rendering, Press.js disables browser CORS and CSP enforcement in the headless Chromium page. Cross-origin requests for stylesheets, images, fonts, scripts, and API data are not blocked by missing CORS headers; the resource only needs to be reachable from the rendering environment.
Current status
Section titled “Current status”Press.js is in early development. The core APIs are functional and actively used in production, but you may encounter rough edges. Please report issues on GitHub.
Next steps
Section titled “Next steps”- Quickstart — set up a Press.js project in minutes
- Philosophy — design principles and best practices
- press.toml Reference — configure your document build
- Special Elements — Page, Header, Footer, and more