PageNumber & TotalPages

Placeholders that are filled in by the pagination engine during rendering. They are typically placed inside <Header> or <Footer> to show page numbers on every page.

React

import { Header, Footer, PageNumber, TotalPages } from "@press-js/react";

<Header>
  <div style={{ fontSize: "9pt", color: "#666", textAlign: "right" }}>
    Page <PageNumber />
  </div>
</Header>

<Footer>
  <div style={{ textAlign: "center", fontSize: "9pt", color: "#666" }}>
    Page <PageNumber /> of <TotalPages />
  </div>
</Footer>

Vue

<script setup lang="ts">
  import { Header, Footer, PageNumber, TotalPages } from "@press-js/vue";
</script>

<template>
  <header>
    <div style="font-size: 9pt; color: #666; text-align: right">
      Page <PageNumber />
    </div>
  </header>

  <footer>
    <div style="text-align: center; font-size: 9pt; color: #666">
      Page <PageNumber /> of <TotalPages />
    </div>
  </footer>
</template>

PageNumber

Renders the current page number. Each page gets a different value automatically.

• Renders as <span data-press-page-number></span>
• No props or children needed
• Works outside headers/footers too (useful for cover pages, appendices)

Native HTML API

<span data-press-page-number></span>

TotalPages

Renders the total number of pages in the document. The same value on every page.

• Renders as <span data-press-total-pages></span>
• No props or children needed

Native HTML API

<span data-press-total-pages></span>

Common patterns

Simple page numbering:

Page <PageNumber />

“Page X of Y” — the most common format:

Page <PageNumber /> of <TotalPages />

With custom styling:

<span style={{ fontFamily: "monospace", fontSize: "8pt" }}>
  <PageNumber />
</span>