How to Build and Export a Voxel Model in Layoutit Voxels

Layoutit Voxels is a browser-based voxel editor that builds models from HTML cuboids styled with CSS grid and 3D transforms. To build and export a model: place voxels with the add/fill/paint/erase tools and a shape selector, size the workspace with the grid and camera controls, then export through VOX, CSS, TXT, or PNG — or use Copy, Embed, Open Codepen, and Download Code. No installation is described on the page; the editor loads directly in the browser.

Building the Model

Tools and shapes

The toolbar exposes four editing modes — add, fill, paint, and erase — plus a shape selector with four options: cube, slab, wedge, and spike. The shape you pick determines the geometry of each voxel you place, so choose it before you start laying down volume.

• Add places new voxels where you click.
• Fill covers a region in one action, useful for solid blocks.
• Paint recolors existing voxels without changing their shape.
• Erase removes voxels.

Palette and texture

Two appearance controls sit alongside the tools: a palette selector (Endesga 32, DB32, Pico8) and a texture selector (Kenney, Astropoodle). Pick a palette first so your paint colors stay consistent across the model.

Grid and camera

The grid controls set rows, cols, and depth, with a reset to defaults option. Set these before detailed work — changing dimensions mid-build affects the working volume. A camera section and a config panel handle the viewing angle and editor settings. A View Random button generates a random model, which is a quick way to see what the tool can produce before committing to your own build.

Editing safeguards

Undo and Redo step through your edit history, and Restart clears the session. The status bar tracks voxels, facets, and approximate size (~KB), so you can watch model complexity grow as you work.

Exporting and Sharing

The export menu offers four formats, and a separate set of actions handles code and sharing:

Choose based on the destination: VOX if another voxel tool needs to import the model, CSS or Download Code if you want to embed the HTML/CSS result in a web project, PNG for a static image, and Embed or Open Codepen for sharing or iterating on the code.

Verifying the Result

Before exporting, check the status bar: the voxels and facets counts confirm your model contains what you expect, and the size figure gives a rough sense of the output weight. Rotate the camera to inspect the model from multiple angles, since a shape that looks correct head-on can have gaps or stray voxels from another view. If something is wrong, Undo back to the last good state rather than restarting.

Common Snags

• Wrong shape placed repeatedly — the shape selector persists between placements; confirm it before adding a run of voxels.
• Grid too small for the design — rows, cols, and depth define the working volume, so set them early; resizing later can clip or shift your work.
• Export looks different from the editor — CSS and code exports reproduce the model as HTML cuboids, while PNG is a rendered image; pick the format that matches how the result will be used.
• Losing work — there is no account or cloud save described beyond Save to Gallery, so download the code or export a file before closing the tab.