canvas-builder

Context

Firstage puts turning accumulated records into photobooks and print at the center of its business. The same document also has to appear as a web magazine, so I needed an editing engine that handles print and web, two media with opposite requirements, in one document model. People with no design training also had to be able to edit without breaking the page. The engine began as a feature inside the service app, and in May 2026 I split it into its own packages.

Decisions and implementation

• Photobook print and the web magazine read the same document model, and only the renderers differ by medium. Print output is drawn on the same Konva canvas as the editor, and the magazine renders as a scrolling web page.
• The packages form three tiers: a document model defined with Zod schemas, a React-free core for state, commands, and plugins, and an editing UI built with React and Konva. The server’s render service uses the same model and core without React.
• Print PDFs come from a headless browser on the server. Remote images are embedded as data beforehand to avoid CORS failures, and color stays sRGB in the editor and on the web, converting to CMYK only for print output.
• Templates set the placement, so people with no design training can edit while the page composition holds.
• AI returns a structured plan and editing intent, and a deterministic engine owns coordinates, photo placement, bleed, and DPI checks. Product rules run on the shared commit path that every change passes through, so edit operations proposed by AI face the same checks as direct edits and come back with a rejection code when they fail.

Current state

The photobook editor in Firstage’s Journey app and server-side print PDF rendering run on this engine. The Lapse experiment, a timeline product in a video aspect ratio, was also built on it. Performance measurement with real photos on physical devices and physical print checks with the print vendor remain, so print ordering is not open yet.