Editor

The editor is a browser application for building scenes: a hierarchy, an inspector, a scene view with move, rotate, and scale tools, an asset browser, undo and redo, saving to the project’s scene files, and a play mode that runs the game inside the editor. It runs on the project’s own Vite dev server and is built from the same ECS it edits.

Work in progress

The editor edits, saves, and plays scenes and prefabs. A prefab added to a scene, or to another prefab, stays linked to its file. A scene cannot hold another scene: put what scenes share in a prefab. The 3D viewport is not built; the scene view is for @shell/pixi projects.

What the editor does for the person using it, with play mode and the keyboard shortcuts, is in the Editor section. These pages are for adding the editor to a project and building on it.

How it is built

The editor is an ECS application. Its state and behaviour are resources on an edit world: a root world created with new World({ editMode: true }), in which only systems marked .runInEditMode() run. The project’s own plugins are installed in that world too, so its components exist and its render systems draw the scene, while gameplay systems stay idle.

• The open scene’s entities live in a child scene named document. Editor-only entities never end up in a scene file.
• The editor reads and changes the scene only through a JSON-RPC protocol, even though the world is in the same page. Every change returns its exact inverse, which is what undo is made of.
• Assets are files. An asset’s identity is its path relative to the asset folder.

Packages

Package	Job
@shell/editor	What a project installs: createEditor(), EditorPlugins, the Vite plugin
@shell/editor-viewport-2d	Scene view for Pixi projects
@shell/editor-core	Headless editor: session, selection, history, actions, documents
@shell/editor-protocol	JSON-RPC peer and the world’s methods
@shell/editor-assets	Asset sources and the asset database
@shell/editor-server	Vite plugin that reads and writes the asset folder (Node only)
@shell/editor-ui	Svelte 5 interface: layout, panels, widgets

A project depends on the first two. The rest come with them.

Next

• Project setup: add the editor to a project.
• Extending the editor: panels, field widgets, actions, component metadata.
• Scene files: what the editor writes to disk, for scenes and prefabs.
• Protocol: the methods a world exposes to tooling.