Visual glossary

Blockly has a lot of vocabulary for its different visual components. This document breaks down some of the most important ones you need to know to get started with Blockly.


The workspace is the highest level component in Blockly. It contains all of the other components. This is where you do the work of programming!



The toolbox contains the blocks that you use to program. The blocks can be dragged onto the workspace.

There are two main types of toolboxes, flyout toolboxes and category toolboxes. These can both be displayed vertically and horizontally.

Flyout toolbox

Flyout toolboxes (aka simple toolboxes) have one set of blocks which is displayed at all times.

Category toolbox

Category toolboxes have multiple sets of blocks.

If you click a category item it opens a flyout that displays the blocks in the category.


The trashcan lets you delete blocks by dragging and dropping them. You can also click the trashcan to open a flyout containing the blocks you've deleted so you can get them back.

Zoom controls

The zoom controls zoom the workspace in and out when you click them.

Context menu

The context menu appears when you right-click or long-press on certain elements of the workspace (for example, the workspace background, or blocks). It displays a list of actions you can perform on that element.


Blocks are what you use to program. They represent expressions and statements in text-based programming languages.

Block stack

A block stack is any collection of connected blocks. They could be connected horizontally or vertically.

Shadow block

A shadow block is an editable but non-movable block connected to another block. You can drag non-shadow blocks on top of shadow blocks to overwrite them.

Insertion marker

An insertion marker is a preview of where a stack of blocks will be connected if it is dropped. It looks like a grey version of a block.

Block parts

Blocks have several different parts that you can edit and interact with to program.


An input usually represents a row in a block.

Input Image
Dummy a dummy input
Value a value input
Statement a statement input


A connection is a place on a block other blocks can connect to.

Connection Image
Output an output connection
Input an input connection
Previous a previous connection
Next a next connection


A field is a visual element that lives on a block. It could be editable (like a text input), or only informational (like a label). A field is always contained by an input.


An icon is a visual element that lives on a block. They always live in the top-start corner of the block, and they often create bubbles.