This is my first post in the Deliberate Curiosity series. I built an MIT Scratch inspired drag-and-drop editor that can generate ZAP automation framework plans in YAML.

A screenshot of a webpage that is split into two. One-fourth of the page on the left is a YAML code viewer, while the rest of the page has drag-and-drop components for visual programming.
A screenshot of the project page. Try it out yourself at /zap-af-visual-editor.

The heavy lifting of this project is being done by Google Blockly. I found its API a little tricky to work with, maybe because it’s my first time writing TypeScript, but I think the whole thing turned out pretty well overall. A Blockly feature that I found cute is the sound that is played when two blocks click together or when a block is deleted.

In addition to Blockly, I used CodeMirror for displaying and highlighting the generated YAML, Tailwind CSS for styling, and Vite to package everything together.

For the purposes of this experiment I only added two custom blocks - one for the automation environment and one for contexts passed to the environment - and they’re not fully complete either. I don’t expect anyone to actually use this but it was a fun way to spend the weekend.

My initial plan was to create and render Mermaid diagrams using ZAP Automation Framework plans, which I got a working prototype ready for very quickly (thanks to LLMs), but I liked the Blockly idea more and spent more time on that.

A screenshot of a webpage that is split into two. Half of the page on the left is a YAML code viewer, while the other half of the page has a rendered mermaid flowchart.
Rendering mermaid diagrams from automation framework plans.

Something to note is that this idea of using a drag-and-drop editor to generate YAML is not restricted to ZAP automation framework plans. For example, this could be used to generate GitHub workflows or even Kubernetes objects. Maybe it’s worth writing a more general-purpose YAML generator for Blockly and have an easy way to describe custom objects (e.g. using a subset of JSON Schema).

Anyway, that’s all for now! I really enjoyed working on this project. The code is available at ricekot/zap-af-visual-editor on GitHub and you can try the editor yourself at /zap-af-visual-editor. If you try it out and have any comments or suggestions, please write to me at hello[at]ricekot[dot]com.