Tile Layout PlannerFloor plan & tile design
Not to scale
Autosave ready BETA 1.9 · loading
CANVASSelect a region or drag tile textures within it
100%
Blank workspace. Choose Import Layout, or start drawing on the empty canvas.
X — · Y —Wheel: zoom · Space / middle mouse: pan0 REGIONS
Edit Edge Dimension

Change the length of this edge in mm. Its current angle is retained; the adjacent edges update.
New Project

Create a fresh blank workspace. Your current project will be downloaded as a JSON backup before the canvas is cleared.

The new project starts with an empty canvas, no regions, no masks and an empty tile library.
Reference View Size

Set the initial reference view in millimeters. You can draw and pan beyond these dimensions without any boundary. Fit will frame the actual drawing.
Calibrate Scale

Enter the actual distance between the two points you selected.
Tile Material
Tile FacesUpload up to 24 designs for one tile code.

Use ↑/↓ to change Sequence order. Use × to remove one design. All photos will use the same physical tile size.
Quick Guide
  1. Starting up: your workspace is blank by default. Import a drawing or restore a project backup when needed.
  2. Autosave / Recovery: project edits are saved locally to IndexedDB, including tile faces and imported artwork when space permits. If the tab closes unexpectedly, choose Recover Project next time. Always download a separate JSON Backup for critical work.
  3. Large drawings: rendering adapts to your device memory. When Fast overview appears, zoom in to view every separate face and grout line. Dimensions remain in millimetres. On iPad, exported PDFs use a safe print resolution to avoid out-of-memory crashes.
  4. One Drawing workspace: select Drawing once. Switch between Floor Area, Polyline, Rectangle, Arc, Wall, Door, Window and Edit Walls directly in the same tools row. Wall and floor lines share exact millimetre input, Direction, Free angle, Ortho and alignment guides.
  5. Wall drafting: tap the start, point toward the next direction, type e.g. 2400 then Enter, continue with more segments. To edit a wall, choose Edit Walls, select its end, move with snap, insert a midpoint or edit its length. Delete Point only merges a safe two-segment joint.
  6. iPad: use Tools and Properties to show side panels; one finger to draw or pan with the hand tool; two fingers to pan and zoom; tap Finish to stop drawing connected walls.
  7. New Project: creates a blank workspace and downloads a JSON backup of the current project first.
  8. Import PDF / SVG: original vector files are re-rendered at higher resolution as you zoom. An image cannot gain detail beyond its original resolution.
  9. Scale Layout: click the endpoints of a known dimension and enter millimeters.
  10. Dimension Settings: use Dimensions to show or hide mm callouts, then choose Outside (default) or Inside. PDFs and DXF follow the same setting.
  11. Floor from Walls: connect wall centerlines back to the starting corner, then use Fill Enclosed Floor. The resulting floor region is inset inside the wall thickness and supports tile materials.
  12. Precision Drawing: choose Floor Area, Polyline, Rectangle, Arc or Wall. Click a starting point; move toward the next direction; enter the length in millimetres and click Add Segment or press Enter. Even in Free angle, Guides shows soft horizontal/vertical/parallel alignment; hold Alt or disable Guides to draw without magnetic assistance. Toggle Dimensions to show/hide labels on canvas and PDF. Ctrl+Z removes the previous point.
  13. Tile Library: starts empty. Upload one or several tile face photos under the same Tile Code. Sequence plays faces in order; Random uses a stable pattern until you click Shuffle. Reorder, edit or remove faces in the tile editor.
  14. Layer Groups: tick two or more layer checkboxes and choose Group Selected. Use the six-dot grip to drag groups or individual layers (including on iPad). Drop a layer on a group header to add it, or into the bottom drop zone to remove it from a group. Group layers remain together in drawing order. Original Outlines is protected above tile fills.
  15. White Mask: drag an ellipse for tables, click Auto Mask inside closed outlines, or use Polygon Mask for irregular shapes. Reorder drawing and tile layers in the Layers tab.
  16. Tile Settings: select a region and a tile photo. Adjust dimensions, joints, orientation, and pattern.
  17. Edit Area Geometry: select a region and tap a blue corner. Drag it using visible green horizontal/vertical/parallel guides and corner snapping; hold Alt to bypass snapping. Delete only that point in Properties (Delete key also works). Tap the green + at an edge midpoint to insert a vertex. Tap a line or dimension to edit its exact length in mm; double-click for a pop-up editor.
  18. Unlimited Workspace: blank projects can be drawn outside the starting artboard. Fit finds your drawn geometry, and PDF export frames the full project automatically.
  19. Move Tiles: drag inside a selected region to reposition grout lines. Blue corner handles change the polygon boundary.
  20. Summary: hover a region to highlight it, or click its card to jump there and edit it.
  21. Export CAD: download editable DXF geometry in millimetres. To obtain DWG, open the DXF in AutoCAD and use Save As DWG; direct native DWG download requires a conversion engine.
  22. Export: generate an A3 layout PDF with sharp native PDF text for material codes and quantities. Layout imagery uses high-resolution print rendering; source vector drawing is not yet a full native-vector PDF export.

Line detection from raster images can be imperfect around text or fine walls. Vector drawing line snapping is used when available in an original PDF. This tool is for layout visualization and estimated quantities, not production cutting.
Recover unfinished project?

Tile Layout Planner found an autosaved project in this browser. Recover your last work after a tab closes or a browser crash.

Autosaves are stored on this device, not in the cloud. They may be lost if the browser clears site data, storage is full, or you use private browsing. Keep a downloaded Backup for important projects.
Export to AutoCAD DWG

Editable CAD file is available as DXF (millimetres). This static web app cannot safely generate native DWG directly without a DWG conversion engine.

To get a real DWG: download Export CAD · DXF, open it in AutoCAD and use Save As → Drawing (*.dwg). Alternatively convert using ODA File Converter on a desktop.

Walls, openings, polylines, arcs, areas, and dimensions export as CAD geometry and text. Tile photos and raster backgrounds are not embedded. Original PDF vector reference lines are included when available.