Generating blockly svg from json on command line

52 views
Skip to first unread message

Alan Smith

unread,
Mar 12, 2026, 9:44:01 AMMar 12
to Blockly
I am creating some printed documentation (that uses latex) and would like to have the screenshots generated by blockly so I don't have to do a lot of manual work.

I am sure that I am not the first to do this and am wondering if anyone has a way to on the command line pass in the blockly json, have it rendered to an SVG and written to a file then I would appreciate it.

Thanks in advance,

Alan

Maribeth Moffatt

unread,
Mar 13, 2026, 10:41:49 AMMar 13
to Blockly
Hey Alan,

I'm not aware of anyone doing this but hopefully if anyone has they'll chime in.

I think this would be complex because while you can run Blockly in headless mode from something like a node script, nothing would be rendered. You can't accurately create a screenshot without a rendering environment like a browser because of the way we do some of our rendering logic. for example, we use the browser to determine how wide block text will be based on the actual style of the text. I'm not sure how you could replicate that without a browser.

You could potentially use some web testing tools that automate opening a browser like webdriver. Whether that's less work than doing it manually would probably depend on how many screenshots you had to take.

Sorry I can't be of more help.

Best,
Maribeth

ewpa...@gmail.com

unread,
Mar 13, 2026, 11:54:40 AMMar 13
to Blockly
I did write something like this years ago for App Inventor to help with generating SVGs of blocks for our IOT materials (example). I will try to dig up the code but IIRC it's pretty tightly coupled to how App Inventor's implementation of Blockly works. It may better serve as a guideline rather than something off the shelf you can use.

Cheers,
Evan

ewpa...@gmail.com

unread,
Mar 13, 2026, 12:21:48 PMMar 13
to Blockly
Ok, I managed to find it. It's 9 years out of date though. We made use of PhantomJS at the time for running headless code and have since switched to using Firefox headless. Here's a link to the Javascript code that processes an App Inventor extension, builds the blocks in a workspace, and emits the SVG code + Markdown for docs.

Cheers,
Evan

Alan Smith

unread,
Mar 13, 2026, 12:28:00 PMMar 13
to blo...@googlegroups.com
Evan,
   Thanks for sharing this!!  

--Alan

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/7015d161-0d38-4155-ba0e-1495690500ecn%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages