PageBreak

Forces a page break at the insertion point. Content after a <PageBreak /> starts on a new page.

React

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

<section>
  <h2>Section 1</h2>
  <p>This content appears on page 1.</p>
</section>

<PageBreak />

<section>
  <h2>Section 2</h2>
  <p>This content appears on page 2.</p>
</section>

Vue

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

<template>
  <section>
    <h2>Section 1</h2>
    <p>This content appears on page 1.</p>
  </section>

  <PageBreak />

  <section>
    <h2>Section 2</h2>
    <p>This content appears on page 2.</p>
  </section>
</template>

Native HTML API

The component renders a <div data-press-page-break>. Any element with the data-press-page-break attribute is treated as a forced page break by the Press.js engine:

<section>
  <h2>Section 1</h2>
  <p>Content on page 1.</p>
</section>

<div data-press-page-break></div>

<section>
  <h2>Section 2</h2>
  <p>Content on page 2.</p>
</section>

You can achieve the same effect with CSS on any element:

h2.section {
  break-before: page;
  /* or the legacy property: */
  page-break-before: always;
}

The <PageBreak /> component is equivalent to rendering a <div> with break-after: page.

When to use

• Chapter or section breaks in a multi-chapter document
• Ensuring a specific section (like a table of contents or appendix) starts on its own page
• Separating landscape pages from portrait pages