public / Recent
Physics Sandbox
React-driven editor UI connected to a custom Canvas and Matter.js physics world.
A solo portfolio project exploring how React, Canvas, Zustand and Matter.js can work together inside a small physics sandbox editor with commands, prefabs, simulation modifiers and inspector-driven object editing.
Showcase
Canvas Physics Loop
Physics Sandbox is an interactive portfolio project exploring how a React interface can drive a custom Canvas editor backed by a Matter.js physics world.
The project is built as a small editor rather than a static demo. Objects can be created, edited, moved, copied, grouped into prefabs, affected by simulation modifiers and inspected while the physics simulation is running or paused.
The main purpose of the project is to show practical frontend engineering around a complex interactive surface: React owns the editor UI, Canvas owns the visual world, Matter.js owns the physics simulation, and Zustand coordinates the state shared between those systems.
React And Canvas Integration
React handles the editor interface: panels, toolbar, inspector, status bar, dialogs, tooltips, context menus and persistent UI state.
The Canvas remains an imperative rendering surface. Physics objects are drawn directly from simulation and editor state, avoiding the need to force every visual update through React components.
That separation is the core architectural focus of the project:
- React handles stateful controls, forms, panels and editor workflows.
- Canvas handles the visual world.
- Matter.js handles physics stepping and collision state.
- Zustand connects UI state to the renderer and input layer.
Physics Objects As Editable Data
Sandbox objects are editor entities with metadata for both visual and physical behaviour.
Objects expose editable data for size, colour, border colour, border style, mass, bounce, friction, static or dynamic state, collision roles and radial force settings.
Matter.js bodies are updated from that metadata, so inspector edits affect both rendering and simulation behaviour. Static objects can still be moved as editor objects, while dynamic objects remain under physics control when the simulation is running.
Commands And Editor Safety
Most mutating actions run through a command bus. This includes object creation, deletion, property updates, paste actions and prefab spawning.
Commands report success or failure and support undo/redo where appropriate. This keeps high-level editor behaviour consistent across toolbar actions, inspector edits, context menus, keyboard shortcuts, clipboard actions and prefab spawning.
Input And Interaction
The editor has explicit interaction modes for selection, object movement and camera control.
It also supports middle-mouse camera panning, keyboard shortcuts, selection boxes, right-click context menus, object stamp placement, copy, cut, paste, duplicate, fit-to-view and zoom controls.
The input layer is intentionally separated from the UI components so shortcuts, pointer actions, context menus and clipboard behaviour can share the same application commands.
Shared Editor State
Zustand is used for most editor-level state instead of keeping everything in local React state.
The sandbox has several non-React systems that need access to the same data: input handling, command execution, camera updates, Canvas rendering, tooltips, status displays and panels.
Keeping that state in a small external store makes those systems easier to coordinate without passing large prop chains through the React tree or forcing the renderer and physics code to behave like React components.
Local React state is still used for component-only concerns such as dialog visibility, draft form values and temporary UI details.
Prefabs And Demo Scenes
Prefabs are serialized scene snippets that can be spawned into the sandbox.
They are useful for testing editor behaviour quickly and for showing more complex setups such as boulder runs, Rube Goldberg machines, radial force chambers and solar-system style scenes.
In development, selected objects can be exported as prefab data to make new reusable setups easier to build.
Project Structure
The codebase is split around responsibilities rather than UI routes.
Important areas include app-level orchestration, camera pan and zoom logic, Canvas host and overlays, undoable commands, input handling, Matter.js world integration, prefab definitions, Canvas rendering, sandbox object metadata, Zustand state and React UI components.
That structure is intended to keep the editor understandable as it grows, with each layer owning a clear part of the system.
Technical Aspects
- React editor interface driving an imperative Canvas renderer
- Matter.js physics bodies synchronised with editable object metadata
- Zustand store shared across UI, renderer, input and command systems
- Undoable command bus for object creation, deletion, updates, paste actions and prefab spawning
- Selection, movement, camera control, clipboard, drag select, shortcuts and zoom controls
- Simulation modifiers including gravity, wind, radial push and pull forces
- Prefab and demo-scene workflows for reusable sandbox setups
Challenges
- Keeping React UI state, Canvas rendering, physics simulation and input behaviour aligned without forcing every frame through React components.
- Separating editor workflows from the imperative renderer and Matter.js simulation loop.
- Making object metadata editable while keeping Matter.js bodies, visual rendering and inspector state in sync.
- Coordinating keyboard shortcuts, pointer interactions, context menus, clipboard behaviour and toolbar actions through the same application commands.
- Building a project that worked as a portfolio piece while still behaving like a practical editor rather than a static demo.
Contributions
- Designed and built the full editor interface, including panels, toolbar, inspector, status bar, dialogs, tooltips and context menus.
- Separated React-owned UI from the Canvas rendering layer so simulation visuals could update imperatively.
- Integrated Matter.js bodies with editable sandbox object metadata for visual and physical behaviour.
- Implemented a command bus with undoable object creation, deletion, property updates, paste actions and prefab spawning.
- Built the input layer for selection, movement, camera panning, drag select, keyboard shortcuts, clipboard actions and zoom controls.
- Added simulation controls and modifiers for gravity, wind, radial push/pull forces and collision roles.
- Created prefab and demo scene workflows for more complex reusable sandbox setups.
Explore