Let customers plan their own project
An interactive tile planning tool you embed in your product pages. Customers draw their space, pick a pattern, and get an exact tile count — without ever leaving your shop.
What it does
Everything your customer needs
Draw any shape
Customers design their own space
A drag-and-drop canvas where customers outline any room or patio shape — irregular corners, nooks, steps. No measuring tape needed, just a rough floor plan drawn right on the page.
5 patterns
Straight, running bond, diagonal, herringbone — and more
Every popular installation pattern is built in. Customers see their tile choice laid out before they order, reducing uncertainty and returns before purchase.
Instant material count
Exact tiles needed, with waste buffer
The planner calculates full tiles and cut pieces in real time using a First Fit Decreasing algorithm. A configurable waste buffer (+10% or +15%) means customers order the right amount — first time.
Direct cart integration
Connect the planner to your checkout
The onResult callback fires after every change with tile count, box count, and SKU. Wire it to your cart and watch average order value increase as customers buy with confidence.
Why tile shops use it
Built for your business
Fewer returns
When customers order the right amount, you handle fewer over-order returns and under-order re-deliveries.
Higher confidence
Customers who can visualise and calculate for themselves make purchasing decisions faster and with fewer calls to your team.
Any web stack
One CDN script tag — no build step, no backend, no token. Or install via npm with full TypeScript types.
Your brand, your colours
The planner is fully themeable. Match your store palette exactly — every colour token is a CSS variable you can override.
Works on mobile
Compact layout auto-enables on small screens, showing a slim status bar and slide-up panel instead of the full sidebar.
No data leaves the browser
Entirely client-side. No server calls, no user data collected. Plans save to localStorage and export as JSON, PDF or PNG.
Setup
Live in your store in minutes
Two lines in your product page template — that's it. No npm, no build pipeline, no backend. For React or Vue, install the npm package and use the component directly.
Developer installation guide →Add two lines to your page
CDN script tag + CSS — no npm required
Drop in a container element
Any div with a fixed height
Call TilyPlanner.mount()
Pass your tile SKU and size. Done.
Get started
Ready to add a planner to your shop?
Follow the installation guide to embed the tile planner in minutes. Full API reference and live demo included.