JavaScript AST Viewer
Inspect JavaScript Abstract Syntax Tree (AST) node representations.
Syntax Checker & Code Validator
About JavaScript AST Viewer
The JavaScript AST (Abstract Syntax Tree) Explorer & Token Visualizer parses ECMAScript and TypeScript code into ESTree-compliant Abstract Syntax Trees, displaying node types (`FunctionDeclaration`, `BinaryExpression`, `Identifier`), scope chains, and lexical tokens.
How to Use JavaScript AST Viewer
Step 1
Type or paste JavaScript code into the source editor.
Step 2
Hover over or click code tokens to highlight corresponding AST nodes in the tree.
Step 3
Explore node properties (`loc`, `type`, `params`, `body`).
Step 4
Copy the AST JSON tree.
Practical Use Cases for JavaScript AST Viewer
Babel Plugin & ESLint Rule Development
Inspect exact AST node structures and visitor patterns to author custom Babel code transformations, codemods, and ESLint linting rules.
Compiler & Static Analysis Education
Understand how JavaScript parsers tokenize variable declarations, function scopes, and closure bindings into tree hierarchies.
Input & Output Examples
Parsing `const x = 10 + 2;`
`const x = 10 + 2;`
`Program` $\\rightarrow$ `VariableDeclaration (const)` $\\rightarrow$ `VariableDeclarator` (id: `Identifier(x)`, init: `BinaryExpression(+)` left: `Literal(10)`, right: `Literal(2)`)
Key Features & Performance
- ✓ESTree compliant AST output compatible with Babel, Acorn, ESLint, and SWC.
- ✓Interactive visual tree and raw AST JSON output modes.
- ✓Click-to-highlight synchronization between source code and corresponding AST nodes.
- ✓100% Client-Side memory execution via Acorn parser.
- ✓1-Click Copy AST JSON representation.
Key Terminology & Definitions
ESTree Specification
The community standard object model representing JavaScript Abstract Syntax Trees across Babel, ESLint, Acorn, and Prettier.
Visitor Pattern
A design pattern used in compiler AST traversal where handler functions are invoked upon entering and exiting specific node types.