This article has links to websites or programs outside of Scratch and Wikipedia. Remember to stay safe while using the internet as we cannot guarantee the safety of other websites.

Blockly is one of the libraries used to create the blocks of Scratch 3.0. It was developed by Google and MIT to replace OpenBlocks, the library made by MIT that was used in App Inventor. Since 2025, it has been maintained by the Raspberry Pi Foundation.[1]

A screenshot depicting the Blockly workspace with blocks placed around it.

About

Blockly is a JavaScript library that allows developers to add a visual code editor to websites and mobile apps. It is also used by Scratch Blocks as a dependency.

“ Blockly is a web library that lets you add a customizable blocks-based code editor to your app. The editor uses puzzle-piece like blocks to represent code concepts like variables, logical expressions, loops, and more. It lets users program without having to worry about syntax or the intimidation of the command line. ”

― Blockly Website[2]

Blockly can be installed from NPM using npm install blockly. The npm install blockly@beta command installs the beta version instead.[3] Blockly has the ability to generate JavaScript, Python, PHP, Lua, and Dart code.[4]

History

Blockly development began in Summer 2011. The first public release was in May 2012 at Maker Faire. Blockly was originally designed as a replacement for OpenBlocks in App Inventor.[5] Blockly has released many versions since its inital release, with the latest release being Blockly v13.2.1 (as of August 2026).[6]

In November 2025, Blockly was moved from Google to the Raspberry Pi Foundation.[1]

Features

  • Web-based using Scalable Vector Graphics (SVG)
  • Completely client-side JavaScript[7]
  • Compatible with all major browsers: Chrome, Firefox, Safari, Opera, and Edge.[7]
  • Highly customizable and extensible[8][9]
    • Themes allow changing the color and style of blocks and categories[8]
    • Blockly Plugins allow extending Blockly's features [3]
  • Can export blocks to many programming languages[7]
  • Mobile support
  • Support for variables, functions, and arrays
  • Minimal type checking supported, designed for weakly typed languages
  • Easy to extend with custom blocks. The Blockly Developer Tools can be used to make new blocks[10]
  • Clean code generation
  • Step-by-step code execution for tracing and debugging code
  • Localized into 50+ languages[5]
  • Support for left-to-right and right-to-left languages

Code Generation

Blockly can generate text-based code from the blocks in 5 programming languages by default: JavaScript, Python, Lua, Dart, and PHP.[7] A custom code generator can be created to handle other programming languages.[11]

Blockly Themes

Themes are a feature of Blockly that allows developers to customize the colors and styles of the Blockly blocks, workspace, categories, scrollbars, and other UI elements. Blocky themes can be used to change the primary, secondary, and tertiary colors as a block,[8] as well as add a hat to the top of event blocks.[12]

Custom Renderers

Blockly supports custom renderers to customize the shape of blocks and advanced appearance properties of the workspace.[9] There are three built-in renderers:

  • Geras (the default Blockly renderer)
  • Thrasos (a newer renderer built to be a more modern take on Geras)
  • Zelos (a renderer based on Scratch 3.0 blocks)

Blockly Plugins

Blockly plugins extend Blockly's functionality.[3] They can be found on NPM under the @blockly scope, or under the Blockly Plugins directory. Some of the plugins in the directory are color pickers with HSV sliders, calendar date pickers, dropdown menus, dark mode themes, and tools for migrating apps to newer versions of Blockly without breaking.[13]

Uses

As Blockly is open-source, many other programs such as App Inventor 2 and Code.org use it.[7] Scratch uses its own library called Scratch Blocks, which has Blockly as a dependency.[14] ScratchJr does not use Blockly, but the Scratch Team is considering using it in a future version.[15] The Microsoft MakeCode editor, a programming editor for microcomputers such as the Micro:bit, also uses Blockly to power its blocks.[16]

External Links

References

  1. ↑ a b https://www.raspberrypi.org/blog/new-home-for-blockly/
  2. ↑ https://docs.blockly.com/guides/get-started/what-is-blockly/
  3. ↑ a b c https://github.com/RaspberryPiFoundation/blockly
  4. ↑ https://docs.blockly.com/guides/create-custom-blocks/code-generation/overview/
  5. ↑ a b Blockly
  6. ↑ https://github.com/RaspberryPiFoundation/blockly/releases
  7. ↑ a b c d e https://blockly.com/
  8. ↑ a b c https://docs.blockly.com/guides/configure/appearance/themes/
  9. ↑ a b https://docs.blockly.com/guides/create-custom-blocks/renderers/overview/
  10. ↑ https://raspberrypifoundation.github.io/blockly-samples/examples/developer-tools/index.html
  11. ↑ https://docs.blockly.com/guides/create-custom-blocks/code-generation/block-code/
  12. ↑ https://docs.blockly.com/guides/design/applications/#event-driven-program
  13. ↑ https://github.com/RaspberryPiFoundation/blockly-samples/tree/main/plugins
  14. ↑ https://github.com/scratchfoundation/scratch-blocks
  15. ↑ cwillisf. (2023-02-14). "ScratchJr uses a different method to implement horizontal blocks, but we're looking at using Blockly in a future version." https://github.com/scratchfoundation/scratch-blocks/issues/2958#issuecomment-1429920153
  16. ↑ https://github.com/Microsoft/pxt
Retrieved from "https://en.scratch-wiki.info/w/index.php?title=Blockly&oldid=368459"
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
More information (in German)