Create a workspace

  • A Blockly workspace is a UI for programming with blocks and is injected into a <div> element called the injection div.

  • The injection div can have static or dynamic sizing, with Blockly elements resizing accordingly.

  • Injection creates the workspace UI and initializes it for use, taking either the injection div's ID or the div itself as input.

  • Blockly workspaces are highly configurable, allowing you to customize layout, style, and other options during injection.

A Blockly workspace is the highest level component of Blockly. It is the UI that you use to program with blocks.

For more information about the workspace and its subcomponents, see the visual glossary.

Injection div

A Blockly workspace must be injected into a <div>, called the "injection div".

The injection div can be sized statically or dynamically. Blockly elements within the div update their size when the window resizes.

The following code snippet shows the HTML for a statically sized injection div:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

Injection

Injection creates all of the HTML sub-elements that make up the UI of a workspace. It also does all of the initialization needed to get the workspace ready for use.

The injection function can take in the ID of the injection div, or the injection div itself:

// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });

// Passes the injection div.
const workspace = Blockly.inject(
    document.getElementById('blocklyDiv'), { /* config */ });

Configuration

The workspace can be configured with numerous options (such as layout and style) during injection.

For more information about configuration options, see Configuration options.