docs

An open-source alternative to Claude Design. Works with any code assistant and runs locally.

Build slide decks, invoices, or any paginated document as React components. Preview live in the browser, and export to a real PDF.

Setup

npm install
npx playwright install chromium  # one-time
npm run dev

Usage

1. Create a document with meta.ts:

export const meta = {
  title: 'My Document',
  company: 'Acme',
  date: 'April 2026',
  width: 1280,
  height: 720,
}

2. Create page files. Each exports a default React component. The component is responsible for its own layout and dimensions — use meta.width / meta.height on the root element.

3. Export. Click the export button in the bottom right, or type this:

npm run export -- <project>/<doc>

Output: exports/project-doc.pdf

How it works

src/routes/
  <project>/
    <doc>/
      meta.ts       ← dimensions + metadata for this document
      page-1.tsx    ← each page is a React component
      page-2.tsx
      ...

• Index: http://localhost:5173/ — lists all documents
• Editor: http://localhost:5173/_editor/<project>/<doc> — document navigation experience
• Page-only: http://localhost:5173/<project>/<doc>/page-1 — bare page, no layout ui

No route registration needed. Any page-*.tsx file is auto-discovered and mounted at /<project>/<doc>/page-<n>.

---

Notes

Fonts need internet on export. Google Fonts load at export time via Playwright. If you need offline export, download fonts and reference them with @font-face in src/index.css.

Gradient text requires three properties:

background: 'linear-gradient(...)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text',

No animations in exports. CSS animations and transitions don't run during page.pdf().

---

Roadmap

• Click and drag to edit items on the canvas (with snapping option)
• Click and drag images into the canvas
• Separate program from project files, so you can export/import documents
• Multiplayer
• Replace Figma