How to Use Quilt Builder

Quilt Builder helps you plan a quilt layout on a grid. You pick a finished quilt size, choose how large each grid unit is in inches, enter how many pieces (tiles) you want of each size, and then generate a layout you can drag-adjust. When you’re done, export a PNG/SVG or save your project.

Video tutorial (coming soon)

A short walkthrough video is on the way.

1) Set your quilt size

Use Common size to pick a preset finished size (Throw, Twin, etc.). This sets the grid width/height for you.
If you want a custom size, set Width and Height directly (in inches).
Tip: if you change Unit size, the grid will rescale to keep the inch size consistent.
Tip: selecting King automatically zooms the view scale to 40% so the full grid fits better on screen.

2) Choose sizing inputs (inches)

Unit size: how many inches each grid square represents (2–5 inches). This drives the inch labels and inch-based sizing.

3) Enter tile counts

In Tile Counts, each input is a rectangle size in inches: columns are width, rows are height.
Example: a 8"×12" tile is shown as 8" wide and 12" tall (exact numbers depend on your Unit size).
Use Clear counts to reset all tile counts back to 0.
If you request too much total area to fit in the grid, Quilt Builder will warn you before generating.

4) Create tiles (to the Holding Bay)

Click Create Tiles to add any missing tiles into the Holding Bay (it does not move tiles that are already on the grid).
This is useful when you want to start by manually placing tiles, or you want to edit colors/numbers in the bay before packing.
Use Clear to move any currently placed tiles back into the Holding Bay (so nothing gets deleted).

5) Shuffle a layout (auto-pack)

Click Shuffle to auto-pack your requested tiles into the grid.
If it can’t fit everything, you’ll see a message and the extra tiles will stay in the Holding Bay. You can fix this by increasing the grid size, reducing tile counts, or shuffling again.

6) Edit the layout (drag & holding bay)

Drag tiles around the grid. They snap to the grid and won’t overlap.
Snap to best fit: When you drag over the grid, Quilt Builder will try nearby cells and snap to the closest valid placement.
To temporarily remove a tile, drag it off the grid. It will go into the Holding Bay.
To place a tile from the holding bay, drag it back onto the grid. You’ll see a placement preview; if the space is occupied the preview will show as invalid.
Floating drag preview: When dragging a tile from the holding bay, a translucent tile follows your cursor so it’s easier to aim.
Sticky drag (optional): Turn on Sticky drag in the Holding Bay header, then click a holding-bay tile once to “carry” it and click empty grid space to place it. Press Esc to cancel.
Lock a tile: Shift-click a tile on the grid to lock/unlock it. Locked tiles stay fixed when you Shuffle.
Color a tile: Click a tile (grid or holding bay) to select it, then use the floating Tile color panel (left side) to choose a color. Tiles with a striped look are “unassigned” until you assign a color.
Unassigned Appearance: Use the dropdown in the Actions area to choose how unassigned (striped) tiles look: Colorful, Grayed, orBy size.
Resize a tile: With a tile selected, use the Size (in) fields in the Tile color panel to change its width/height. If the tile is on the grid, Quilt Builder will try nearby positions so the tile can expand left/right/up/down depending on available space. If there’s no room, resizing will be blocked.
Assign all colors: Use Assign all colors in the Actions area to mark every tile as assigned (removes striping everywhere).
Unassign: With a tile selected, click Unassign in the Tile color panel to revert it to its default color and bring back striping.
Tile # (optional): With a tile selected, use Tile # in the Tile color panel to assign a number label (shown as “#N” on the tile when labels are enabled).
Colors persist: Tile colors stay with tiles when you click Shuffle.
Center highlight: The middle cell (odd grids) or middle 2×2 cells (even grids) are shaded slightly to help you find the grid center.

7) Labels and view scale

View scale zooms the on-screen grid for easier editing. It does not affect export quality.
Tile labels controls what is shown on tiles: Off, Inches, Number (#), or Both.
Export labels are chosen separately next to the export buttons: No labels, Inches, Number (#), or Both.

8) Export and save/load

Export PNG: a flat image (great for sharing).
Export SVG: a scalable vector (great for printing or editing in design tools).
Save Project downloads a JSON file that includes your grid size, tile counts, and current layout (including tile colors and numbers).
Load Project restores a saved JSON.
Tip: exports and project saves are based on the placed layout in the grid — use Shuffle (or manually place tiles) first.

Troubleshooting

“Cannot shuffle” warning: your inputs can’t fit (often total tile area exceeds grid area, or a requested tile is larger than the grid).
“Space occupied” while dragging: the placement would overlap another tile.