Page

The root container for your document. Every Press.js document must have exactly one <Page> component.

React

import { Page } from "@press-js/react";

function Report() {
  return (
    <Page type="A4" orientation="portrait" margin="20mm">
      <h1>Report Title</h1>
      <p>Document content goes here.</p>
    </Page>
  );
}

Vue

<script setup lang="ts">
  import { Page } from "@press-js/vue";
</script>

<template>
  <Page type="A4" orientation="portrait" margin="20mm">
    <h1>Report Title</h1>
    <p>Document content goes here.</p>
  </Page>
</template>

Props

Prop	Type	Default	Description
type	string	"A4"	Page size preset (see presets below)
orientation	"portrait" | "landscape"	"portrait"	Page orientation
width	string | number	preset-dependent	Explicit page width, overrides type
height	string | number	preset-dependent	Explicit page height, overrides type
margin	string | number | object	"16mm"	Page margin (see formats below)

Page size presets

Preset	Dimensions	Preset	Dimensions
A0	841 × 1189 mm	A1	594 × 841 mm
A2	420 × 594 mm	A3	297 × 420 mm
A4	210 × 297 mm	A5	148 × 210 mm
A6	105 × 148 mm	A7	74 × 105 mm
A8	52 × 74 mm	A9	37 × 52 mm
A10	26 × 37 mm
B0	1000 × 1414 mm	B1	707 × 1000 mm
B2	500 × 707 mm	B3	353 × 500 mm
B4	250 × 353 mm	B5	176 × 250 mm
B6	125 × 176 mm	B7	88 × 125 mm
B8	62 × 88 mm	B9	44 × 62 mm
B10	31 × 44 mm
Letter	8.5 × 11 in	Legal	8.5 × 14 in
Tabloid	11 × 17 in	Ledger	11 × 17 in
Executive	7.25 × 10.5 in

Preset names are case-insensitive and ignore spaces, hyphens, and underscores. All of these resolve to A4: "A4", "a4", "a_4", "a-4".

Orientation and presets

When you set orientation: "landscape" with a named preset, the dimensions are swapped. For example, type="A4" orientation="landscape" produces a 297 × 210 mm page.

Native HTML API

The <Page> component renders a <div> with data-press-page and optional sizing attributes. These data attributes are the Press.js-native way to define a page container — they work with any framework:

<div
  data-press-page
  data-press-page-type="A4"
  data-press-page-orientation="portrait"
  data-press-page-margin="20mm"
>
  <h1>Report Title</h1>
  <p>Document content goes here.</p>
</div>

Available data attributes:

Attribute	Example	Description
data-press-page	—	Marks the element as a Press.js page container
data-press-page-type	"A4", "Letter"	Page size preset
data-press-page-orientation	"portrait", "landscape"	Page orientation
data-press-page-width	"210mm"	Explicit page width
data-press-page-height	"297mm"	Explicit page height
data-press-page-margin	"20mm"	Margin for all sides
data-press-page-margin-top	"30mm"	Top margin override
data-press-page-margin-right	"15mm"	Right margin override
data-press-page-margin-bottom	"30mm"	Bottom margin override
data-press-page-margin-left	"15mm"	Left margin override
data-press-page-margin-x	"15mm"	Left + right margin shorthand
data-press-page-margin-y	"20mm"	Top + bottom margin shorthand

Custom page sizes

Set width and height explicitly instead of type:

React

<Page width="100mm" height="150mm" margin="10mm">
  {/* custom-sized content */}
</Page>

Vue

<Page width="100mm" height="150mm" margin="10mm">
  <!-- custom-sized content -->
</Page>

Margin formats

Single value — applies to all four sides:

margin="20mm"
margin={20}       // 20px
margin="0.5in"

Object form — per-side control:

margin={{ top: "20mm", bottom: "20mm", left: "15mm", right: "15mm" }}
margin={{ x: "15mm", y: "20mm" }}    // x = left+right, y = top+bottom
margin={{ top: "30mm" }}              // partial override, rest default to 16mm

Page length values

The width, height, and margin props accept these formats:

Format	Example	Description
"Nmm"	"210mm"	Millimeters
"Nin"	"8.5in"	Inches
"Ncm"	"3cm"	Centimeters
"Npt"	"12pt"	Points (1/72 of an inch)
N	793	Bare number = CSS pixels (96 DPI)