blockbench-development_skill

Overview

This skill helps you create, modify, and debug JavaScript plugins and extensions for Blockbench, the Electron/PWA 3D model editor. It focuses on Actions, Dialogs, Panels, Menus, Toolbars, model/animation APIs, and custom import/export codecs. Use it to produce clean, reversible edits and integrate UI components into Blockbench reliably.

How this skill works

The skill maps common Blockbench APIs and patterns into actionable development steps: register a Plugin, create Action/Toggle/Tool commands, add Panel Vue components, and implement Dialog forms. It shows how to manipulate models with Undo tracking, subscribe to Blockbench events, and register custom Codecs/ModelFormats for import/export. It also enforces cleanup in onunload() to avoid memory leaks.

When to use it

• Building a new Blockbench plugin or extension
• Adding UI elements (menus, toolbars, panels, dialogs) to Blockbench
• Implementing import/export formats or codecs
• Automating model edits, creating elements, or scripting animations
• Debugging plugin lifecycle issues, memory leaks, or event handling

Best practices

• Always wrap model edits with Undo.initEdit() and Undo.finishEdit() so users can revert changes
• Store references to all created components (Action, Panel, Dialog, Codec, Format, CSS, event callbacks) and delete them in onunload()
• Use Blockbench events (Blockbench.on / removeListener) for reactive behavior and keep the same callback reference for removal
• Avoid bundling built-in libraries (THREE, Vue, JSZip, marked, Molang); use the global instances provided
• Follow naming conventions: PascalCase for classes, camelCase for methods, snake_case for event/action IDs

Example use cases

• Add a custom toolbar Action that modifies selected cubes and binds to a keybind
• Create a sidebar Panel with a Vue component to list and edit selected elements
• Build a Dialog-based form to configure batch changes to model geometry or textures
• Register a Codec + ModelFormat to export a proprietary JSON model and import it back
• Listen to update_selection to update UI state and respond to project load/save events