Blockly Bridge Instructions

The Blockly Bridge allows you to power webpages with JavaScript without needing to deal with that language’s complex syntax up-front. It assumes familiarity with HTML and CSS, but not JS.

To use it:

1. Go through the DOM Tutorial if you haven’t already.

2. Add the following script tag to the end of any webpage:

   <script src="{{{baseURL}}}bridge/bridge.js"></script>

   Note that the webpage can be edited locally, or via online editors like Thimble, JS Bin, or Cloud9.

3. Load your webpage. You should see a link at the bottom-left of the page titled Open Blockly Editor. Click on it.

4. Drag puzzle pieces from the gray palette on the left into the workspace on the right. When you’ve constructed something, reload your webpage to load it with the code from the editor. Repeat this cycle until you’ve created something you like.

5. You can’t share your webpage just yet! To share it, you need to click the JS button at the top-right of the editor to view the JavaScript translation of your Blockly code. Select it and copy it to your clipboard.

6. Replace the script tag you added to your webpage in step 2 with the code in your clipboard. Now you can share your webpage.