voxels.layoutit.com

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.

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:

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.

Layoutit Voxels (voxels.layoutit.com) supports four import/export formats — VOX, CSS, TXT, and PNG — and five ways to reuse or share a model: Copy, Embed, Open Codepen, Download Code, and Save to Gallery. The right choice depends on whether you want to keep editing the voxel model, hand the code to a developer, or just show the result to someone. The editor's toolbar lists these options directly, so no account or setup step is described on the page.

Import and export formats

The toolbar groups the four formats under Import and Export, meaning each can move a model in or out of the editor.

The page describes the editor as "powered by CSS grid and 3D transforms" and built with "HTML cuboids," which explains why CSS is a first-class export: the model is CSS. VOX is the format to pick when you plan to come back and keep sculpting, because it preserves the voxel structure rather than a rendered result.

Sharing and reuse options

Beyond file export, the toolbar offers five output paths:

• Copy — puts the model's code on your clipboard so you can paste it into your own project.
• Embed — produces embeddable output so the model can appear inside another page.
• Open Codepen — sends the code to CodePen, where you can edit and preview it in a browser-based coding environment.
• Download Code — saves the generated code as a file rather than copying it.
• Save to Gallery — stores the model in the site's gallery, a public-facing way to keep and show a build.

A practical rule: use Copy or Download Code when you're moving the model into your own site, Open Codepen when you want to tweak the code without local setup, and Save to Gallery when the goal is to display the model rather than reuse its code.

Choosing based on your next step

• Continuing to edit the model later → export VOX.
• Handing it to a web developer → Download Code or Copy the CSS.
• Tweaking the code immediately → Open Codepen.
• Showing a static preview → export PNG.
• Publishing a viewable model on the site → Save to Gallery.

The editor also shows live counters — voxels, facets, and approximate file size in KB — which are useful before exporting, since a larger model means a heavier CSS file. If size matters for your page, check those numbers before choosing CSS over PNG.

Practical notes

The page identifies the tool as version 0.1, so treat these options as the current set rather than a fixed feature list. No pricing, login requirement, or account limitation is stated on the page, so don't assume gallery saving or embedding is gated — but verify in the tool before relying on it for a published project. For a first run, build a small model, export both VOX and CSS, and confirm the CSS renders as expected in your target page before scaling up.

Layoutit Voxels gives you three palettes (Endesga 32, DB32, Pico8), two texture sets (Kenney, Astropoodle), and four shape tools (cube, slab, wedge, spike). You pick a palette and texture from the editor's side controls, then choose a shape before placing voxels on the grid. The palette controls which colors you can paint with, the texture changes the surface look of your voxels, and the shape determines the geometry of each block you add.

Palettes: Three Fixed Color Sets

The editor's palette selector lists three options:

These are preset palettes rather than free color pickers, so the colors you can paint with come from whichever set is active. Switching palettes changes the available color choices for the paint tool. If you want a consistent retro look, pick the palette first and build within it; changing palettes later can shift how your model reads.

Textures: Kenney and Astropoodle

Two texture options appear in the texture selector: Kenney and Astropoodle. Textures affect how voxel surfaces are rendered, so the same shape and color can look different depending on which set is active. Choose a texture early if surface appearance matters to the final model, since it applies across the voxels you build.

Shapes: Four Geometry Tools

The shape selector offers four voxel geometries:

• Cube — the standard full block, the default building unit.
• Slab — a flatter block, useful for floors, steps, and thin details.
• Wedge — a sloped block for ramps, roofs, and angled edges.
• Spike — a pointed block for tips, cones, and sharp details.

Shape is chosen before placing, alongside the add, fill, paint, and erase tools. Mixing shapes is how you get beyond a plain blocky silhouette: slabs for ground layers, wedges for transitions, spikes for accents.

How These Options Work Together

The three settings are independent but combine on every voxel you place. A practical order of work:

1. Pick a palette so your color range is fixed.
2. Pick a texture so surfaces render consistently.
3. Select a shape, then add, fill, or paint voxels on the grid.

The editor tracks your model with counters for voxels and facets plus an approximate size, so you can watch complexity grow as you mix shapes. When the model is ready, the toolbar supports export as VOX, CSS, VOX TXT, and PNG, plus Copy, Embed, Open Codepen, and Download Code — so the palette, texture, and shape choices carry through to whatever output format you choose.

Choosing Between Them

• Want a specific retro color feel? Start from Pico8 or DB32 rather than Endesga 32, and stay within that palette.
• Building mostly flat terrain or architecture? Lean on slabs and wedges; cubes alone will look blocky.
• Adding fine detail or silhouettes? Use spikes sparingly for tips and accents.
• Unsure about texture? Try both Kenney and Astropoodle on a small test model before committing to a larger build.

The palette, texture, and shape selectors are visible in the editor's main control area, so you can change any of them at any point and see the effect on the model immediately.

Layoutit Voxels builds a model from HTML cuboids and exports the CSS that positions them in 3D, so you can paste the result into a web page. The editor describes itself as "a voxel editor powered by CSS grid and 3D transforms" that lets you "build models with HTML cuboids." In practice, each voxel becomes an element, and the exported stylesheet carries the grid placement and transform values that give the model its shape. This explanation covers the mechanism, what the export contains, and how to use it.

The core mechanism: cuboids on a CSS grid

The editor does not generate a 3D model file for a renderer. It works in the browser's own layout system:

• HTML cuboids are the building blocks. A voxel is drawn as a box-shaped element rather than a mesh.
• CSS grid provides the coordinate space. Rows, columns, and depth settings in the editor's config panel define the grid the model sits on.
• 3D transforms place and orient each cuboid within that space, which is what makes a flat grid read as a three-dimensional object.

The toolbar's shape options — cube, slab, wedge, spike — indicate that not every cell is a full cube; the export has to account for the chosen shape as well as its position.

What the CSS export contains

The interface offers Export VOX, CSS, VOX TXT, PNG, Copy, Embed, Open Codepen, and Download Code. The CSS path is the one that produces web-ready styling: the styling needed to render the voxel model, which you can copy to the clipboard or download as code. The other formats serve different purposes — VOX and VOX TXT are model-data formats, and PNG is an image — so choose CSS when the goal is a live, styled element on a page rather than a file to open elsewhere.

The editor also reports voxels, facets, and size (~KB) for the current model. These are useful before exporting: a high voxel and facet count means more elements and more CSS, which is the main thing to watch if the model will sit on a content-heavy page.

Using the exported code on a web page

1. Build or import a model, then check the voxel and facet counts in the status area.
2. Use Copy for the CSS, or Download Code to save it.
3. Add the styling to your page and place the model's markup where you want it to appear.
4. Verify in the browser that the cuboids render in the intended arrangement; if the model looks flat or misaligned, the grid and transform rules are the first place to check.

For a quick trial without touching your own project, Open Codepen loads the work into a pen, and Embed is the option to reach for when the model should appear inside another page rather than be maintained as separate code.

Deciding whether this approach fits

CSS cuboids suit decorative or illustrative models on a page you already control, where the model can share the page's styling and needs no separate 3D library. They are a poorer fit when the model is large or needs real-time interaction beyond what CSS transforms provide — the voxel and facet counters are your guide here, since they scale with the exported code's weight. If you need the model in a dedicated 3D pipeline instead, the VOX export is the more appropriate output.