Create a workspace
Stay organized with collections
Save and categorize content based on your preferences.
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.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-03-10 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-03-10 UTC."],[[["A Blockly workspace is a UI for programming with blocks and is injected into a `\u003cdiv\u003e` 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."]]],["Blockly workspaces, the UI for block programming, are injected into a designated `\u003cdiv\u003e` element called the \"injection div.\" This div can have a fixed or dynamic size, with Blockly elements resizing accordingly. Injection initializes the workspace UI and readies it for use. The `Blockly.inject()` function, which creates the workspace, accepts either the injection div's ID or the div itself. Workspace configuration, including layout and style, is set during the injection process.\n"]]
