Window configurator — 10 steps, a rules engine and a 3D preview, right in the browser.
This live demo shows a complete product configurator for a technical product: material, window type, dimensions, opening style, profile, colour and decor, fittings, handles, glazing and accessories. A constraint engine keeps every combination valid, the 3D preview follows each change, and the price updates live. This is how we build configurators for manufacturers, distributors and trades.
Live demo: configure it yourself
Pick a material, set the dimensions, choose opening and glazing – undo and redo any step. The widget is loaded on demand when you click start.
Note: Demo with a built-in sample catalogue: products, options and prices are illustrative and not an offer. In production, catalogue, rules and pricing come from the backend (multi-tenant API), and the result is handed to shop, CRM or quoting process. No data is collected in this demo.
What this demo shows technically
- 10-step wizard with a constraint engine: invalid combinations are blocked or auto-corrected
- Real-time 3D preview of the window (Three.js / React Three Fiber) – frame, sashes, profile depth and glazing follow every change
- Live pricing from base price, dimensions, options and surcharges, recalculated on every step
- Undo/redo across the whole configuration, plus save and share of a configuration
- Multi-tenant ready: catalogue, rules and prices per client from a JSON:API backend
- Shop handover: the finished configuration goes into the cart (Shopware) or into a quote request
- Embedded as an isolated Shadow-DOM widget – no style conflicts with the host page, DE/EN UI
- Performance: click-to-load, one self-contained file, no external requests
From configurator to quote-to-order pipeline
A configurator like this is the front end of a complete quote-to-order process. It turns a customer’s choices into a unique, valid configuration, produces price and bill of materials, and hands the result to shop, ERP or quoting process in a structured way – the same pipeline we use for quote and CPQ automation.
For a production version we connect your product catalogue and pricing rules, add your visual language and configure the handover: cart, inquiry form, PDF quote or direct ERP entry. Rules and prices live server-side; the browser only renders what the API delivers.
Other configurator projects
Photorealistic 3D ring configurator: precious metals, band profiles, stone settings and live diamond sparkle in the browser.
View project →Drag-and-drop fence planning with automatic material list, live price and direct cart handover.
View project →5-step configurator with real-time 3D preview, material list and PDF output.
View project →