Click the + Box button in the toolbar at the bottom. Choose a size and color before clicking.
Click and drag boxes to position them. They'll snap to a grid automatically. Hold Alt to disable snapping.
Select a box and use the Properties panel on the right to change colors, opacity, and shadows.
Use the Layers panel on the left to rename, reorder, hide, or lock boxes. Drag layers to change stacking order.
When ready, use the Export section at the bottom right. Choose SVG for vectors or PNG for images.
| Undo | ⌘Z |
| Redo | ⌘⇧Z |
| Delete selected | Delete or Backspace |
| Select all | ⌘A |
| Deselect all | Escape |
| Copy | ⌘C |
| Cut | ⌘X |
| Paste | ⌘V |
| Duplicate | ⌘D |
| Move by 32px | ↑↓←→ |
| Move by 16px | ⇧ + Arrow |
| Move by 8px | ⌘ + Arrow |
| Move by 1px | Alt + Arrow |
| Pan canvas | Space + Drag |
| Zoom in/out | ⌘ + Scroll |
| Multi-select | ⇧ + Click |
| Open help | ? |
Select a single box to reveal resize handles. Drag the W, D, or H handles to adjust width, depth, and height. Or type exact values in the Properties panel.
Select a box and click any color swatch in the Properties panel. Use the opacity slider to create transparent, glass-like effects.
Each box can have its own shadow. Toggle shadows globally with the Shadow button, or customize per-box in Properties: adjust opacity for darkness and height for offset.
Select multiple boxes and click + Group to create a visual group. Customize the group's border style, padding, and fill color in Properties.
View all boxes on the left. Click to select, drag to reorder (top = front), hover for visibility/lock controls. Double-click names to rename.
Select 2+ boxes to see alignment options. Align boxes relative to the first selected, or distribute them evenly.
Export as SVG (vector, scalable) or PNG (raster, with transparency). Choose 2x or higher for crisp images. Toggle "Include grid" if needed.
Select the box and press ⌘D, or click the Duplicate button in the floating toolbar. The copy appears offset and selected.
Your work is automatically saved to your browser's local storage. It persists between sessions. To backup or share, use Export to download a file.
Hold ⇧ Shift and click each box to add it to the selection. Or press ⌘A to select all.
In the Layers panel on the left, drag and drop layers. Items higher in the list appear in front of items below.
Hover over the layer in the Layers panel and click the eye icon. Hidden boxes won't appear in exports.
Hover over the layer and click the lock icon. Locked boxes can still be selected but can't be moved or edited.
Select the box and use the Opacity slider in the Properties panel. 100% is fully solid, 0% is invisible.
Click the Fit button in the top-right zoom controls to reset zoom and centering.
SVG is a vector format—infinitely scalable, editable in design tools. PNG is a raster format with transparency, better for presentations and social media.