phaser-editor-plugin

name

phaser-editor-plugin

description

Build and extend third-party plugins for Phaser Editor v5 in this template. Use when adding or modifying a plugin feature — a command, custom editor, content type, New File wizard entry, Inspector property section, Outline provider, view, theme, or plugin styles — or when working with plugin.json, the colibri API, the bundled types/*.d.ts, or registerExtensions. Read the docs/ recipes before writing code.

Phaser Editor v5 plugin development

This repository is a template for third-party Phaser Editor v5 plugins. Use this skill whenever you add or change plugin functionality.

First: read the right doc

The repo's docs/ folder is the source of truth for patterns. Read the relevant doc before writing code — don't rely on memory for the colibri API.

1. Orientation: AGENTS.md and docs/architecture.md.
2. Pick the extension point: docs/extension-points.md.
3. Read the matching recipe in docs/recipes/:
   • add a command
   • add a custom editor
   • add a content type & New File wizard
   • add Inspector properties
   • add styles (theme-correct)

Non-negotiables

• Everything is registered in registerExtensions(reg) via reg.addExtension(new SomeExtension(...)). Edit myplugin.example/src/ExamplePlugin.ts.
• One plugin = one TypeScript namespace. No import/export between plugin files; no bundler; no runtime npm.
• The editor API lives only in types/colibri.d.ts and types/phasereditor2d.files.d.ts. Grep them to confirm any API — if it isn't there, it isn't available. Never edit them to make code compile.
• IDs are namespaced: "<pluginId>.<Name>".
• UI must be theme-correct (separate layout from per-theme color; ship light and dark). Register CSS in plugin.json styles.

Workflow

- [ ] Read AGENTS.md + the matching docs/recipe
- [ ] Find the closest existing example in myplugin.example/src and copy its shape
- [ ] Confirm API names by grepping types/*.d.ts
- [ ] Add code in src/ (same namespace) and register it in ExamplePlugin.ts
- [ ] npm run build  (must pass with no type errors)

Best reference: the working example

myplugin.example/ is a complete plugin. Mirror its structure: ExamplePlugin.ts (a command + all registrations) and src/editors/ (a custom editor with content type, New File wizard, Outline, and Inspector).