Skip to content
Blockly blocks and generators for HTML generation and demo with live preview
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Jul 21, 2017
README.md
de.js
demo.html
en.js
example.png
html_blocks.js Add blocks for scripting, set block types on some blocks Sep 7, 2017
html_generators.js Define values ORDER_ATOMIC and ORDER_NONE so that Blocky does not thr… Oct 16, 2019
library_html.xml Update all XML documents with blockly developer tools Oct 16, 2019
library_html_german.xml Block libraries for Blockly developer tools (https://blockly-demo.app… Jul 21, 2017
toolbox.xml
workspace.xml Update all XML documents with blockly developer tools Oct 16, 2019

README.md

Blockly-HTML

Blockly blocks and generators for HTML generation and a demo with live preview.

The demo can be tested here: http://blocklyhtml.zgtm.de/

A German demo is available as well: http://htmlbausteine.zgtm.de/

Screenshot

Try the demo

The files blockly_compressed.js, blocks_compressed.js, javascript_compressed.js and msg/js/en.js of the Blockly repository need to be present in the directory blockly.

You can simply checkout the repository https://github.com/google/blockly or unzip https://github.com/google/blockly/archive/master.zip into the directory blockly. Or you can pick the files above manually to create an environment you can distribute without moving the whole Blockly source code around.

The demo saves the workspace in the local browser storage. Additionally, it supports importing and exporting blocks (Blockly XML) and exporting the HTML document.

A German localisation of the demo can be enabled by loading de.js instead of en.js in the header of the HTML file. (This also needs msg/js/de.js from Blockly.)

Library files

The files library_html.xml and library_html_german.xml are block libraries that can be used to modify the blocks using the Blockly developer tools: https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

TODO

  • Support more HTML tags and attributes
  • Enforce HTML tag-nesting rules via types
  • Many more …

Further ideas

  • Maybe support generating other markup languages (Markdown, LaTeX)
  • Add script-tag and allow for standard Blockly blocks in there
You can’t perform that action at this time.