PDF Playground

Local DX tool for iterating on PDF templates.

🧰 Stack

• PDFShift (HTML→PDF)
• Astro (SSR)
• SolidJS (interactive islands)
• LightningCSS (CSS modules)
• Vitest 🤝 Playwright 🤝 MSW (testing) 👉 tests/README.md

🗂️ Project Structure

/
├── projects/
│   └── [name]/
│       ├── templates/
│       │   ├── header.astro, body.astro, footer.astro
│       │   └── header.css, body.css, footer.css  # template-specific styles
│       ├── data/         # JSON data files
│       ├── config.ts     # PDFShift options (typed)
│       └── styles.css    # shared styles (fonts, variables)
├── src/
│   ├── pages/
│   │   ├── index.astro
│   │   ├── [project]/    # dynamic routes
│   │   └── api/
│   ├── components/       # Astro + SolidJS islands
│   ├── lib/              # project loader
│   └── types/            # config, pdfshift types
├── tests/
│   ├── unit/             # Vitest
│   ├── e2e/              # Playwright
│   └── mocks/            # MSW handlers
├── vite-plugin-css-transform.ts  # CSS isolation plugin
└── package.json

🧑‍🚀 Commands

Command	Action
pnpm dev	Start dev server
pnpm build	Build HTML output to dist/
pnpm lint.check	Check with Biome
pnpm lint.write	Fix with Biome
pnpm test	Run unit tests (watch)
pnpm test.unit	Run unit tests (single)
pnpm test.e2e	Run e2e tests
pnpm test.all	Run all tests
pnpm types.astro	Sync Astro types
pnpm types.pdfshift	Regenerate PDFShift types

🚧 Adding a New Project

1. Copy projects/default/ to projects/your-project/
2. Edit templates, data, config.ts
3. Restart dev server

🔐 Environment

PDFSHIFT_API_KEY=your_api_key