Editor UI Foundation
Episode 5 builds the editor UI with resizable panels—toolbar, hierarchy, inspector, assets, and controls. We introduce GameProvider for state management and create a professional layout that makes the engine feel like a real tool.
Making It Look Like an Actual Editor
Up until Episode 5, we had the engine working. We had ECS. We had rendering and game loops. But the editor? Just a blank screen with a canvas in the middle. No controls. No panels. Nothing that looked like a real tool.
Episode 5 changes that. This is where we build the UI foundation—the layout, the panels, the structure that makes it feel like you're working in an actual game editor.
The Panel Layout
Game editors have a familiar structure. Unity, Unreal, Godot—they all have the same basic layout: a toolbar at the top, a hierarchy on the left, a canvas in the center, an inspector on the right, and asset/control panels at the bottom.
That's the layout we're building. Not because it's trendy, but because it works. Decades of game development have proven this structure is intuitive and efficient.
We're using react-resizable-panels to handle the layout. It gives us draggable dividers so you can resize panels on the fly. Want more space for the canvas? Drag the divider. Need to see the inspector? Drag it open. It's flexible and user-controlled.
The Five Core Panels
We built five panels in this episode:
ToolBar — Sits at the top. Holds editor controls like play/pause, save, and settings. Right now it's basic, but this is where global actions will live.
Hierarchy — Lists all entities in the scene. You can see what exists, what's nested, and eventually select entities to inspect or modify.
Inspector — Shows details about the selected entity. Right now it's a placeholder, but this will eventually display component data and allow inline editing.
Assets — Where imported assets (sprites, sounds, scripts) will live. Not fully wired up yet, but the structure is there.
Controls — Houses editor-specific tools like transform controls, grid snapping, and viewport settings.
Each panel is a React component. They're modular, reusable, and easy to extend. If we need a new panel later, we just drop it in.
The GameProvider
To manage state across panels, we introduced GameProvider. It wraps the editor and exposes the game instance via React context.
This means any panel can access the world, query entities, or trigger engine actions without prop drilling. The hierarchy can read entities. The inspector can modify components. The toolbar can start/stop the engine. All through a single, centralized provider.
This pattern keeps state management clean. No messy global variables. No spaghetti code passing props ten layers deep. Just context.
ResizeHandle Component
The dividers between panels aren't just lines. They're interactive handles that let you resize panels.
We built a custom ResizeHandle component that integrates with react-resizable-panels. It provides visual feedback (hover states, drag cursor) and ensures smooth resizing without janky reflows.
Small detail, but it makes the editor feel polished. Details matter.
Why This Matters
This episode isn't about engine features. It's about usability. A powerful engine is worthless if the editor is clunky and hard to use.
By building a proper UI foundation now, we're setting up the editor for long-term scalability. Adding new panels is easy. Extending existing ones is straightforward. The structure is clean and maintainable.
This is the point where the engine starts feeling like a real tool instead of a tech demo.
What's Next
With the UI foundation in place, the next steps are wiring up functionality—entity selection, component editing, asset importing, and input handling. The structure is ready. Now we fill it with features.