What?

This tool creates a visual representation of Abstract Syntax Trees. The tree structure is a helpful way to think about programming languages, and how a computer is interpreting what has been typed.

That's because almost all programming languages use a tree-structure internally to represent the program at some point while compiling or running the code.

The diagrams here are abbreviated and not the "real" AST, as this is just intended to be a visual aid.

This uses JavaScript. Not all of JavaScript is supported. Lambdas, ArrowFuncs, List Objects, and plenty more I haven't gotten around to yet.

Why?

This project was created for use in my classroom. I use it as a visual aid while lecturing and explaining, on top of the students poking around and experimenting.

I wanted a way to explain the concepts of ASTs without explaining what ASTs are used for—I'm not teaching parsing or compiling, just how syntax works. My audience is introductory programming students. This tool generates the sorts of loose diagrams I found myself drawing on a whiteboard during lectures, something closer to a sketch than an accurate diagram—but also very much real and reactive to what is being typed.

This is not meant to represent the *actual* AST that the compiler is using. I found that showing students something like astexplorer.net is a lot of noise to filter through.

What I actually care about is making the connection between syntax and a tree-structure, not dissimilar to how my elementary school math teacher drew nested boxes when explaining the order of operations.

How?

This project uses the acorn JS parsing library to get the "actual" AST.

It then walks that tree and generates GraphViz source. It's rendered by the Viz-js package.

Both acorn and viz-js run locally as pure JS and a WASM module + JS wrapper, respectively. The execution happens in your browser, and no data is transmitted to any server. The only outside network connections this page should make are downloading acorn from a CDN.

The theme is 98.css, a library for building interfaces that look like Windows 98. It was both recommended and implemented by a student.