Blockly is a Javascript library for building visual programming editors.
It has grown from a one-person project in 2011 to a core component of many
educational applications. This page preserves some working snapshots leading
up to Blockly's initial public release.
Blockly started life in the summer of 2011 as a test of rendering blocks. In this demo one can build an arbitrary block, complete with colours, connectors, inputs, and tooltips. The goal was to replicate MIT's Open Blocks project, but using JavaScript (instead of Java) and preferably with fewer horrific rendering bugs.
Archive directory. (Click on "blockFactory.html")
A few months later Blockly was able to create blocks one by one, drag them around, and connect them to each other. New features included a single editable field, comments, and a trash can.
Archive directory. (Click on "blockFactory.html")
By early 2012 Blockly was a functioning programming environment. A small selection of pre-defined blocks had been created, and they could be used to generate JavaScript code. Other key features included scrollbars on the workspace, right-to-left support, and the "airstrike" performance test.
Archive directory. (Click on "blockFactory.html")
With all the fundamentals working solidly, user-visible progress accelerated rapidly. By the initial release we had a toolbox, a healthy selection of blocks, dropdown fields, named variables, and even primitive mutators. Blocks could generate JavaScript, Dart, or Python. Blocks could also serialise to and from XML. More importantly, a set of demos was now available so that developers could see Blockly in action.
Archive directory. (Click on "blockFactory.html" and "demos/")
