CSS box playground

Click any div to select it. Drag its body to move it, drag the corner handle to resize, or type exact values below. "Add div inside" nests inside whatever is currently selected, so you can build boxes as deep as you like. Rename elements to get real class names in the exported CSS. Use the tabs below to design multiple pages side by side — each tab keeps its own layout, undo history, and CSS. Shortcuts: arrows nudge, Shift+arrow nudges by 10px, Delete removes, Ctrl/Cmd+D duplicates, Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z undo/redo.

Zoom 100%
Insert another page as a component
Editing: box

Full CSS (all elements, with position)



  

HTML structure (nesting — see what's inside vs. outside each div)

Indentation shows real nesting: a box indented under another is a child, inside that div. A box at the same indent level as another (not nested under it) sits outside it, as a sibling.



  

Layout JSON (save/load your work)

Click "Export current" to fill this box with your design as JSON, then copy it somewhere safe. To restore later, paste JSON here and click "Apply JSON below". "Download HTML" saves a standalone .html file with your layout's markup and CSS baked in.