What Is Layoutit Voxels - CSS Voxel Editor?

Updated

Layoutit Voxels is a browser-based voxel editor that builds 3D models out of HTML cuboids styled with CSS grid and 3D transforms. You use it when you want to sketch or assemble blocky 3D models and then take the result as CSS/HTML code, a VOX file, a text file, or a PNG image. It is aimed at people who want a lightweight, code-friendly voxel workflow rather than a full 3D modeling suite.

What you can do in the editor

The toolbar exposes the core editing actions directly:

  • Add, fill, paint, erase — place new voxels, flood-fill an area, recolor existing voxels, or remove them.
  • Shape selection — build with cube, slab, wedge, and spike shapes, so models aren't limited to plain blocks.
  • Palettes — switch between Endesga 32, DB32, and Pico8 color sets.
  • Textures — apply Kenney or Astropoodle texture sets.
  • Grid and camera config — adjust rows, cols, and depth, reset to defaults, and control the camera view.
  • History — Undo and Redo for edits, plus Restart to clear the scene.

A live status line reports voxels, facets, and approximate size in KB, which helps you keep an eye on how heavy the generated model is.

Output formats and sharing

The editor's import/export and sharing options are the main reason to pick it over a generic voxel tool:

Option What it gives you
VOX Standard voxel model file for use in other voxel tools
CSS The CSS/HTML representation of the model
TXT Plain-text export
PNG Image export
Copy / Embed Copy the result or embed it elsewhere
Open Codepen Jump straight into a CodePen with the code
View on Github / Download Code Access the source or download the generated code
Save to Gallery Store the model in the site's gallery

This makes the tool useful for two different jobs: producing a voxel asset (VOX/PNG) or producing embeddable web code (CSS/HTML, CodePen, embed).

When it fits and when it doesn't

Choose Layoutit Voxels if your goal is a small, block-based model that you want to express as CSS/HTML or share as code, and you're comfortable working in a browser with a grid-and-camera interface. The shape set (cube, slab, wedge, spike) and fixed palettes keep the workflow constrained and fast.

It is less suitable if you need high-detail sculpting, free-form meshes, or a full animation pipeline — the tool is explicitly a CSS voxel editor, and its output is tied to HTML cuboids and CSS transforms.

Getting started

  1. Open voxels.layoutit.com in a browser.
  2. Set your canvas with rows, cols, and depth under the grid config, or keep the defaults.
  3. Pick a shape (cube, slab, wedge, spike), a palette, and a texture.
  4. Use add to place voxels, paint to recolor, fill to flood an area, and erase to remove. Use Undo/Redo freely.
  5. Check the voxels/facets/size readout as you go.
  6. Export with VOX, CSS, TXT, or PNG, or use Copy, Embed, Open Codepen, or Download Code to move the result into your project.

The version shown in the interface is 0.1, so expect an early-stage tool; save or export work you want to keep rather than relying on the session alone.