# google/blockly **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/google-blockly).** 13,436 stars · 3,851 forks · JavaScript · Apache-2.0 ## Links - GitHub: https://github.com/google/blockly - Homepage: https://blockly.com - awesome-repositories: https://awesome-repositories.com/repository/google-blockly.md ## Description Blockly is a block-based coding library and visual programming editor that allows users to build programs by interlocking graphical blocks. It functions as a visual code generator, translating these arrangements of logic blocks and variables into executable source code for various programming languages. The library provides a framework for creating custom visual programming languages and low-code logic designers. It utilizes an SVG-based UI library to render interactive, draggable elements on a web canvas. The system is designed as an accessible web UI framework with integrated keyboard navigation and screen reader support for complex interactive canvas elements. This ensures the visual interface remains usable for people with disabilities. ## Tags ### Graphics & Multimedia - [Visual Programming Environments](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-programming-environments.md) — Provides a visual programming environment where users build logic by interlocking graphical blocks. ([source](https://github.com/google/blockly#readme)) - [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Utilizes scalable vector graphics to render the visual editor canvas and ensure crisp layouts across resolutions. ### Programming Languages & Runtimes - [Block-Based Coding Libraries](https://awesome-repositories.com/f/programming-languages-runtimes/block-based-coding-libraries.md) — Provides a complete framework for creating custom block-based visual programming languages and their translation to source code. - [Visual Block Representations](https://awesome-repositories.com/f/programming-languages-runtimes/compiler-interpreter-internals/compiler-infrastructure/intermediate-representations/bytecode/graph-based/visual-block-representations.md) — Maintains the program structure as a tree of connected nodes mapping visual blocks to a logical hierarchy. - [Source Code Generators](https://awesome-repositories.com/f/programming-languages-runtimes/source-code-generators.md) — Converts graphical block arrangements into executable source code for various target languages. ### Part of an Awesome List - [Visual Programming](https://awesome-repositories.com/f/awesome-lists/devtools/visual-programming.md) — Provides a drag-and-drop visual programming interface for building logic via interlocking blocks. - [Web Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/web-frameworks.md) — A library that adds a visual code editor to web and mobile apps by Google. ### Development Tools & Productivity - [Low-code](https://awesome-repositories.com/f/development-tools-productivity/platforms-runtimes-language-services/development-platforms/low-code-visual-builders/low-code.md) — Implements a visual builder that allows users to define application logic and workflows through abstracted graphical blocks. - [Abstract Syntax Tree Generators](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/code-generation/abstract-syntax-tree-generators.md) — Translates the visual block arrangement into formal code representations using an abstract syntax tree. - [AST-to-Source Generators](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/code-generation/recursive-generators/ast-to-source-generators.md) — Translates the internal block graph into target programming languages via a recursive visitor pattern. - [Block-to-Code Generators](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/code-generation/visual-code-builders/block-to-code-generators.md) — Translates arrangements of visual logic blocks into executable source code for multiple different programming languages. - [Low-Code Development Platforms](https://awesome-repositories.com/f/development-tools-productivity/low-code-development-platforms.md) — Enables the creation of low-code logic designers for defining application workflows visually. ### User Interface & Experience - [Accessible Graphics](https://awesome-repositories.com/f/user-interface-experience/accessible-graphics.md) — Provides keyboard navigation and screen reader support specifically for the graphical block interface. ([source](https://github.com/google/blockly#readme)) - [Accessible Interface Design](https://awesome-repositories.com/f/user-interface-experience/accessible-interface-design.md) — Implements keyboard navigation and screen reader support to make complex visual interfaces accessible. - [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Ships accessible UI components with ARIA and keyboard support for interactive canvas elements. - [Accessible UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-frameworks.md) — Provides a UI framework with built-in support for keyboard navigation and screen readers. - [Visual Programming Environments](https://awesome-repositories.com/f/user-interface-experience/visual-programming-environments.md) — Provides a canvas-based interface for constructing programs by interlocking graphical blocks that represent variables and logic. - [Element Positioning Utilities](https://awesome-repositories.com/f/user-interface-experience/element-positioning-utilities.md) — Calculates precise screen coordinates and offsets to manage block interlocking, snapping, and collision. - [Drag and Drop Interactions](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/drag-and-drop-interactions.md) — Implements a centralized manager to coordinate drag-and-drop interactions and block attachments. - [Event-Driven Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-models/event-driven-interaction-handlers.md) — Uses an event-driven system to translate raw mouse and touch inputs into block dragging and attachment actions. ### Education & Learning Resources - [Educational Programming Environments](https://awesome-repositories.com/f/education-learning-resources/learning-platforms-infrastructure/educational-infrastructure/educational-tools/educational-programming-environments.md) — Provides a visual programming environment designed to introduce coding concepts to beginners.