JavaScript & JSON AST Tree Visualizer
Parse JavaScript source code and JSON payloads into Abstract Syntax Trees (AST) in real time. Explore hierarchical syntax nodes (`FunctionDeclaration`, `BinaryExpression`, `Identifier`, `Literal`), inspect token scopes, and understand how compilers analyze code.
Paste valid JavaScript code on the left to render the interactive AST syntax tree.
Understanding Abstract Syntax Trees (AST), Compilers, & Code Analysis Engines
In computer programming language theory, an **Abstract Syntax Tree (AST)** is a hierarchical tree representation of the abstract syntactic structure of source code written in a programming language. Each node of the tree denotes a construct occurring in the source code.
Every modern software development tool you rely on daily — including JavaScript compilers (**Babel**, **SWC**, **TypeScript**), code linters (**ESLint**), code formatters (**Prettier**), bundlers (**Webpack**, **Vite**, **Rollup**), and code minifiers (**Terser**) — relies heavily on AST parsing to analyze, transform, and generate code.
The HiFi Toolkit AST Tree Visualizer brings industrial-grade compiler parsing to your browser using `@babel/standalone`. By parsing JavaScript text into an interactive, collapsible node graph, developers can inspect exactly how code is tokenized and transformed.
The 3 Pipeline Stages of a Compiler
1. Lexical Analysis (Lexing)
Breaks raw character streams into a sequence of atomic tokens (keywords `const`, identifiers `x`, operators `=`, literals `10`).
2. Syntactic Analysis (Parsing)
Transforms flat token arrays into a nested tree structure (the AST) matching the formal grammar rules of JavaScript (ESTree spec).
3. Transformation & Code Gen
Plugins traverse the AST tree, modify or optimize nodes (e.g. polyfilling ES6 arrow functions down to ES5 `function`), and generate output JavaScript.
Common AST Node Types Explained
| AST Node Type | Description | Source Code Example |
|---|---|---|
FunctionDeclaration | Declares a named function with parameters and block body | function add(a, b) { ... } |
VariableDeclaration | Declares variables using const, let, or var | const total = 100; |
BinaryExpression | An operation involving two operands and an operator | price * taxRate |
Identifier | A user-defined variable, function, or property name | calculateTotal |
Literal | A fixed primitive value (number, string, boolean, null) | "Hello World" or 42 |
How to Explore AST Trees
- Input JavaScript Code: Type or paste any valid JavaScript code snippet into the left code editor.
- Inspect Collapsible Nodes: The right tree pane renders the AST root node (`Program`). Click the small arrows (▶ / ▼) to expand child nodes.
- Inspect Properties: Expand `params`, `body`, `init`, or `declarations` to see exact token types and literals.
