Hide

Injecting Resizable Blockly

The most flexible way to put Blockly into a web page is to inject it into an 'iframe'. This is slightly more complicated than injecting Blockly into a div, but using an iframe allows Blockly to resize to fill the page, and it allows more than one instance of Blockly to exist on the page.

The only limitation of using an iframe is that for security reasons Blockly will not execute in Chrome when served directly off the local file system with the file:// protocol (issue 47416).

Injection

Include the following snippet in your web page:

<script>
  function blocklyLoaded(blockly) {
    // Called once Blockly is fully loaded.
    window.Blockly = blockly;
  }
</script>
<iframe src="frame.html"></iframe>

The iframe is where Blockly will appear. It will be sized as needed using tables, CSS, or JavaScript. The next step is to create the frame for the editor. Here's a good starting snippet for frame.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="blockly_compressed.js"></script>
    <script src="blocks_compressed.js"></script>
    <script src="msg/js/en.js"></script>
    <style>
      html, body {
        background-color: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
      }
      .blocklySvg {
        height: 100%;
        width: 100%;
      }
    </style>
    <script>
      function init() {
        Blockly.inject(document.body, {toolbox: document.getElementById('toolbox')});
        // Let the top-level application know that Blockly is ready.
        window.parent.blocklyLoaded(Blockly);
      }
    </script>
  </head>
  <body onload="init()">
    <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>
    </xml>
  </body>
</html>

The script tags in the above snippet load the core Blockly script (blockly_compressed.js), the core blocks set (blocks_compressed.js), and selects the user's language to be English (msg/js/en.js). Adjust the paths as needed to enable inclusion of these script files.

Test the page in a browser. You should see Blockly's editor filling the iframe, with four block categories in the toolbox.

Here is a live demo of an iframe nested in a table that fills the screen.