Satzstrom

Design in React.
Publish as PDF.

Build documents with React components, CSS, and your data. Satzstrom handles typesetting and page breaks.

Get startedExplore the documents
Beyond the room: an architecture article with a black-and-white photograph of Fallingwater
Typeset with SatzstromBeyond the room ↗

Make it your own.

A report, a book, an invoice. You decide what the document looks like.

Cover of the Satzstrom Specimen Book with a typographic grid
Specimen book
Board report with metrics, trends, and management commentary
Board report
Typeset mathematics page with formulas, a theorem, and proof
Mathematics paper
More examples, with source code

A document is a React component.

Use the HTML, CSS, fonts, and libraries in your project. Build reusable templates and fill them with your data.

Satzstrom adds what paper needs: fixed pages, flowing content, and repeating headers and footers.

Meet the document model
document.tsx
import { Document, PageMaster } from "@satzstrom/primitives";import "./styles.css";export default function Report() {  return (    <Document title="Annual report" lang="en">      <PageMaster size="A4">        <h1>A year in review</h1>        <p>Revenue grew by 12% this year.</p>      </PageMaster>    </Document>  );}

Your content flows across pages.

Write one continuous document. Satzstrom creates the pages it needs and repeats your page layout.

First paper page with paragraphs, equations and a proofThe paper continues on its second page
Two consecutive pages from the mathematics example.

Add page breaks automatically

Paragraphs and tables continue onto the next page. Headers and footers stay in place.

Keep related content together

A heading stays with the text that follows. Footnotes appear at the foot of the relevant page.

Update numbers and references

Chapter numbers, contents and cross-references follow the document as its length changes.

Build a multipage document

Agent-First

Satzstrom is built for agents to create beautiful documents. They work in familiar React and CSS, guided by our skills. The MCP integration lets them inspect the rendered pages and refine their work.

  1. 01

    Write the document

    Your agent turns your content into React and CSS.

  2. 02

    Inspect the pages and refine

    It looks at the rendered pages and revises the text and layout.

  3. 03

    Create the PDF

    You get the PDF and the editable project files.

Open your first document.

Create a project and open the live preview. The quickstart takes you from your first page to a table of contents.

In your terminal
npm install -g satzstromsatzstrom init my-documentsatzstrom dev my-document/document.tsx
Follow the quickstart