Plugins are NPM packages that extend or modify Blockly's functionality and can be included in any Blockly-based project.
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.
A field that lets users input a pixel grid by clicking or tapping.
A field that lets users enter a date using a date picker control.
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.
A field that allows users to enter a value using a slider.
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.
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.
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.
A third-party plugin that provides blocks for creating and accessing lexical (local) variables.
These plugins add new features and functionality to the Blockly workspace.
A plugin that adds a lets users store block stacks in a "backpack" for later retrieval and reuse.
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.
A plugin that adds a search field to the workspace and highlights matching blocks as the user types.
A plugin that draws a bounding box around all of the blocks in the workspace.
A plugin that adds support for automatically scrolling the workspace when blocks are dragged to the edge and for scrolling while dragging a block.
A plugin that provides a MetricsManager that can be used to prevent workspace expansion in certain directions.
A plugin that allows you to display a modal dialog atop the workspace.
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.
A third-party plugin that allows selecting and manipulating multiple block stacks at once.
These plugins add new features and functionality to the Blockly toolbox. Learn more about customizing the toolbox.
A toolbox that presents all available blocks in a continuously scrollable list.
A toolbox category that adds a search field to the toolbox and filters available blocks as you type.
Themes let you customize the visual appearance of Blockly. Learn more about creating custom themes.
A theme that uses darker colours than the default.
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.
A theme that makes Blockly more accessible for individuals with tritanopia, a form of colourblindness.
A theme that makes Blockly more accessible for individuals with deuteranopia, a form of colourblindness.
These self-contained example projects demonstrate techniques to include and extend the Blockly library.
- Turtle Fields: A demo of creating custom block fields.
- Pitch Field: Another demo of creating custom block fields.
- Custom Dialogs: A demo overriding Blockly browser dialogs with custom implementations.
- Custom Tooltips: An example of using a custom tooltip renderer.
- Custom Toolbox: A demo of a complex category structure for the toolbox.
- Block Limit: A demo limiting the total number of blocks allowed for academic exercises.
- Mirrored Blockly: A demo using two Blockly instances connected as leader-follower.
- Resizable Workspace: A demo of injecting Blockly into a page as a resizable element.
- Fixed Size Workspace: A demo injecting Blockly into a page as a fixed element.
- Single Direction Scrolling: A demo of configuring single-direction scrollbars.
- RTL: A demo of what Blockly looks like in right-to-left mode (for Arabic and Hebrew).
- Shared Backpack: A demo of two Blockly instances with a shared backpack.
Code Generation & Execution
- Generating and Running Code: A demo of generating code from blocks and evaluating it.
- Real-Time Code Generation: A demo of using event listeners to generate code and provide instant feedback as blocks are changed.
- Headless Blockly: A demo of generating Python code from JSON with no graphics.