React Blockly Shell
Design boundary

Small enough to trust.
Open enough to compose.

The ownership boundary, API, and design constraints behind React Blockly Shell.

Shell owns
  • Blockly injection and disposal
  • ResizeObserver synchronization
  • Light and dark theme following
  • Workspace event delivery
  • Optional canvas chrome
Consumer owns
  • Block definitions and toolbox
  • Domain model and validation
  • Serialization and persistence
  • Code or configuration generation
  • Execution and product UI
Public surface

One component, explicit seams

defineBlocks
Register locale and domain blocks before injection.
theme / darkTheme
Inject with a theme and follow the document’s dark class.
toolbox
Supply any Blockly toolbox definition—or no toolbox at all.
onReady
Seed or restore state after injection, before change delivery.
onChange
Receive meaningful events and derive complete state from the workspace.
plugins
Install optional metrics, flyout, renderer, or connection behavior.
Minimal composition
<BlocklyShell
  defineBlocks={defineBlocks}
  theme={theme}
  toolbox={toolbox}
  media="/blockly-media/"
  onReady={restore}
  onChange={persist}
/>