A single-file, drag-and-drop visual builder for HTML/CSS layouts — design elements on a canvas and get clean, ready-to-use HTML and CSS code in return.
- Drag-and-drop canvas — add and freely position
divelements, resize them with on-canvas handles - Multiple canvases/frames — work on more than one layout at once, each with its own layer list
- Layers panel — rename, select and delete elements from a dedicated sidebar
- Visual property editor, including:
- Position and size (width/height)
- Border radius — uniform, per-corner, or fully rounded ("circle" mode)
- Background color (color picker)
- Automatic
z-indexbased on stacking order
- Live code generation — HTML and CSS tabs update in real time as you build
- One-click copy of the generated code
- Clear all to reset the canvas
- 100% client-side — no build step, no dependencies, no data leaves your browser
Or just open index.html in any browser.
- Drag elements onto the canvas to start building your layout.
- Select an element to edit its position, size, border radius, and background color in the properties panel.
- Use the Camadas (layers) panel to rename, reorder, or delete elements.
- Switch to the HTML / CSS tabs to see the generated code, and hit Copiar to copy it.
- Use Limpar tudo to start over.
- Vanilla HTML, CSS and JavaScript — no frameworks, no build tools
- Custom canvas engine (drag/resize handles, per-corner border radius, live code generation) built from scratch
MIT — feel free to use, modify and share.