AST Visualizer
What is AST Visualizer?
AST Visualizer is an interactive tool that transforms your code into beautiful tree diagrams. Paste in any TypeScript or JavaScript code, and instantly see its Abstract Syntax Tree rendered as a visual graph.
Inspired by the popular AST Explorer, this project takes a different approach. Instead of showing raw JSON output, it renders the AST as an interactive, zoomable tree structure you can explore visually.
What is an Abstract Syntax Tree?
An Abstract Syntax Tree (AST) is a tree representation of your source code's structure. When a compiler or interpreter reads your code, it first parses the text into an AST before doing anything else.
Every node in the tree represents a construct in your code—variables, functions, expressions, and statements all become nodes with relationships to each other.
Understanding ASTs helps you:
- Write better code transforms and linters
- Build custom Babel or ESLint plugins
- Debug compilation issues
- Learn how programming languages actually work
How to Use It
- Visit astvisualizer.dev
- Paste or type your code in the editor panel
- Watch the tree diagram update in real-time
- Click and drag to pan around the graph
- Scroll to zoom in and out
- Click on nodes to inspect their details
Use Cases
Learning — If you're studying compilers or language design, seeing the AST visually makes abstract concepts click. It's one thing to read about "binary expressions" and another to see them in a tree. Teaching — Great for workshops, courses, or blog posts about code parsing. Screenshots of the visualizer make excellent teaching aids. Debugging Transforms — When writing Babel plugins or codemods, visualizing the before and after ASTs helps you understand exactly what your transform is doing. Exploring Languages — Curious how TypeScript handles a specific syntax? Paste it in and see exactly how it's represented internally.
Try It Out
View the source code on GitHub.
About This Project
AST Visualizer started as a side project to better understand how TypeScript parses code internally. While tools like AST Explorer are incredibly useful for their detailed JSON output, I wanted something more visual—a way to see the tree structure at a glance.
It's not meant to replace AST Explorer for serious development work. But for learning, teaching, and getting a quick visual overview of code structure, it fills a nice gap.