Blockly is 100% client side, requiring no support from the server (unless one wants to use the cloud-storage feature). There are no 3rd party dependencies (unless one wants to recompile the core). Everything is open source.
Get the Code
First, download the source code from GitHub. If you know how to use Git or Subversion, we highly recommend syncing from our repository so that your code stays up to date.
Once you have the code, point your browser at
verify that blocks can be dragged around.
With your installation of Blockly verified as working, inject Blockly into a
web page using a fixed-size
→ More info on injecting fixed-sized Blockly...
More advanced web pages may wish to allow Blockly to resize to fill the page.
→ More info on injecting resizable Blockly...
Blockly is highly configurable. For instance, you may set the theme or renderer on a workspace, set a workspace to RTL mode, or select from a variety of zoom and scroll modes.
Configuration is done per-workspace, by passing a configuration struct when injecting a Blockly workspace.
→ More info on configuring a workspace...
In addition to the default blocks that come with Blockly, custom blocks need to be built to call your web application's API. An example is this maze game which has custom blocks for movement.
→ More info on creating custom blocks...
→ More info on code generators...
Importing and Exporting Blocks
If your application needs to save and store the user's blocks and restore them at a later visit, use this call for export to XML:
var xml = Blockly.Xml.workspaceToDom(workspace); var xml_text = Blockly.Xml.domToText(xml);
This will produce a minimal (but ugly) string containing the XML for the user's
blocks. If one wishes to obtain a more readable (but larger) string, use
Restoring from an XML string to blocks is just as simple:
var xml = Blockly.Xml.textToDom(xml_text); Blockly.Xml.domToWorkspace(xml, workspace);
Blockly comes with an optional cloud-storage feature. It enables users to save, load, share, and publish their programs. If your project is hosted on App Engine you can take advantage of this service.
→ More info on Cloud Storage...