Register for the online Blockly Developer Summit April 28-29, 2021!

Injection Options

Injection

You can inject a Blockly workspace with a call to Blockly.inject(location, options). The first argument tells Blockly where to inject the workspace in the DOM. The second argument is a dictionary of name-value pairs that is used for configuration. The injection code parses the options dictionary into an instance of Blockly.Options.

Direct creation

You can also create a workspace directly by calling Blockly.WorkspaceSvg(new Blockly.Options(options)). Note that you need to call new Blockly.Options(options), passing in your options dictionary--the workspace constructor expects an instance of Blockly.Options, not a bare options dictionary.

The options dictionary

The following options are supported:

Name Type Description
collapse: boolean Allows blocks to be collapsed or expanded. Defaults to true if the toolbox has categories, false otherwise.
comments: boolean Allows blocks to have comments. Defaults to true if the toolbox has categories, false otherwise.
css: boolean If false, don't inject CSS (providing CSS becomes the document's responsibility). Defaults to true.
disable: boolean Allows blocks to be disabled. Defaults to true if the toolbox has categories, false otherwise.
grid: object Configures a grid which blocks may snap to. See Grid.
horizontalLayout: boolean If true toolbox is horizontal, if false toolbox is vertical. Defaults to false.
maxBlocks: number Maximum number of blocks that may be created. Useful for student exercises. Defaults to Infinity.
maxInstances: object Map from block types to maximum number of blocks of that type that may be created. Undeclared types default to Infinity.
media: string Path from page (or frame) to the Blockly media directory. Defaults to "https://blockly-demo.appspot.com/static/media/".
move: object Configures behavior for how users can move around the workspace. See Move.
oneBasedIndex: boolean If true list and string operations should index from 1, if false index from 0. Defaults to true.
readOnly: boolean If true, prevent the user from editing. Suppresses the toolbox and trashcan. Defaults to false.
rtl: boolean If true, mirror the editor (for Arabic or Hebrew locales). See RTL demo. Defaults to false.
scrollbars: object or boolean Sets whether the workspace has vertical or horizontal scrollbars. Takes an object where the horizontal property determines if horizontal scrolling is enabled and the vertical property determines if vertical scrolling is enabled. If a boolean is passed then it is equivalent to passing an object with both horizontal and vertical properties set as that value. Defaults to true if the workspace has categories.
theme: Blockly.Theme Defaults to classic theme if no theme is provided. See Themes
toolbox: XML nodes or string Tree structure of categories and blocks available to the user. See defining the toolbox for more information.
toolboxPosition: string If "start" toolbox is on top (if horizontal) or left (if vertical and LTR) or right (if vertical and RTL). If "end" toolbox is on opposite side. Defaults to "start".
trashcan: boolean Displays or hides the trashcan. Defaults to true if the toolbox has categories, false otherwise.
maxTrashcanContents: number Maximum number of deleted items that will appear in the trashcan flyout. '0' disables the feature. Defaults to '32'.
zoom: object Configures zooming behaviour. See Zoom.
renderer: string Determines the renderer used by blockly. Pre-packaged renderers include 'geras' (the default), 'thrasos', and 'zelos' (a scratch-like renderer).
plugins: object Map of plugin type to name of registered plugin or plugin class.