aspect-grid-collageify v2 demo

Interactive demo

Drop images into the grid, edit the layout, and export a clean collage.

This demo highlights the core workflow: grid layout, collision rules, drag insertion, visual movement, shortcut resizing, hover toolbar actions, replace/delete, and PNG export.

Upload / drag insert Grid collision layout Hover edit toolbar Keyboard shortcuts Offscreen PNG export

01Drop images into any empty grid slot

02Move, swap, resize, replace, delete

03Tune ratio, gap, padding, shadows

04Export clean final PNG from Core

Core renderingFinal export excludes gridlines, selection outlines, and drag previews.

Editor controlsSelection, dragging, hover toolbar, and keyboard events live here.

Grid constraintsMove, resize, and insert operations respect columns and collisions.

Pure frontendImage processing and export run entirely in the browser.

Keyboard shortcutsCtrl/Cmd + click multi-selects, arrow keys move, Ctrl/Cmd + ↑/↓ resizes, and Delete removes.

Layout core

Canvas ratio

Image ratio

Insert preset

Grid columns: 8

Padding: 60

Image gap: 24

Visual style

Background color

Transparent background

Image radius: 24

Shadow blur: 0

Shadow offset: 0

Shadow opacity: 0.2

Show safe boundary

Show grid guides

Show empty slots

Show hover toolbar

Editor actions

Insert, replace, delete, and export call the real Editor/Core APIs. You can also use the in-canvas hover toolbar for image edits.

Images from Core

This panel reads directly from `core.getImages()` so you can inspect the current grid coordinates and span.