Define a flyout toolbox
Stay organized with collections
Save and categorize content based on your preferences.
A flyout toolbox has a single set of blocks that are displayed at all times.
To create a flyout toolbox, pass JSON or XML describing the toolbox to the
toolbox property of the configuration
options.
JSON
var toolbox = {
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "controls_if"
},
{
"kind": "block",
"type": "controls_whileUntil"
}
]
};
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
XML
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_whileUntil"></block>
</xml>
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
XML String
var toolbox = '<xml>' +
'<block type="controls_if"></block>' +
'<block type="controls_whileUntil"></block>' +
'</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-13 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-13 UTC."],[],[],null,["# Define a flyout toolbox\n\nA flyout toolbox has a single set of blocks that are displayed at all times.\n\nTo create a flyout 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\": \"flyoutToolbox\",\n \"contents\": [\n {\n \"kind\": \"block\",\n \"type\": \"controls_if\"\n },\n {\n \"kind\": \"block\",\n \"type\": \"controls_whileUntil\"\n }\n ]\n };\n var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});\n\n### XML\n\n \u003cxml id=\"toolbox\" style=\"display: none\"\u003e\n \u003cblock type=\"controls_if\"\u003e\u003c/block\u003e\n \u003cblock type=\"controls_whileUntil\"\u003e\u003c/block\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\u003e' +\n '\u003cblock type=\"controls_if\"\u003e\u003c/block\u003e' +\n '\u003cblock type=\"controls_whileUntil\"\u003e\u003c/block\u003e' +\n '\u003c/xml\u003e';\n var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});"]]
