@blockly/dev-tools Built on Blockly

A library of common utilities for Blockly extension development.


npm install @blockly/dev-tools -D --save



Blockly built-in Simple and Category toolboxes.

import * as Blockly from 'blockly';
import {toolboxSimple, toolboxCategories} from '@blockly/dev-tools';

Blockly.inject('blocklyDiv', {
  toolbox: toolboxCategories

Debug Renderer

The debug renderer is a helpful tool to debug blocks when building a custom renderer.

import {DebugRenderer} from '@blockly/dev-tools';
// Initialize the debug renderer.

GUI Controls

Add GUI controls to adjust Blockly workspace options with a dat.GUI interface.

import {addGUIControls} from '@blockly/dev-tools';
const defaultOptions = {
addGUIControls((options) => {
  return Blockly.inject('blocklyDiv', options);
}, defaultOptions);

Populate Random

The populateRandom function adds random blocks to a workspace. Blocks are selected from the full set of defined blocks. Pass in a worskpace and how many blocks should be created.

import {populateRandom} from '@blockly/dev-tools';
// Add 10 random blocks to the workspace.
populateRandom(workspace, 10);


Apache 2.0