RaspberryPiFoundation/blockly
Blockly
Blockly is a web-based visual programming editor and block-based code generator. It allows users to create programs by interlocking graphical blocks that translate into executable source code for various programming languages, removing the need for manual syntax entry.
The project serves as a customizable framework for building specialized visual languages through a customizable block library. It includes a visual block designer for defining custom shapes, behaviors, and specialized input fields, as well as a plugin system to extend the editor's environment.
The system manages programming logic through variable scoping and provides a workspace with navigation tools, contextual block suggestions, and bulk manipulation capabilities. Accessibility is integrated into the interface to support keyboard-only navigation and screen reader compatibility.
Features
- Block-Based Code Generators - Provides a system that converts visual block arrangements into executable code for various programming languages.
- Visual Programming Representations - Represents programming concepts using interlocking graphical blocks to generate source code without manual syntax entry.
- Block Shape Definitions - Defines block shapes and behaviors using a schema that allows for dynamic instantiation and custom extensions.
- Low-Code Development Platforms - Enables the creation of specialized internal tools where non-programmers generate code via visual blocks.
- Workflow-to-Code Generators - Transforms visual node-based block arrangements into executable source code for various programming languages.
- Visual Language Frameworks - Provides a framework for defining custom block shapes, input fields, and behaviors to build specialized visual languages.
- Visual Programming Environments - Provides a web-based editor where users construct programs by snapping together graphical blocks.
- Educational Programming Environments - Provides an integrated platform with a visual editor to teach software development and logic concepts to students.
- SVG-Based Vector Rendering - Renders the workspace and interlocking blocks using scalable vector graphics for precise positioning and scaling.
- Source Code Generators - Translates a graphical arrangement of interlocking blocks into executable source code for various languages.
- Workspace Coordinate Management - Tracks block positions using a 2D coordinate system to enable seamless zooming, panning, and collision detection.
- Text and Block Manipulation Tools - Allows users to select and move multiple block stacks simultaneously within the workspace to improve efficiency.
- Toolbox Discovery - Offers search filters and scrollable lists within the block toolbox to help users quickly find the required components.
- Visual Block Designers - Includes a visual builder interface for defining custom block shapes and generating starter code.
- Dynamic Block Mutations - Modifies the internal structure of a block at runtime to add or remove inputs based on user interaction.
- Hook-Based Plugin Systems - Exposes internal hooks that allow developers to inject custom input fields and renderers into the editor.
- Accessible Graphics - Provides a keyboard-navigable and screen-reader-friendly interface for the graphical programming environment.
- Accessible UI Frameworks - Provides a set of interface components designed to ensure visual programming is usable via keyboard and screen readers.
- Contextual Component Suggestions - Blockly recommends relevant blocks to the user based on the patterns and types of blocks already present in the workspace.
- Dynamic Block Input Connections - Supports blocks that automatically add or remove input connections based on user interaction or control settings.
- Editor Accessibility Optimizations - Implements ARIA labels and keyboard navigation to make the programming experience inclusive for all users.
- Editor Plugins - Provides a plugin architecture to extend the editor with new input fields, visual themes, and code renderers.
- Accessibility Input Patterns - Implements keyboard and spatial navigation patterns to ensure assistive technology compliance within the visual editor.
- Session-Based Component Storage - Includes a temporary storage area where users can save block stacks for retrieval and reuse throughout the session.
- Minimap Navigation - Provides workspace management features including a minimap, zoom-to-fit controls, and automatic scrolling.
