Fixed-sized Workspace
Stay organized with collections
Save and categorize content based on your preferences.
The simplest way to put Blockly into a webpage is to inject it into an empty
'div' tag.
1. Get the code
Get the code in whatever
way works best for your application.
2. Define the area
Add an empty div somewhere in the page's body and set its size:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
3. Inject the workspace
Define the toolbox structure:
const toolbox = {
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "controls_if"
},
{
"kind": "block",
"type": "controls_repeat_ext"
},
{
"kind": "block",
"type": "logic_compare"
},
{
"kind": "block",
"type": "math_number"
},
{
"kind": "block",
"type": "math_arithmetic"
},
{
"kind": "block",
"type": "text"
},
{
"kind": "block",
"type": "text_print"
},
]
}
And finally, call the following to inject Blockly into your defined div.
const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
The workspace
variable is not currently used, but it will become
important later when one wants to save the blocks or generate code.
If more than one instance of Blockly is injected onto the same page, ensure
that each returned workspace is stored in a different variable.
Now you can test the page in a browser. You should see Blockly's editor filling the div,
with seven blocks in the toolbox.
Here is a live demo.
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."],[[["Blockly can be easily embedded into a webpage by injecting it into an empty 'div' tag."],["The process involves getting the Blockly code, defining a 'div' element for the workspace, and injecting Blockly with a specified toolbox."],["A workspace variable is returned, which will be important for interacting with the Blockly instance later."]]],["To add Blockly to a webpage, first, obtain the necessary code. Next, create an empty `div` element in the page's body and set its dimensions (e.g., `id=\"blocklyDiv\"`, `height: 480px`, `width: 600px`). Define the toolbox structure using JSON format, specifying the block types. Finally, use `Blockly.inject('blocklyDiv', {toolbox: toolbox})` to insert Blockly into the `div`, storing the result in a `workspace` variable for later use in saving blocks or code generation.\n"]]