Collage Maker
A photo collage editor with 2–6 cell layouts, drag photos into cells, pan and zoom within a cell, swap cells by drag, adjustable gap and corner radius, and PNG export via canvas.
Preview
Drop a photo
Drag photos into cells · drag inside a cell to pan · drag ⇄ to swap
Layout
Gap8pxCorners10px
Photos
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| photos | CollagePhoto[] | — | { id, label, src? (image URL), scene? (drawn scene index) } shown in the tray. |
| layouts | CollageLayout[] | LAYOUTS | { id, name, rects: [x, y, w, h][] } in canvas fractions; eight layouts of 2–6 cells by default. |
| defaultLayout | string | "3-feature" | Starting layout id. |
| defaultCells | { photo?, scale?, x?, y? }[] | [] | Starting cell contents with zoom (1–3) and pan (fraction of the cell). |
| defaultGap | number | 8 | Gap and outer padding in px (0–24). |
| defaultRadius | number | 10 | Cell corner radius in px (0–32). |
| aspect | number | 4 / 3 | Collage width / height. |
| exportWidth | number | 1600 | Exported PNG width in px. |
| fileName | string | "collage" | Download name without extension. |
| onExport | (dataUrl: string) => void | — | Called with the PNG data URL on export. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.