Portfolio

Graaf

Node-graph editor that generates C++, Python and JavaScript in the browser

  • Hobby project
  • AI-assisted

Graaf serves as a show-room and sandbox to show how code can be generated from a node-graph editor. Wire the nodes together and Graaf writes the code for the graph as you edit, in C++, Python or JavaScript.

White wires carry control flow and coloured wires carry data. Branches, switches and loops become structured if/else, switch and for blocks that end where their paths meet again, so the result reads like code a person would write rather than a pile of gotos.

Templates and overloads work like they do in C++: types are deduced across the whole graph, in both directions, and concepts such as arithmetic narrow down the overloads. A Type resolution tab records every step of that, and can replay how each type was decided on the canvas. Generated JavaScript and Python can be run right in the browser, the latter with Pyodide.

Nodes are defined in a small language of their own, so you can add your own alongside the built-in ones. Graaf is plain JavaScript with no build step and no dependencies.

Date
2026
Tech
  • JavaScript
  • HTML
  • CSS