Product Customizers

The problem

Clients want their customers to personalize a product, say a printed box or a piece of apparel, and see it before they buy, without a designer in the loop. And whatever the customer designs has to come out the other end as a print-ready file the floor can actually run. Building that once is hard; rebuilding it from scratch for every client is worse.

The approach

I built one reusable customizer engine in SvelteKit and productized it across clients. Customers personalize in real-time 3D, edit artwork on a 2D canvas with real-world (inch) measurements, and export a print-ready PDF, all in the browser with no backend. The same engine gets reskinned per client: Bose (3D product boxes for QC earbuds and headphones) and Bunzl (apparel), swapping the product domain while the core stays put.

Production detail

The heart of it is a dual-canvas system: a Threlte / Three.js 3D viewer and a Konva 2D editor kept in real-time sync, so edits on the flat canvas update the 3D model’s textures live. Placement is measured in real inches, so what the customer positions on screen matches what prints. A color-grading pass on the 3D render produces photoreal product mockups. Export runs through pdf-lib / jsPDF to a print-ready PDF entirely client-side, the same prepress-first instinct behind rustybara. State lives in Svelte stores (no database), per-product data models drive dynamic, shareable product routes (30+ box variants for Bose, apparel for Bunzl), and the flows are covered by Playwright end-to-end tests.

Outcome

One engine, deployed per client on Vercel: Bose and Bunzl in production, with GCI as the base template. Same skeleton, swapped product domain, the customizer that productizes itself. Both are linked above, and the Bunzl instance is embedded below to try directly.

Try it live

The Bunzl customizer, running live. The Bose instance is access-protected, so it's linked ↗ rather than embedded.