Building a Browser-Based Voxel Editor with React Three Fiber

I have been building VoxelDraft, a voxel editor that runs entirely in the browser without an account or installation.

The editor supports block painting, layers, keyframe animation, GIF recording, local projects, and exports for OBJ/MTL, GLB, VOX, Minecraft Schematic, and Roblox RBXL. This post covers the architecture choices that kept those features manageable.

Keep edit data serializable

The editable model is an array of plain voxel records rather than a collection of Three.js objects:

type VoxelData = {

Building a Browser-Based Voxel Editor with React Three Fiber

Related reading

I built a browser-based pixel-art & animation editor with Vue, Laravel and AI

I Built a Real-Time Simulation Game in a Single HTML File (Without React or…

I Built a Browser Game Engine Inside WordPress Without Canvas or WebGL. Here's…

How I Rebuilt an RPG Map Editor with Rust, React, and WASM

Building a Browser MMD Studio with Three.js

Building a real-time browser MMORPG with Three.js, Rust/Wasm, and Durable…