Code Generators

Most applications of Blockly require the user's program to be translated into a programming language. This action is performed on the client side by Blockly.

Generating Code

The first step is to include the generator for the language in question. Blockly includes the following generators:

  • JavaScript
  • Python
  • PHP
  • Lua
  • Dart

You can import and use the generators using one of the following methods.

Modules

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

Unpkg

You must include the generator after you include Blockly.

<script src="https://unpkg.com/blockly"></script>
<script src="https://unpkg.com/blockly/javascript_compressed"></script>
<script src="https://unpkg.com/blockly/python_compressed"></script>
<script src="https://unpkg.com/blockly/php_compressed"></script>
<script src="https://unpkg.com/blockly/lua_compressed"></script>
<script src="https://unpkg.com/blockly/dart_compressed"></script>
const jsCode = Blockly.JavaScript.workspaceToCode(workspace);
const pythonCode = Blockly.Python.workspaceToCode(workspace);
const phpCode = Blockly.PHP.workspaceToCode(workspace);
const luaCode = Blockly.Lua.workspaceToCode(workspace);
const dartCode = Blockly.Dart.workspaceToCode(workspace);

Local scripts

You must include the generator after you include Blockly.

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>
const jsCode = Blockly.JavaScript.workspaceToCode(workspace);
const pythonCode = Blockly.Python.workspaceToCode(workspace);
const phpCode = Blockly.PHP.workspaceToCode(workspace);
const luaCode = Blockly.Lua.workspaceToCode(workspace);
const dartCode = Blockly.Dart.workspaceToCode(workspace);

Realtime Generation

Generating code is an extremely fast operation, so there's no harm in calling this function frequently. A common strategy is to generate and display code in realtime by adding a listener to Blockly's change event:

import {javascriptGenerator} from 'blockly/javascript';
function updateCode(event) {
  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(updateCode);

See Events for more information.

Custom Generators

If you're looking for information about writing a new language generator, or how to generate code for blocks you've created, see the custom blocks documentation.