> ## Documentation Index
> Fetch the complete documentation index at: https://docs.openpdf.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# What is open-pdf

> The PDF framework built for agents: documents are React components, the preview is the actual PDF, and comments flow back to your agent as source markers.

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

1. **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.
2. **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.
3. **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.
4. **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.
5. **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`:

```tsx docs/getting-started/index.tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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/`.

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Scaffold a workspace, create your first document, and export it in a few minutes.
  </Card>

  <Card title="Documents" icon="file-code" href="/authoring/documents">
    The file contract: `docs/<id>/index.tsx`, `meta`, `pageOptions`, and the `tw` dialect.
  </Card>

  <Card title="Inspector" icon="mouse-pointer-click" href="/inspector">
    Click-to-inspect, comments as source markers, and the apply-comments loop.
  </Card>

  <Card title="Export" icon="download" href="/export">
    Headless PDF export and editable DOCX for Word and Google Docs.
  </Card>
</CardGroup>