I have a blockly application which generates some output code. Now, is it possible to write some function which will take my output code and will put corresponding blocks on workspace. For example, on this page, /

Blocks are connected to generate javascript code, But is there any way, I will give javascript code and blocks will appear on workspace.

I have a blockly application which generates some output code. Now, is it possible to write some function which will take my output code and will put corresponding blocks on workspace. For example, on this page, https://developers.google./blockly/

Blocks are connected to generate javascript code, But is there any way, I will give javascript code and blocks will appear on workspace.

• javascript
• blockly

• 3 Although it's possible (to do something that works, with limitations), it's definitely not a trivial problem to solve generally. blockly can be seen in this context as a subset of JavaScript with an alternate representation based on simplified restricted syntax. Thus going from blockly to JavaScript is reliable (and to XML and back is reliable), but the inverse is not, because there are too many possibilities to account for. For a reliable implementation, you'd want to find and create an implementation of a restricted subset of JavaScript to use as input for converting "JS" to blockly. – user120242 Commented Jun 27, 2020 at 1:52
• 1 Or probably you can see it as converting source code to executable format. And then trying to convert the executable binary back to source code (after editing the binary). eg: How would you expect it to convert something like destructuring or iterators or even something simple like wrapped function closures? – user120242 Commented Jun 27, 2020 at 1:59
• it is, as user120242 states, not trivial, it's basically writing the back end of a piler. I have included a link in my answer below which is a working Python to Blocks piler for most of python, since it is Python it uses Sculpt.js to parse the Python into an abstract syntax tree, then walk the tree converting each node into XML which can then be concatenated into an XML document for Blockly (using Blockly.Xml.domToWorkspace method). If you can find a similar JavaScript to AST parser then you can probably attempt the same. Bear in mind that Blockly now uses a JSON format not XML. – James Cat Commented Jul 28, 2022 at 20:39

4 Answers 4

You can only create javascript from blocks, not blocks from javascript. However, You can export blocks to xml, and import back the xml to blocks. So you can always save your blocks anywhere you wish in xml format, and load those from xml back to your blockly workspace.

function saveBlocks() {
    var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
    var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
    // do whatever you want to this xml
}
function loadBlock(xml) { // xml is the same block xml you stored
    if (typeof xml != "string" || xml.length < 5) {
        return false;
    }
    try {
        var dom = Blockly.Xml.textToDom(xml);
        Blockly.mainWorkspace.clear();
        Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, dom);
        return true;
    } catch (e) {
        return false;
    }
}

We are working on a python-to-blocks system here https://www.npmjs./package/@pi-top/blockly it's a work in progress but pretty much deals with all of Python and is being built to work with the pi-top project website https://further.pi-top./ but you should be able to extract something useful, the main code->blocks functionality is in the src/piBlocks folder. The code is based on this project https://github./blockpy-edu/BlockMirror I mainly converted it to typescript, reorganised the code and linted it, with a few additions and bugfixes.

It can be done - see https://makecode.microbit/. If you create a block then edit as Javascript, you can edit and (if it's valid code) then it will show the correct blocks when you switch back to the block view. The javascript is a bit odd that it's generates - so don't expect it to turn any javascript into blocks...

This isn't part of Blockly - and I'm not sure how this has been done - just that it exists - hope this helps.

I don't remember seeing this feature in blockly, but it is definitely possible. You will have to write custom parsers for your language code and then build the blocks accordingly.

This was somewhat explored in this answer.

Basically as and when you parse the code, you need to programatically create the blocks and attach them together to create the program in blockly.