Thanks for bearing with me on the SEO-bot title — I wish I could have been able to find something this a week ago, so am trying to make it easier for the next person :)

I wanted to make a layout plan, and my mind was working in “pixels.” I thought a simple interface that lets you draw on a pixel grid would work well.

This was also a good chance to test out the latest in vibecoding technologies, although there ended up being some complex edges that required artisanal code. So this was maybe 4-5 hours total — 80% v0 vibecoding, 20% Cursor/hand-coding.

Enjoy! Feature list below the iframe. (And sorry, no mobile support yet)

Features:

  • Fullscreen mode with button or ‘F’ key shortcut for distraction-free planning
  • Color selector with default (Flexoki!) colors, as well as “used in design” colors
  • Select pixel “length” in feet/meters/etc. for display purposes
  • Fill/rectangle tool that shows size of fill
  • Line tool that shows length of line
  • Text tool that places resizable text on the grid
  • Select / measurement tool that can select cells for movement, copying, or deletion; select and move text; show “measurement” of selected area
  • Keyboard shortcuts (f, l, t, v)
  • Undo/redo functionality with 50 move history
  • Zoom in and out, with “center” tool
  • Ability to download image of the plan
  • Ability to download/copy text representation of the plan for re-importing

Some things I might add:

  • Mobile support
  • Multiselect
  • Improved zoom/boundary behavior
  • Tooltips
  • Selecting an area should also select text
  • Other shapes

Send any feedback!

Looking for more to read?

Want to hear about new essays? Subscribe to my roughly-monthly newsletter recapping my recent writing and things I'm enjoying:

And I'd love to hear from you directly: andy@andybromberg.com