Quickstart

Scaffold a workspace

Run the init command. It copies the workspace template, installs dependencies, and makes an initial git commit.

npm create @autono/open-pdf@latest my-docs

pnpm dlx @autono/create-open-pdf init my-docs --use-pnpm

yarn dlx @autono/create-open-pdf init my-docs --use-yarn

bunx @autono/create-open-pdf init my-docs --use-bun

Useful flags: --name <name> overrides the package name, --force scaffolds into a non-empty directory, --no-install skips dependency installation, --no-git skips git init. Run interactively without a directory argument and the CLI prompts for the target and package manager.The workspace includes AGENTS.md (linked as CLAUDE.md) and five bundled agent skills: create-doc, doc-authoring, apply-comments, current-doc, and create-theme.

Create a document with your agent

Open the workspace in your coding agent (Claude Code, Cursor, Codex) and run /create-doc with a prompt:

/create-doc an invoice for Harborline Freight, 3 line items, net 30

The skill asks a few scoping questions (visual direction, length, density, page setup), then writes docs/<id>/index.tsx: one React component in HTML-shaped JSX, styled with Tailwind via the tw prop.

Start the live preview

cd my-docs
npm run dev

Open http://localhost:5173. Each document lives at http://localhost:5173/s/<id>. The preview renders actual PDF bytes with the Takumi engine in a web worker and hot-reloads on every edit. What you see is the PDF, not an HTML rendition of it.

Inspect, comment, apply

In the preview, press i (or hit Inspect) and click any element. The inspector maps your click to the exact source lines and saves each comment into the document as a @pdf-comment marker.Back in your agent, ask it to apply them:

apply the comments on the invoice

The apply-comments skill reads the markers, makes the edits, and removes the markers. The dev server also tracks which document and element you last selected in node_modules/.open-pdf/current.json, so “make this bigger” resolves without naming anything.

Export

Render headlessly to export/:

# every doc, as PDF
npm run export

# one doc, as editable Word
npm run export -- invoice-harborline --format docx

The PDF export is the same bytes as the preview. The DOCX output opens in Word, and dropping it into Google Drive converts it to an editable Google Doc. --out-dir <dir> changes the output directory.

The agent never needs to touch package.json or open-pdf.config.ts. Documents are self-contained under docs/<id>/, with per-doc assets in docs/<id>/assets/.

Next steps

Documents

The full file contract and the tw styling dialect.

Inspector

How comments become source markers and edits.

Export

PDF and DOCX output in depth.

What is open-pdf

The architecture and the authoring loop.

Getting started

Authoring

The loop

Export

Reference

Next steps

Documents

Inspector

Export

What is open-pdf

​Next steps

Documents

Inspector

Export

What is open-pdf

Next steps