tillandClaude Opus 5 181060c32d Demo and product page for Klarbild
A static Astro page. The sheet playground imports the print engine
(printlayout.ts, paper.ts) verbatim from the Klarbild repository and runs it in
the browser, so the layout on screen is the application's own arithmetic rather
than a mock-up. The PDF it offers is drawn from the same placements with pdf-lib.

No backend, nothing uploaded, no third-party requests.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Nh4A79bbqT9dcd2inzYUdg
2026-09-15 14:59:59 +00:00
2026-09-15 14:59:59 +00:00
2026-09-15 14:59:59 +00:00
2026-09-15 14:59:59 +00:00
2026-09-15 14:59:59 +00:00
2026-09-15 14:59:59 +00:00

klarbild-demo

The product and demo page for Klarbild, live at klarbild-demo.heidrich-digital.de.

A single static Astro page. The interesting part is src/lib/playground.ts: it imports src/engine/printlayout.ts and src/engine/paper.ts verbatim from the Klarbild repository and runs them in the visitor's browser. So the sheet you see being laid out is not a mock-up — it is the application's own arithmetic, and the PDF the page hands you is drawn from the same placements (with pdf-lib in the browser rather than sharp on a server, which is why it carries outlines instead of photographs).

Nothing is uploaded and there is no backend.

npm install
npm run dev

Keeping the engine in sync

src/engine/* are copies. When the print engine changes upstream, copy them again:

cp ../klarbild/src/lib/{printlayout,paper,printoversize}.ts src/engine/
# printoversize.ts imports './printlayout.ts'; drop the extension for the bundler
sed -i "s#from './printlayout.ts'#from './printlayout'#" src/engine/printoversize.ts

Deployment

Dockerfile: Node builds the site, nginx serves it on port 80. Coolify deploys on push to main.

S
Description
Product and demo page for Klarbild — klarbild-demo.heidrich-digital.de. Static Astro, runs the real print engine in the browser.
https://klarbild-demo.heidrich-digital.de
Readme
1.5 MiB
0 Stars 1 Watchers 0 Forks
Languages
TypeScript 70.8%
Astro 14.8%
CSS 13.9%
Dockerfile 0.3%
JavaScript 0.2%