Fixed-sized Workspace

The simplest way to put Blockly into a webpage is to inject it into an empty 'div' tag.


First, include the core Blockly script and the core blocks set. Note that the path may vary, depending on where your page is in relation to Blockly:

<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>

Then include the messages for the user's language (in this case English):

<script src="msg/js/en.js"></script>

Add an empty div somewhere in the page's body and set its size:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

Add the structure of the toolbox (see Defining the Toolbox for more information) anywhere on the page:

<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="controls_repeat_ext"></block>
  <block type="logic_compare"></block>
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="text"></block>
  <block type="text_print"></block>

Finally, call the following to inject Blockly into an empty div. This script should be at the bottom of the page, or called by the onload event.

  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('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.

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.