liminfoAST Explorer
Free web tool: AST Explorer
Tokens (44)
Simplified parser. Supports variable declarations, functions, if statements, and expressions.
About AST Explorer
The AST Explorer parses JavaScript code you type into a structured Abstract Syntax Tree and renders it as an interactive, collapsible tree view directly in your browser. The parser handles variable declarations (var, let, const), function declarations with parameters and body tokens, return statements, if statements with condition expressions, and general expression statements. Each node is colour-coded by its type — purple for Program, blue for FunctionDeclaration, green for VariableDeclaration, red for ReturnStatement, and orange for IfStatement.
Understanding Abstract Syntax Trees is essential for anyone working on compilers, transpilers, linters, code formatters, or Babel/ESLint plugins. This tool provides an accessible way to see how source code is represented as a tree of typed nodes, making it easier to learn how tools like Babel, TypeScript, and ESLint analyse and transform code at the structural level.
The code editor uses PrismJS for syntax highlighting, layering a transparent textarea over a highlighted pre element to give you a rich editing experience without any external IDE dependency. The tokenizer output section lists every token in the code — keywords, identifiers, numbers, strings, operators, and punctuation — colour-coded and counted, giving a second perspective on the lexical structure of your code.
Key Features
- Real-time JavaScript parsing — AST updates on every keystroke
- Collapsible tree nodes with expand/collapse controls for deep trees
- Colour-coded node types: Program, FunctionDeclaration, VariableDeclaration, ReturnStatement, IfStatement
- Token list view showing every lexical token with type and colour labels
- Syntax-highlighted code editor using PrismJS for JavaScript
- Split-pane layout showing source code and AST side by side
- Parses var/let/const, function declarations, if statements, and expressions
- 100% client-side — no code is sent to any server, works offline after load
Frequently Asked Questions
What is an Abstract Syntax Tree (AST)?
An Abstract Syntax Tree is a tree-shaped data structure that represents the syntactic structure of source code. Each node in the tree corresponds to a construct in the language — a variable declaration, a function, a conditional, or an expression. Compilers, transpilers, linters, and code formatters all work by parsing source code into an AST and then traversing or transforming that tree.
What JavaScript syntax does this parser support?
The built-in parser supports variable declarations (var, let, const), function declarations with named parameters and a body, return statements, if statements with conditions, and general expression statements. It handles keywords, identifiers, number and string literals, arithmetic and comparison operators, and common punctuation.
How are the AST nodes colour-coded?
Each node type uses a distinct colour: Program (purple), FunctionDeclaration (blue), VariableDeclaration (green), ReturnStatement (red), IfStatement (orange), and ExpressionStatement (grey). Child property nodes such as params, body, and init use the default grey colour. This makes it easy to identify different construct types at a glance.
What does the token list section show?
The token list (visible in the collapsible Tokens section below the tree) shows every token produced by the lexer before parsing. Tokens are categorised as Keyword (purple), Identifier (blue), Number (green), String (yellow), Operator, or Punctuation. The count shows how many tokens are in the current input.
How does the syntax-highlighted editor work?
The editor overlays a transparent textarea on top of a PrismJS-highlighted pre element. When you type, the textarea captures input and updates the code state, which triggers PrismJS to re-highlight the pre layer. Both elements scroll together so the highlighting stays aligned with the cursor.
Can I use this to learn how Babel or ESLint works?
Yes. This tool demonstrates the same conceptual steps — tokenization followed by recursive parsing into a node tree — that real-world tools like Babel, ESLint, and TypeScript use. While the built-in parser is simplified, exploring how it maps code constructs to tree nodes gives you a solid mental model for reading Babel plugin APIs and ESLint rule selectors.
Why does the parser not handle all JavaScript syntax?
The parser is a teaching-oriented simplified implementation that covers the most common constructs. It does not handle arrow functions, classes, destructuring, template literals, async/await, or module imports. For full AST exploration of all ECMAScript syntax, use tools like the official AST Explorer website with Babel or Acorn parsers.
Does the tool handle syntax errors gracefully?
Yes. The parser is designed to be fault-tolerant. If it encounters a token pattern it does not recognise, it emits an ExpressionStatement with the remaining tokens rather than throwing an error, so the tree always renders even for incomplete or syntactically incorrect input.