Core Principles

Four principles guide how Press.js works.

Standard CSS, not a layout DSL

Every CSS feature that works in the browser works in Press.js — flexbox, grid, custom fonts, media queries. There’s no “Press.js CSS” to learn.

If you can build a web page, you can build a Press.js document. The same responsive design techniques, the same layout patterns, the same styling approach all apply.

Semantic markers, not components

Components like <Page>, <Header>, and <Footer> are thin wrappers that emit data-press-* attributes. The pagination engine reads these markers from the DOM.

This means you could in theory produce valid Press.js documents with plain HTML — the components are just the most convenient way. The underlying protocol is framework-agnostic: data attributes in the DOM.

Framework-neutral at the engine level

The browser runtime and pagination core have no dependency on React or Vue. The framework packages (@press-js/react, @press-js/vue) are pure-presentation layers that render the appropriate semantic HTML.

React and Vue documents produce the same output. The engine doesn’t know — or care — which framework you used.

Preview-driven development

The development preview runs the real pagination pipeline in your browser, so you see exactly how the document will look before running the CLI.

How it works

The previewer is built into the framework packages (@press-js/react and @press-js/vue). When you import and render a <Page> component in your app and start your dev server normally, the previewer activates automatically — no CLI or special flags needed.

npm run dev  # starts Vite dev server
# → open http://localhost:5173
# → Previewer UI appears automatically

The <Page> component detects whether it’s running in a normal browser or in the headless Press.js renderer:

• Normal browser — wraps the document in the Previewer UI with zoom controls, status bar, page inspection, and reload
• Headless Chromium (CLI render) — renders the document directly, skipping the previewer entirely

No CLI needed for preview

The previewer is independent of @press-js/cli and @press-js/playwright. It runs the pagination engine (@press-js/browser) directly in your browser. You only need the CLI for the final PDF export.