Introducing Lattice Editor: Visual Game Development in Your Browser

I'm excited to announce the release of Lattice Editor - a visual game development tool that runs entirely in your browser! This editor is built on top of the game engine we've been developing throughout the Built From Scratch series.

What is Lattice Editor?

Lattice Editor is a browser-based game development tool that provides a visual interface for creating and managing game entities using the Entity Component System (ECS) architecture. Think of it as a simplified Unity or Godot editor, but built from scratch with web technologies.

Key Features

🎨 Modular Panel Layout

The editor features a professional, resizable panel layout inspired by modern game engines:

Hierarchy Panel: View and organize your game entities in a tree structure
Inspector Panel: Edit properties of selected entities and components
Viewport: See your game world and interact with entities
Assets Panel: Import and manage sprites, sounds, and other game assets

Each panel can be resized to fit your workflow, giving you complete control over your workspace.

🧩 Entity Component System

At the heart of Lattice Editor is the ECS architecture we built in episodes 4 and 5 of the game engine series:

Entities: Game objects that exist in your world
Components: Data containers that define entity properties (position, sprite, physics, etc.)
Systems: Logic that operates on entities with specific components

This architecture provides incredible flexibility and performance, allowing you to create complex game behaviors by composing simple components.

⚡ Live Updates

One of the coolest features? The editor automatically updates whenever we push changes to the main branch of the GameEngineSeries repository. Thanks to GitHub webhooks and our automated build pipeline, you're always using the latest version.

Built with the BHVR Stack

Lattice Editor is built using the same stack we use for the game engine:

Bun: Lightning-fast JavaScript runtime and package manager
TypeScript: Type-safe development with excellent IDE support
Vite: Instant hot-reload and optimized builds
React: Component-based UI with resizable panels (react-resizable-panels)
Tailwind CSS: Utility-first styling for rapid development

Try It Now!

The editor is live and ready to use at codingbutter.com/lattice. You can:

Create entities and add components
Organize your game hierarchy
Inspect and modify entity properties
Import assets for your game

What's Next?

This is just the beginning! Upcoming features include:

Sprite Rendering: Visual representation of entities in the viewport
Input System: Mouse and keyboard controls for entity manipulation
Component Templates: Pre-built components for common game objects
Scene Management: Save and load different game scenes
Physics Visualization: See collision boxes and physics properties
Export to Project: Download your game as a standalone project

Open Source

Like everything in the Built From Scratch series, Lattice Editor is completely open source. You can view the code, learn from it, and even contribute on GitHub:

Repository: github.com/CodingButter/GameEngineSeries
Editor Source: client/ directory
Engine Packages: packages/ directory

The Journey So Far

We've come a long way from episode 1 where we set up workspaces. Here's what we've built:

Episode 1: Workspace setup with Bun
Episode 2: Canvas 2D renderer with update/render loops
Episode 3: Core engine package with timing system
Episode 4: Entity Component System architecture
Episode 5: Editor UI foundation with resizable panels

And now we have a working visual editor!

Learn More

Interested in learning how we built this? Check out the full video series on YouTube:

Get Started

Ready to build your first game? Head over to codingbutter.com/lattice and start creating!

Have questions or feedback? Drop a comment on YouTube or open an issue on GitHub. I'd love to hear what you think!

Happy game dev! 🎮