Plugins

Plugins are NPM packages that extend or modify Blockly's functionality and can be included in any Blockly-based project.


Fields

Field plugins add new kinds of fields that can be incorporated into custom blocks, allowing your users to enter information in different ways. Learn more about how to create and customize fields.

Bitmap Field

A field that lets users input a pixel grid by clicking or tapping.

Date Field

A field that lets users enter a date using a date picker control.

Colour Field

A field that lets users choose a colour. Although the core Blockly library includes this field, it will be removed before the end of 2023, so developers should use this plugin instead.

HSV Colour Field

A field that lets users choose a colour using hue, saturation and value (brightness) sliders, or by using an eyedropper tool to pick an onscreen colour.

Slider Field

A field that allows users to enter a value using a slider.

Angle Field

A field that lets users graphically choose an angle.

Dropdown Grid Field

A dropdown field that displays the available choices in a grid.

Multi-Line Text Field

A field that lets users enter multiple lines of text.

Dependent Dropdown Field

A dropdown field whose available values depend on the chosen value in a separate dropdown field.

Blocks

These plugins provide new types of blocks or modify the behavior of existing ones. Learn more about creating custom blocks.

Dynamic Connection Blocks

A plugin that provides custom text, list and conditional blocks that dynamically add and remove inputs as the user interacts with them.

+/- Mutator Blocks

Custom logic, list, text, and function blocks that use + and - controls to add and remove inputs instead of the normal mutator interface.

Inline Input Blocks

A custom renderer and example blocks that treat dummy inputs between value inputs as line breaks, rendering the value inputs on separate lines inside of the block.

Procedure Blocks

These blocks allow users to define and call procedures. These have more functionality than the equivalent blocks in core, which allows them to be shared between workspaces. The Blockly team recommends that developers use these instead.

Lexical Variables

A third-party plugin that provides blocks for creating and accessing lexical (local) variables.

Workspace

These plugins add new features and functionality to the Blockly workspace.

Backpack

A plugin that adds a lets users store block stacks in a "backpack" for later retrieval and reuse.

Minimap

A plugin that adds a minimap to the workspace for improved navigation and organization.

Zoom to Fit

A plugin that adds a zoom-to-fit control to the workspace that will adjust the zoom level to show all blocks.

Workspace Search

A plugin that adds a search field to the workspace and highlights matching blocks as the user types.

Content Highlight

A plugin that draws a bounding box around all of the blocks in the workspace.

Scroll Options

A plugin that adds support for automatically scrolling the workspace when blocks are dragged to the edge and for scrolling while dragging a block.

Fixed Edges

A plugin that provides a MetricsManager that can be used to prevent workspace expansion in certain directions.

Modal Dialog

A plugin that allows you to display a modal dialog atop the workspace.

Keyboard Navigation

A plugin that allows users to manipulate and connect blocks using a keyboard-driven cursor.

Shadow Block Converter

A plugin that converts shadow blocks to normal blocks when they are edited.

Disable Top Blocks

A plugin that hides the 'Enable' context menu option for orphan blocks. Works with the Blockly.Events.disableOrphans change listener in core.

Cross-Tab Copy & Paste

A plugin allows copying and pasting blocks between Blockly workspaces in separate tabs or windows.

Multi-Select

A third-party plugin that allows selecting and manipulating multiple block stacks at once.

Toolbox

These plugins add new features and functionality to the Blockly toolbox. Learn more about customizing the toolbox.

Continuous Toolbox

A toolbox that presents all available blocks in a continuously scrollable list.

Toolbox Search

A toolbox category that adds a search field to the toolbox and filters available blocks as you type.

Themes

Themes let you customize the visual appearance of Blockly. Learn more about creating custom themes.

Dark Theme

A theme that uses darker colours than the default.

Modern Theme

A slight variant of the default Blockly theme that uses darker borders and flatter blocks.

High Contrast Theme

A theme that improves accessibility by using more contrasting colours and darker text to make blocks more legible.

Tritanopia Theme

A theme that makes Blockly more accessible for individuals with tritanopia, a form of colourblindness.

Deuteranopia Theme

A theme that makes Blockly more accessible for individuals with deuteranopia, a form of colourblindness.

Examples

These self-contained example projects demonstrate techniques to include and extend the Blockly library.