Define a category toolbox
Stay organized with collections
Save and categorize content based on your preferences.
A category toolbox has multiple sets of blocks that are arranged into different
categories.

To create a category toolbox, pass JSON or XML describing the toolbox to the
toolbox
property of the configuration
options.
JSON
var toolbox = {
"kind": "categoryToolbox",
"contents": [
{
"kind": "category",
"name": "Control",
"contents": [
{
"kind": "block",
"type": "controls_if"
},
]
},
{
"kind": "category",
"name": "Logic",
"contents": [
{
"kind": "block",
"type": "logic_compare"
},
{
"kind": "block",
"type": "logic_operation"
},
{
"kind": "block",
"type": "logic_boolean"
}
]
}
]
};
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
XML
<xml id="toolbox" style="display: none">
<category name="Control">
<block type="controls_if"></block>
</category>
<category name="Logic">
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_boolean"></block>
</category>
</xml>
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
XML String
var toolbox = '<xml id="toolbox" style="display: none">' +
'<category name="Control">' +
'<block type="controls_if"></block>' +
'</category>' +
'<category name="Logic">' +
'<block type="logic_compare"></block>' +
'<block type="logic_operation"></block>' +
'<block type="logic_boolean"></block>' +
'</category>' +
'</xml>';
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
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-06-24 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-06-24 UTC."],[],[],null,["# Define a category toolbox\n\nA category toolbox has multiple sets of blocks that are arranged into different\ncategories.\n\nTo create a category toolbox, pass JSON or XML describing the toolbox to the\n`toolbox` property of the [configuration\noptions](/blockly/guides/configure/web/configuration_struct#the_options_dictionary). \n\n### JSON\n\n var toolbox = {\n \"kind\": \"categoryToolbox\",\n \"contents\": [\n {\n \"kind\": \"category\",\n \"name\": \"Control\",\n \"contents\": [\n {\n \"kind\": \"block\",\n \"type\": \"controls_if\"\n },\n ]\n },\n {\n \"kind\": \"category\",\n \"name\": \"Logic\",\n \"contents\": [\n {\n \"kind\": \"block\",\n \"type\": \"logic_compare\"\n },\n {\n \"kind\": \"block\",\n \"type\": \"logic_operation\"\n },\n {\n \"kind\": \"block\",\n \"type\": \"logic_boolean\"\n }\n ]\n }\n ]\n };\n var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});\n\n### XML\n\n \u003cxml id=\"toolbox\" style=\"display: none\"\u003e\n \u003ccategory name=\"Control\"\u003e\n \u003cblock type=\"controls_if\"\u003e\u003c/block\u003e\n \u003c/category\u003e\n \u003ccategory name=\"Logic\"\u003e\n \u003cblock type=\"logic_compare\"\u003e\u003c/block\u003e\n \u003cblock type=\"logic_operation\"\u003e\u003c/block\u003e\n \u003cblock type=\"logic_boolean\"\u003e\u003c/block\u003e\n \u003c/category\u003e\n \u003c/xml\u003e\n \u003cscript\u003e\n var workspace = Blockly.inject('blocklyDiv',\n {toolbox: document.getElementById('toolbox')});\n \u003c/script\u003e\n\n### XML String\n\n var toolbox = '\u003cxml id=\"toolbox\" style=\"display: none\"\u003e' +\n '\u003ccategory name=\"Control\"\u003e' +\n '\u003cblock type=\"controls_if\"\u003e\u003c/block\u003e' +\n '\u003c/category\u003e' +\n '\u003ccategory name=\"Logic\"\u003e' +\n '\u003cblock type=\"logic_compare\"\u003e\u003c/block\u003e' +\n '\u003cblock type=\"logic_operation\"\u003e\u003c/block\u003e' +\n '\u003cblock type=\"logic_boolean\"\u003e\u003c/block\u003e' +\n '\u003c/category\u003e' +\n '\u003c/xml\u003e';\n var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});"]]