Wood Tile Studio Gridless square crop planner
Local only
100%
Add mode: off · Drag a square to move · Space-drag or middle-drag to pan
Drop image here
Getting started

Make a tile layout in six steps

  1. 1
    Load an image

    Choose a file or drag it directly onto the canvas.

  2. 2
    Set the finished artwork size

    Enter the real width and height of the final composite. This gives every square a true physical size.

  3. 3
    Choose a square size

    Enter the wood-tile size, turn on Add squares, and click wherever you want each crop.

  4. 4
    Arrange the composition

    Drag squares freely, resize from the lower-right handle, and use edge snapping to make clean connections.

  5. 5
    Check the layout

    Use the numbered square list and exact X/Y fields to review placement. Overlap is automatically blocked.

  6. 6
    Export or print

    Download separate PNG crops, create exact-size print sheets, or package the full project as a ZIP.

Good habit: Save a project JSON before a long burn session so the full arrangement can be reopened later.
Editor guide

Placing, moving, and linking squares

Place

Set New square size, activate Add squares, and click repeatedly. Press Esc when finished.

Move

Drag any selected square. Use arrow keys for precise nudging; hold Shift for a larger step.

Resize

Drag the selected square’s lower-right handle, or enter an exact value in Square size.

Snap

Snapping aligns a square to artwork boundaries and neighboring square edges. Adjust the snap distance to change how strongly it catches.

Link

Squares that touch at an edge or corner are recognized as linked. Enable linked movement to drag an entire connected cluster.

Navigate

Scroll to zoom. Use Space-drag or the middle mouse button to pan. The Fit button restores the full artwork view.

Layout rule: touching is allowed; overlapping is not. Invalid moves are rejected so exported crops remain unambiguous.
Output guide

Print and export at the intended size

01

Selected PNG

Exports only the currently selected square. The file includes physical-resolution metadata at the chosen DPI.

02

Print sheets

Builds US Letter or A4 pages with tiles at exact CSS dimensions, labels, and a one-inch calibration line.

03

ZIP package

Includes every tile PNG, a labeled layout reference, CSV and JSON manifests, and print instructions.

Pixel calculation tile size in inches × output DPI = pixels per side

Example: a 2-inch tile at 300 DPI becomes a 600 × 600 pixel PNG.

Before cutting: print at 100% or Actual size, turn off Fit to page, and measure the calibration line with a ruler.
About this tool

Built for gridless tile-based artwork

Wood Tile Studio is a browser-based planner for artists who turn portions of a larger image into separate square pieces, then reunite those pieces as a composite work.

Private by design
Image editing and export happen locally in your browser. This app does not send your artwork to a server.

No account or installation
It is a static web app and works in current desktop versions of Chrome, Edge, Firefox, and Safari.

Made for experimentation
Use different tile sizes, negative space, touching clusters, and non-grid arrangements without altering the source image.

Hosting note

The downloadable web bundle can be uploaded as-is to a normal static host. Keep index.html, site.webmanifest, and the assets folder together.

Wood Tile Studio v2