Toolbox
Stay organized with collections
Save and categorize content based on your preferences.
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 struct during injection.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

For more information about how to define and configure your toolbox, see
Toolbox overview.
For more information about injection, see
Workspace creation.
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 2024-09-18 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 2024-09-18 UTC."],[[["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."]]],[]]