JavaScript AST Explorer

How to explore a JavaScript AST

1. Paste your code into JavaScript code, or click Load the example to start from a small module.
2. Choose the Source type: Module (import/export, strict mode) for ES modules, or Script (classic) for ordinary scripts that may use sloppy-mode features such as with.
3. The tree updates a moment after you stop typing. Click Parse to run it immediately.
4. In the Syntax tree, click the small arrow to expand or collapse a node. Click a node’s name to select the matching code in the editor; the Selected node panel shows its type, the property it belongs to, its character range, its line and column, its simple properties (name, operator, raw value…) and its source text.
5. It also works the other way round: click anywhere in the code, move the cursor with the keyboard or select a piece of code, and the deepest node that contains it is expanded and highlighted in the tree.
6. Open ESTree JSON to see the full tree as JSON, with or without Include positions (start, end, loc), then Copy it or Download JSON.

The counters show the number of Nodes, the Maximum depth of the tree and the number of Top-level statements.

What is an abstract syntax tree?

Before a JavaScript engine, a linter or a bundler can do anything with your code, it parses the text into a tree of nodes. Each node has a type (VariableDeclaration, CallExpression, Identifier…) and child nodes stored in named properties. For total += size; you get an ExpressionStatement whose expression is an AssignmentExpression with the operator +=, a left identifier total and a right identifier size. Parentheses, semicolons and comments disappear: the tree keeps only the structure that matters, which is why it is called abstract.

This tool uses Acorn, the small and fast parser behind many JavaScript tools, with ecmaVersion: "latest". The output follows ESTree, the shared format also produced by Espree (ESLint) and understood by most code transformation tools. Knowing the exact node types is essential when you write an ESLint rule, a Babel or jscodeshift codemod, a Prettier plugin or any script that analyses code.

Positions, ranges and JSON export

Every node carries start and end, the offsets of its first and last-plus-one character in the source, and a loc object with lines (from 1) and columns. In the JSON, columns start at 0 as in Acorn’s output; the Selected node panel shows them from 1, like most editors. Uncheck Include positions (start, end, loc) to get a lighter JSON that is easier to compare between two versions of the code.

A few values cannot be written as JSON: regular expression literals get "value": null (their regex property keeps the pattern and flags) and BigInt literals are written as strings, as the ESTree specification recommends.

Limits and privacy

The code is parsed in your browser and never executed or sent anywhere: the parser only reads the text. The input is limited to one million characters. Very large trees are rendered on demand, a batch of children at a time, and a JSON too large to preview can still be downloaded. JSX and TypeScript are not standard JavaScript, so Acorn reports them as syntax errors.