Open source · Featured · 2024
Retool Simplified.
Drag, drop, done.
presentsAdmit one
Act I
The challenge
A drag-and-drop builder lives or dies on whether things land where you drop them. The real problem was pure geometry, turning a cursor’s pixel position into the right cell on a 12-column grid, and keeping a hand-drawn overlay perfectly aligned with the layout engine underneath.
Act II
What I built
A page builder on a 12-column grid: drag Text or Image components onto the canvas, move and resize them with eight-direction handles and collision prevention, preview across device frames, toggle markdown, and persist to localStorage with Ctrl+S.
Intermission, the demo
The product, playing itself
the core loop, drag a component, watch it snap to the 12-column grid
The cast
What actually makes it work
Read the card, then flip it to watch the mechanism run.
0x01
Pixel-to-grid drop math
A dropped cursor position converts to grid coordinates accounting for padding, margins, and a ResizeObserver-measured column width, so components land where you release them.
how it works
Pixel-to-grid drop math
0x02
Pixel-aligned grid overlay
A hand-rendered overlay stays exactly aligned with react-grid-layout’s internal geometry as columns and rows change.
how it works
Pixel-aligned grid overlay
0x03
Device-preview transformation
Desktop layouts remap to a tablet clamp or a mobile single column inside framed viewports, so one design previews across breakpoints.
how it works