What is open-pdf

open-pdf is a document framework where an AI coding agent does the authoring. Every document is a React component: HTML-shaped JSX styled with Tailwind through the tw prop. Content flows, and the engine paginates, repeats table headers, and resolves page counters in running header and footer bands. The preview is not an HTML approximation. The dev server renders actual PDF bytes with the Takumi engine in a web worker, so the page you see in the browser is the page you export. Preview and export share one renderer.

The loop

The agent writes. You prompt your coding agent (Claude Code, Cursor, Codex) and it authors docs/<id>/index.tsx using the bundled create-doc skill.
You watch a live PDF. npm run dev serves the preview at localhost:5173. Every save re-renders the real PDF in well under half a second.
You inspect and comment. Press i to enter Inspect mode. Clicking any element maps to its exact source lines. Comments are saved into the source as @pdf-comment markers.
The agent applies. Ask the agent to run apply-comments. It reads the markers, makes the edits, and deletes the markers. The dev server also writes node_modules/.open-pdf/current.json, a cursor the agent reads so “this page” and “this element” resolve without you naming them.
You export. open-pdf export renders headlessly to PDF. --format docx produces an editable Word file, and dropping that into Google Drive converts it to a Google Doc.

What a document looks like

A document is one folder under docs/ with a kebab-case id. Its index.tsx default-exports one component and optionally exports meta and pageOptions:

docs/getting-started/index.tsx

import { type DocMeta, PageNumber, type PageOptions, TotalPages } from '@autono/open-pdf';

export const meta: DocMeta = {
  title: 'Welcome to open-pdf',
  createdAt: '2026-08-18T00:00:01.000Z',
};

export const pageOptions: PageOptions = {
  size: 'a4',
  margin: { top: 56, right: 64, bottom: 72, left: 64 },
  footer: (
    <div tw="flex w-full justify-center text-[9px] text-slate-400">
      <span tw="flex">
        Page <PageNumber /> of <TotalPages />
      </span>
    </div>
  ),
};

export default function GettingStarted() {
  return (
    <main tw="flex flex-col text-[12px] leading-relaxed text-slate-800">
      <h1 tw="text-[34px] font-bold leading-tight tracking-tight text-slate-900">
        The PDF framework built for agents
      </h1>
      <p tw="mt-4 text-[13px] text-slate-600">
        This document is a React component. Your coding agent writes it, the preview renders it as
        a real PDF, and the Download button hands you the same bytes you are looking at.
      </p>
      <div tw="flex flex-col" style={{ breakBefore: 'page' }}>
        <h2 tw="text-[18px] font-bold text-slate-900">Page two starts here</h2>
      </div>
    </main>
  );
}

You write flowing JSX; the engine handles pagination with widow and orphan control, column tracks and repeating header rows for real HTML tables, running bands from pageOptions.header and pageOptions.footer, and hard page starts via breakBefore: 'page'.

Built for agents

A scaffolded workspace ships five agent skills alongside an AGENTS.md guide, so the agent knows the file contract before it writes a line:

create-doc walks the agent through scoping, structure, and hand-off for a new document.
doc-authoring is the technical reference: the tw dialect, page geometry, tables, pagination, running bands.
apply-comments turns inspector comments into edits.
current-doc resolves “this page” and “this element” from the dev server’s cursor file.
create-theme extracts reusable themes as markdown under themes/.

Quickstart

Scaffold a workspace, create your first document, and export it in a few minutes.

Documents

The file contract: docs/<id>/index.tsx, meta, pageOptions, and the tw dialect.

Inspector

Click-to-inspect, comments as source markers, and the apply-comments loop.

Export

Headless PDF export and editable DOCX for Word and Google Docs.

Getting started

Authoring

The loop

Export

Reference

The loop

What a document looks like

Built for agents

Quickstart

Documents

Inspector

Export

​The loop

​What a document looks like

​Built for agents

Quickstart

Documents

Inspector

Export

The loop

What a document looks like

Built for agents