Add a toolbox

  • The Blockly toolbox houses programming blocks that users can drag onto the workspace to build programs.

  • Toolboxes are typically defined using JSON to specify which blocks are included and their arrangement.

  • The provided code snippet demonstrates creating a basic flyout toolbox containing 'controls_if' and 'controls_whileUntil' blocks.

  • Further information regarding toolbox configuration and workspace injection can be found in the linked resources.

The toolbox contains the blocks that you use to program. The blocks can be dragged onto the workspace.

For more information about what a toolbox looks like, see the visual glossary.

Basic definition

A toolbox definition specifies what blocks get included in the toolbox, and in what order. Most of the look and style of your toolbox is specified in other ways.

We recommend defining your toolbox using JSON.

This code snippet defines a flyout toolbox with two blocks:

const toolbox = {
  // There are two kinds of toolboxes. The simpler one is a flyout toolbox.
  kind: 'flyoutToolbox',
  // The contents is the blocks and other items that exist in your toolbox.
  contents: [
    {
      kind: 'block',
      type: 'controls_if'
    },
    {
      kind: 'block',
      type: 'controls_whileUntil'
    }
    // You can add more blocks to this array.
  ]
};

// The toolbox gets passed to the configuration options during injection.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

Toolbox with if-do and repeat-while blocks.

For more information about how to define and configure your toolbox, see Toolbox overview.

For more information about injection, see Workspace creation.