Print Composer v3

Print Composer — how to use

Getting started

Drag and drop images onto the canvas or sidebar, or click the drop zone to browse. Images appear in the sidebar list where you can reorder them by dragging.

Quick presets

Use the preset buttons (2×2, 2×4, 3×3 etc.) at the top of the sidebar to instantly set a fixed grid layout. You can then fine-tune columns and rows in the toolbar.

Layout

Auto tile — composer calculates the best grid for the number of images you have.
Fixed grid — you set exact columns and rows (C / R in the toolbar).
Clone × N — repeats the first image to fill every cell on the sheet.
Set copies per image using the number input next to each image in the sidebar to repeat specific images multiple times.
If you have more images than fit on one page, the composer automatically paginates — scroll down to see page 2, 3, etc. Use the ◀ ▶ buttons to jump between pages.

Interacting with images on canvas

Click an image cell to select it and rotate it 90° clockwise. Click again to keep rotating.
Dpad — when a cell is selected, a 3×3 dpad appears in the bottom-right corner:
- ▲ ▼ ◀ ▶ — nudge image within its cell
- ↻ (center) — rotate 90°
- + / − — zoom the image within its cell (5% steps)
Keyboard shortcuts (when a cell is selected):
- Arrow keys — nudge in any direction
- [ / ] — rotate counter-clockwise / clockwise
- = / - — zoom in / out
- 0 — reset all transforms (nudge, zoom, rotation) for selected image
The selected image is also highlighted in the sidebar list.
Click the ↺ reset icon next to any image in the sidebar to reset its transforms.

Inline editing

Title — click the title text directly on the sheet to edit it. It starts as "Untitled" by default.
Timestamp — toggle "Auto-add timestamp" in the sidebar. It appears next to the title on the canvas.
Captions — each image has a caption bar at the bottom pre-filled with the filename. Click any caption on the canvas to type a new one inline. Use "Reset all captions to filenames" to revert.

QR code

Paste a URL or any text in the QR section. Choose to apply it to every image (small corner overlay), the sheet corner only, or just the first image.

Metadata overlay

Click ⊕ meta in the toolbar to toggle pixel dimensions on each image. This shows for reference only and does not print.

Fit to screen

Click ↕ fit in the toolbar to automatically calculate the zoom level so the sheet fills your current window. Useful after changing paper size.

Print & PDF

Click ⎙ Print (or Cmd/Ctrl+P). A new window opens sized to exact paper dimensions. In your print dialog, choose actual size / no scaling. To save as PDF, choose "Save as PDF" from the printer dropdown.

Saving & loading configurations

Use ↓ Save config (JSON) to download the current layout as a .json file. This includes paper settings, margins, QR, title, captions, image order, and copies.

Use ↑ Load config (JSON) to restore a saved config. Note: images themselves are not stored in the JSON (browser security), but all settings and caption text are preserved. Re-add the same images after loading.

Your last-used settings are automatically saved in the browser and restored when you reopen the tool.

Building a template library

Save your favorite configurations as JSON files and store them in a folder. Suggested naming: YYYY-MM-DD_description.json — e.g. 2026-06-05_3x4-birding-atlas.json

Rearranging images

Sidebar list — drag any row up or down to reorder images in the queue.
Canvas swap — drag any image cell and drop it onto another cell on the same page to swap their positions.
Sidebar → canvas — drag an image from the sidebar list and drop it directly onto a canvas cell to move it to that slot.

Keyboard shortcuts

Cmd/Ctrl + P — Print
Cmd/Ctrl + R — Redraw layout
Escape — Close this panel / deselect cell
Arrow keys — Nudge selected image
[ ] — Rotate selected image
= - — Zoom selected image
0 — Reset selected image transforms

Changes & backlog

Print Composer · local: /Users/briji/vibe-coding/pet-projects/print-composer/index.html

Backlog

Template library

Hosted config folder + toolbar dropdown to load saved JSON layouts instantly. Sharing-friendly URLs per template. Needs Cloudflare KV backend.

CSV → printable QR cards

Upload a CSV where each row becomes a card — name, description, URL auto-encoded as QR. Template-driven, print-ready. May live here or as standalone tool.

Bulk export as ZIP

Export all pages as PNG or JPG in a single ZIP download. Per-page export already works — this adds the one-click all-pages option.

Log

2026-06-06	Canvas drag-to-swap — drag cells within a page to swap positions; drag sidebar images onto canvas cells to reorder. Click-to-rotate no longer fires after a drag. Fill mode print fix — replaced `object-fit:cover` with explicit cover dimensions so fill mode prints correctly across all browsers. This changes panel added; backlog moved out of help.
2026-06-06	Auto-fit zoom on rotate — when scale mode is Fit, rotating auto-calculates cellZoom so image always fills the cell. Resets to 1 on return to 0°/180°. PNG/JPG export via html2canvas, retina scale, filename matches JSON convention. Paper sizes: 4×6″, 5×7″, Index 3×5″, Index 4×6″ added. Fit-to-screen fixed to round down (prevents sheet overflow).
2026-06-06 initial deploy	Bug fixes from v3: title tag, duplicate id, capsz missing from applyConfig, help text for dpad, capSzPx/capH consistency, print window fonts. New: localStorage auto-save, keyboard shortcuts (arrows, [ ], = -, 0), fit-to-screen button, reset transforms per image, quick presets (2×2 → 4×6), clear all captions, sidebar highlights selected cell, toast notifications, drag sidebar reorder. Deployed to print-composer.pages.dev
2026-06-05 v3 built	v3: captions outside image cells, rotate without re-layout, dpad replaces nudge bar (left/right nudge + per-cell zoom +/−). v2: click-to-rotate, metadata toggle, inline canvas title, inline captions, multi-page pagination, save/load JSON, help panel. v1: core layout engine, drag & drop, paper sizes, margins/gap/padding, scale modes, QR code, sheet title, print output.