🌳 AST Explorer
Write JavaScript and watch a recursive-descent parser tokenize and build an abstract syntax tree in real time. Click tree nodes to highlight their source range, or hover over code to find the corresponding AST node. No external parsing libraries are used — the parser is built from scratch.
Examples
Source Code
123
AST Tree
Total Nodes:
0Tree Depth:
0Parse Time:
0.00 msHow it works
This explorer uses a hand-built recursive-descent parser with two phases: first a tokenizer scans the source into tokens (keywords, identifiers, numbers, strings, operators, punctuation), then a parser consumes tokens and builds a tree following JavaScript grammar rules.
Operator precedence is handled by layering parse functions — multiplicative operators bind tighter than additive, which bind tighter than comparison, and so on. The parser gracefully recovers from errors: when it encounters an unexpected token it records an error and skips ahead, producing a partial AST rather than crashing.
Each node stores its character offsets in the original source, enabling the bidirectional highlighting: click a tree node to see its source range, or hover over source characters to find the deepest AST node that covers them.