Overview

Press.js provides a set of components that mark up your document structure. They emit data-press-* attributes that the pagination engine reads to understand headers, footers, page breaks, and other document semantics.

Both React and Vue packages export the same components and hooks.

Under the hood, every component is a thin wrapper that emits data-press-* attributes on a standard HTML element. These attributes are Press.js’s native API — you can use them from any framework, or no framework at all, by writing the HTML directly. Each element page below includes the native HTML equivalent.

Component reference

Element	Description
Page	Root document container with size, orientation, and margin control
Header	Content repeated at the top of every page
Footer	Content repeated at the bottom of every page
PageBreak	Forces a page break at the insertion point
KeepTogether	Prevents page breaks inside the wrapped content
KeepNext	Keeps the element with its next sibling
PageNumber	Placeholder replaced with the current page number
TotalPages	Placeholder replaced with the total page count

Hooks & utilities reference

Export	Description
usePressReady	Reactive hook that signals the document is ready for capture
markPressReady	Imperative version of usePressReady
reportPressRenderError	Reports a render error to the pipeline
shouldUsePressPreviewer	Detects whether the previewer is active

Import reference

React

import {
  Page,
  Header,
  Footer,
  KeepTogether,
  KeepNext,
  PageBreak,
  PageNumber,
  TotalPages,
  usePressReady,
  markPressReady,
  reportPressRenderError,
  shouldUsePressPreviewer,
} from "@press-js/react";

Types are also exported:

import type {
  PageProps,
  PressMarkerProps,
  PressReadyOptions,
  UsePressReadyOptions,
} from "@press-js/react";

Vue

import {
  Page,
  Header,
  Footer,
  KeepTogether,
  KeepNext,
  PageBreak,
  PageNumber,
  TotalPages,
  usePressReady,
  markPressReady,
  reportPressRenderError,
  shouldUsePressPreviewer,
} from "@press-js/vue";

Types are also exported:

import type {
  PageProps,
  PressMarkerProps,
  PressReadyOptions,
  UsePressReadyOptions,
} from "@press-js/vue";