Skip to content
Press.js Press.js Press.js Docs

Quickstart

This guide walks you through creating a Press.js document project from scratch, rendering it to PDF, and previewing the result.

Prerequisites

Section titled “Prerequisites”
  • Node.js >= 22
  • pnpm, npm, or yarn
  • Chromium installed (the Playwright renderer will download its own if none is available)

Create a project

Section titled “Create a project”

Start with a Vite + TypeScript template for your framework of choice.

Terminal window
npm create vite@latest my-press-report -- --template react-ts
cd my-press-report
npm install @press-js/react

Then install the Press.js CLI globally so the press command is available in your shell:

Terminal window
npm install --global @press-js/cli

Create your first document

Section titled “Create your first document”

Replace the default src/App.tsx (or src/App.vue) with a basic Press.js document.

src/App.tsx
import {
  Page,
  Header,
  Footer,
  PageNumber,
  TotalPages,
  usePressReady,
} from "@press-js/react";


function App() {
  usePressReady();


  return (
    <Page type="A4" orientation="portrait" margin="20mm">
      <Header>
        <div style={{ textAlign: "right", fontSize: "9pt", color: "#666" }}>
          Press.js Report
        </div>
      </Header>


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


      <h1>Hello, Press.js</h1>
      <p>
        This document was built with React. Every element here is standard HTML
        and CSS — no proprietary layout APIs needed.
      </p>


      <table>
        <thead>
          <tr>
            <th>Feature</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Headers &amp; Footers</td>
            <td>✓</td>
          </tr>
          <tr>
            <td>Auto-pagination</td>
            <td>✓</td>
          </tr>
          <tr>
            <td>Page numbers</td>
            <td>✓</td>
          </tr>
        </tbody>
      </table>
    </Page>
  );
}


export default App;

Configure the build

Section titled “Configure the build”

Create a press.toml file in your project root:

press.toml
workspace = "."


[pdf.report]
path = "./dist"
route = "/"
output = "./artifacts/my-report.pdf"
title = "My Press.js Report"
build = "npm run build"
timeout_ms = 15000

Render the PDF

Section titled “Render the PDF”

Build your app and render the PDF in one step:

Terminal window
press render report

The report argument matches the entry name [pdf.report] in press.toml. After rendering completes, you’ll find the PDF at ./artifacts/my-report.pdf.

If you have a single entry in press.toml, you can omit the entry name:

Terminal window
press render

Preview in the browser

Section titled “Preview in the browser”

During development, run your app normally:

Terminal window
npm run dev

When you open the page in a browser, Press.js automatically detects it’s not in headless mode and activates the Previewer — a full UI showing the paginated layout with zoom controls, a reload button, and a status bar. The previewer runs the same pagination pipeline that the CLI uses, so what you see is what you’ll get in the PDF.

The previewer only activates in your browser. When Press.js renders the page in headless Chromium, the previewer is skipped and the document is captured directly.

Next steps

Section titled “Next steps”