Royal Tiles · Building materials · Retail · Rajkot
A floor designer in the browser, with an order-ready PDF at the end
An interactive tile design and ordering tool: choose layouts, designs and fills, watch the floor render live, and leave with an order-ready PDF template.
The challenge
Choosing floor tiles is a spatial decision made from flat samples. A customer picks a design from a swatch and only discovers how the pattern actually reads across a whole room once it has been laid — which is the most expensive possible moment to find out.
Ordering has the same gap in reverse. Turning a chosen layout into an actual order — quantities, corner pieces, the fills between them — is manual work, and manual work on a spatial problem is where the errors come from.
Underneath both sits a technical obstacle: tile artwork arrives as flat PNGs. Recolouring and recombining regions programmatically needs vector regions, not pixels, and no off-the-shelf library performed that conversion.
That constraint is what makes this a hard problem rather than a styling exercise. A raster image has no notion of which pixels belong to the border, the motif or the background, so a catalogue of flat artwork cannot be recombined into new layouts without someone redrawing every design by hand as vectors first — a cost that scales with the catalogue and never stops.
What we did
We built a custom floor visualisation tool with live preview, so layout, tile design and fill choices render as they are made rather than being imagined from a sample.
Tile variants are generated programmatically — corners, fills and grid patterns — instead of hand-authored for every combination, which is what makes the combinatorial space navigable at all.
The core technical piece is an image-processing workflow built with TensorFlow.js that converts flat PNGs into region-based SVGs in the browser. Nothing off the shelf did this, so it was built from scratch: the output is an editable, region-segmented vector rather than a picture of one.
An admin panel manages tile designs, floor layouts and configurations, so adding to the catalogue is an operational task rather than a development one.
The interface carries product tours, help drawers and shortcut-key interactions. Those are easy to treat as polish and they are not: a tool with this many combinations is intimidating on first contact, and the difference between a customer who explores it and one who closes the tab is whether the first thirty seconds explain themselves.
What changed
Customers design a floor on screen and leave with an order-ready PDF template, closing the gap between choosing and ordering.
Artwork becomes editable in the browser automatically, without a manual vector redraw for every new design.
Delivered end to end by a single engineer — visualisation, image processing, admin panel and onboarding.

