Custom window and door configurator
In this article, we explain how we designed one from scratch: the architectural choices, the reason for a single drawing engine shared between browser and server, and the reasons why we preferred to build it custom rather than assemble a plugin.
In short. A single SVG engine generates both the screen preview and the PDF. The list is output as an A4 technical sheet, intentionally without prices. The code is the property of the window and door manufacturer, can be branded, and is lock-free. The public endpoint is protected with whitelist validation and resource limitations. You can see it in action in the project sheet.
What is a window configurator?
A window configurator (or frame configurator) is a web application that translates a user's choices—window family, material, opening type, dimensions, sash distribution, mullion, glass package—into a technical price list and a summary document. It's not a price list and it's not e-commerce: it's a technical quote tool that prepares the ground for negotiations, leaving the window and door manufacturer in control of the price.
The value, for window and door manufacturers, is twofold: the customer receives the quote request already prepared and informed. With clear ideas and a correct specification, the company receives a legible bill of materials instead of a sketchy description.
The problem: a window or door is not a catalog product
A window or door is an object with combined parameters. The same window can be made of wood, aluminum, PVC, or a wood-aluminum composite; it can be casement, tilt-and-turn, or sliding; it can have one or more sashes, with asymmetrical partitions; it can be fitted with different types of glass for thermal or acoustic insulation. There are thousands of combinations, and each has a different design and technical description.
This is exactly the type of problem that a configurator solves well—as long as the design is correct and consistent in each combination. It is This is where the difference between a credible tool in the eyes of a technician and a toy that draws rectangles comes into play.
Design choices
A single-source drawing engine
The most important architectural decision was having a single drawing engine, shared between the browser and the server. The same function that draws the interactive preview on the screen is the one that generates the drawing within the PDF. No duplication.
The reason is simple and has concrete consequences: if the drawing logic existed in two copies—one client-side for the preview, one server-side for the PDF—sooner or later they would diverge, and the client would see a different window on the screen than the one printed on the list. An unacceptable error in a technical document. With a single source, what you see is what you get. you get, by construction.
This is the principle behind our "Designed. Not assembled.": consistency is not a control added at the end, it is a property of the architecture.
Parametric SVG and the aesthetics of the technical drawing
The drawing is created in SVG, generated entirely from the configuration parameters. Every line—frame, sash, rebate, opening direction, dimensional dimensions—is calculated, not drawn from a library of static images. This allows for real measurements, asymmetrical sashes, dimensioned elevations, and a level of detail that holds the gaze of those who design the windows and doors.
The aesthetic choice is Deliberate: the language of the technical drawing, with grid, dimensions, and blueprint lines. It's not decoration. It speaks the same language as the window and door manufacturer and conveys precision. On screen, the theme is dark; from a blueprint, in print it becomes a white, clean, and professional drawing—two renditions of the same drawing, not two drawings.
The list in PDF, generated on the server
The configuration creates a multi-position list: multiple windows and doors collected in a single request, each with quantities, notes, and thumbnails. The list is exported to an A4 PDF, generated server-side to guarantee identical results on any device and printer.
One choice deserves a note: the list does not contain prices. It's a product decision, not a shortcoming. The economic value of a window depends on too many company and installation variables for it to make sense to automate it in a generic way; it remains the responsibility of the window and door manufacturer. The configurator produces the correct technical specifications, not the cost estimate.
White-label: the code belongs to the window and door manufacturer
The configurator is white-label and reusable: a single code base, installable and branded for each company. Each window and door manufacturer has their own installation, with their own brand, and—a non-negotiable point for us—their own code, without lock-in. No platform subscriptions, no data stored on third-party servers outside the company's control.
Security: an endpoint Public endpoint must be protected
Generating a PDF on the server means exposing a public endpoint that accepts input and produces a document. Treated lightly, it poses a real risk: unvalidated inputs that end up in a rendering engine can open the door to injections or uncontrolled resource consumption.
This is why the input is never considered reliable. Each request is rebuilt from scratch against a whitelist: families, materials, and apertures must belong to known sets; measurements are forced to integers within valid ranges. Nothing that arrives from the outside reaches the generator in its raw state. Added to this are limiting rendering concurrency (to avoid saturating a server with simultaneous requests), a timeout with forced termination, a cap on the number of positions, and rate-limiting. As we say elsewhere: security and performance are not negotiable.
Designed, not assembled: why not a plugin
The quick way would have been an installed plugin or a subscription service. We discarded it for reasons that extend far beyond this project.
A generic plugin designs what it knows how to design, not what the individual window and door manufacturer needs; it carries with it weight, dependencies, and code that no one really controls; and it ties the company to an external platform. A custom-built configurator, on the other hand, is lean, readable, and proprietary: it does exactly what it's supposed to, integrates into the existing site without weighing it down, and grows with the company.
It's The same logic we apply when we choose to write code instead of installing it, and which we describe in From demo to MVP: we start from a working prototype and bring it to a production tool, one testable step at a time.
How to integrate it into an existing site
The configurator is a standalone application, served alongside the window and door manufacturer's website with same-origin architecture (frontend and API on the same origin, without CORS complications). The materials catalog is designed to be powered by a ProcessWire CMS, so the company can independently manage profiles, finishes, and colors. And the quote request flow is set up: the list can be be forwarded to the company via transactional email, with the PDF attached.
Operationally, it runs on a VPS with Node.js/Express behind Nginx, with server-side PDF rendering. Lightweight foundations, clean URLs, no unnecessary plugins: the same ones we use when preparing a site for search engines and generative AI.
Frequently Asked Questions
What is a window and door configurator? It's a web application that allows you to create a window or door frame by choosing the material, opening, dimensions, and glass, obtaining a real-time technical drawing with dimensions and a summary list ready for requesting a quote.
Does a window and door configurator show prices? Not necessarily. In our case, the list is It is deliberately priceless: it produces the correct technical specification and leaves the economic valuation to the window and door manufacturer, who calculates it based on their own production and installation variables.
What is the difference between a custom configurator and a plugin? A plugin is generic, carries dependencies, and links the company to an external platform. A custom configurator is lightweight, integrates into the existing site, accurately designs the window and door manufacturer's typologies, and is the company's property, with no lock-in.
Can the configurator be integrated into my existing site? Yes. It is a standalone application that runs alongside the existing site with same-origin architecture, and the materials catalog is designed to be managed by a CMS like ProcessWire.
How is the technical document generated? The bill of materials is Generated as a server-side A4 PDF, starting from the same design engine that produces the on-screen preview: what the customer sees is identical to what is printed.
Is it suitable for multiple types of windows and doors? Yes. It manages windows, doors, gates, and sliding glass doors, with different materials (wood, aluminum, PVC, laminated), various opening types, multiple sashes, including asymmetrical ones, mullioned windows, and glass packages.
Want to see it in action?
The configurator is online and interactive. You can explore it from the project sheet, or and tell us your needs: if you produce windows and doors and want a technical quotation tool with your brand and code, we can build it custom.