Introduction to Blockly

Blockly is a library that adds a visual code editor to web and mobile apps. The Blockly editor uses interlocking, graphical blocks to represent code concepts like variables, logical expressions, loops, and more. It allows users to apply programming principles without having to worry about syntax or the intimidation of a blinking cursor on the command line.

Building a Blockly app

From a user's perspective, Blockly is an intuitive, visual way to build code. From a developer's perspective, Blockly is a ready-made UI for creating a visual language that emits syntactically correct user-generated code. Blockly can export blocks to many programming languages, including these popular options:

  • JavaScript
  • Python
  • PHP
  • Lua
  • Dart

Here's a high-level breakdown of what goes into building a Blockly app:

  1. Integrate the Blockly editor. The Blockly editor at its simplest consists of a toolbox to store block types, and a workspace for arranging blocks. Learn more about integrating Blockly in the Get Started docs.
  2. Create your app's blocks. Once you've got Blockly in your app, you need to create blocks for your users to code with, then add them to your Blockly toolbox. Learn how in Create Custom Blocks Overview.
  3. Build the rest of the app. By itself, Blockly is just a way to generate code. The heart of your app is in deciding what to do with that code.
  4. Give Blockly attribution. If you'd like to let people know that you used Blockly to build your app, you can grab a Built on Blockly badge from the Attribution page.

Blockly's strengths and other options

Blockly is one of a growing number of visual programming environments. Deciding which one to use in your app is an important step, so here are a few of Blockly's biggest strengths to help you make the decision:

  • Exportable code. Users can extract their block-based programs to common programming languages and smoothly transition to text-based programming.
  • Open source. Everything about Blockly is open: you can fork it, hack it, and use it in your own sites and Android apps.
  • Extensible. Tweak Blockly to fit your needs by adding custom blocks for your API or removing unneeded blocks and functionality.
  • Highly capable. Blockly is not a toy. You can implement complex programming tasks like calculating standard deviation in a single block.
  • International. Blockly has been translated to 40+ languages, including right-to-left versions for Arabic and Hebrew.

Even with all those positives, Blockly isn't the solution for every app. Here are a few other visual editors that you might find helpful:

  • Scratch Blocks: Designed by the people behind MIT's Scratch and built on the Blockly code base, Scratch Blocks offers a simplified programming model ideal for young learners.

  • PXT: The visual and text-based programming environment that powers the Microsoft MakeCode editors. PXT bundles Blocks, TypeScript, a simulator, and a compiler in one library.

  • Droplet: The graphical programming editor that powers Pencil Code, its distinguishing feature is the ability to convert from code to blocks.

  • Snap: A Scratch-inspired graphical programming language, it's not a library but is instead a full app with an integrated execution environment.