Get started with blockly CDN

Apache-2.0 licensed

Blockly: A visual editor compiling user blocks into JS or other languages.

Tags:
  • blockly

Stable version

Copied!

How to start using blockly CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with blockly CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/blockly/10.4.3/blockly.min.js"></script>
  <style>
    #workspace { width: 400px; height: 400px; }
  </style>
</head>
<body>
  <div id="workspace"></div>
  <script>
    const workspace = new blockly.Workspace('workspace');

    // Define a simple category with a single block
    const math_category = workspace.newCategory('Math', '#F7DC6F');
    const add_block = workspace.newBlock('math_add', math_category);
    add_block.init();

    // Set up the input and output connections for the block
    add_block.setInputsInline(false);
    add_block.appendValueInput('A', 'Number')
      .setCheck('Number')
      .setAlign(blockly.ALIGN_LEFT);
    add_block.appendValueInput('B', 'Number')
      .setCheck('Number')
      .setAlign(blockly.ALIGN_RIGHT);
    add_block.setOutput(true, 'Number');

    // Add a block to the workspace
    workspace.addBlock(add_block);

    // Create a connection between the inputs and outputs
    const connection = add_block.getInput('A').connection.connect(
      add_block.getInput('B'), blockly.Blockly.MUTATION_ORDER_APPEND
    );

    // Define a function to display the result in the console
    workspace.onTextInput('', function(text) {
      const code = workspace.codeGenerator.toText();
      const result = eval(code);
      console.log(`Result: ${result}`);
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions

1.0.0 10.0.0 10.0.0-beta.0 10.0.1 10.0.2 10.1.0 10.1.1 10.1.2 10.1.3 10.2.0 10.2.0-beta.0 10.2.0-beta.1 10.2.0-beta.2 10.2.0-beta.3 10.2.1 10.2.2 10.3.0 10.3.0-beta.0 10.3.1 10.3.1-beta.0 10.3.1-beta.1 10.4.0 10.4.0-beta.0 10.4.0-beta.1 10.4.1 10.4.2 10.4.3 10.5.0-beta.0 11.0.0 11.0.0-beta.0 11.0.0-beta.1 11.0.0-beta.10 11.0.0-beta.11 11.0.0-beta.12 11.0.0-beta.2 11.0.0-beta.3 11.0.0-beta.4 11.0.0-beta.5 11.0.0-beta.6 11.0.0-beta.7 11.0.0-beta.8 11.0.0-beta.9 11.1.0 *** 11.1.1 11.2.0-beta.0 2.20190722.1 3.20191014.1 3.20191014.2 3.20191014.3 3.20191014.4 3.20200123.0 3.20200123.1 3.20200325.0-beta.0 3.20200402.0 3.20200402.1 3.20200625.0 3.20200625.1 3.20200625.2 3.20200924.0 3.20200924.1 3.20200924.2 3.20200924.3 3.20200924.4 3.20201217.0-beta.0 3.20201217.0-beta.1 3.20201217.0-beta.2 3.20201217.0-beta.3 3.20201217.0-beta.4 4.20201217.0 4.20210325.0-beta.0 4.20210325.0-beta.1 4.20210325.0-beta.2 4.20210325.0-beta.3 4.20210325.0-beta.4 4.20210325.0-beta.5 4.20210325.0-beta.6 4.20210325.0-beta.7 5.20210325.0 5.20210325.1 5.20210624.0-beta.0 5.20210624.0-beta.1 5.20210624.0-beta.2 5.20210624.0-beta.3 5.20210624.0-beta.4 5.20210624.0-beta.5 6.20210701.0 7.20210930.0-beta.0 7.20210930.0-beta.1 7.20210930.0-beta.2 7.20210930.0-beta.3 7.20210930.0-beta.4 7.20211209.0 7.20211209.0-beta.0 7.20211209.0-beta.1 7.20211209.0-beta.2 7.20211209.0-beta.3 7.20211209.0-beta.4 7.20211209.1 7.20211209.2 7.20211209.3 7.20211209.4 7.20211209.5 8.0.0 8.0.1 8.0.1-beta.0 8.0.2 8.0.3 8.0.3-beta.0 8.0.3-beta.1 8.0.4 8.0.4-beta.0 8.0.4-beta.1 8.0.5 8.0.5-beta.0 8.20220331.0-beta.0 8.20220331.0-beta.1 9.0.0 9.0.0-beta.0 9.0.0-beta.1 9.0.0-beta.2 9.0.0-beta.3 9.0.0-beta.4 9.0.1 9.1.0 9.1.0-beta.0 9.1.1 9.2.0 9.2.1 9.3.0 9.3.0-beta.0 9.3.1 9.3.2 9.3.3