Why it matters
Linters, bundlers, codemods and minifiers all work on a syntax tree rather than on text. Writing an ESLint rule or a Babel or jscodeshift transform starts with knowing what that tree looks like for the code you want to match: which node types, which fields, and how they nest.
This explorer parses your code with Acorn, the parser behind webpack, Rollup and ESLint's espree, and shows the ESTree it produces. Click in the code to jump to the node under the cursor, or open the tree and click a node to highlight the code it covers. The output was checked node for node against meriyah, an independent ESTree parser, on more than 200 real files.
How to use it
- Paste your JavaScript.
- Choose module or script and the ECMAScript version.
- Click code or open tree nodes to explore.
- Download the JSON if you need it.
FAQ
What is an AST?
An abstract syntax tree: the structure of your code as nested nodes, such as a function declaration containing a block containing statements.
What is ESTree?
The common format for JavaScript syntax trees, used by Acorn, ESLint, Prettier, Rollup and many other tools.
Does it support TypeScript or JSX?
No. It parses standard JavaScript. Strip types and JSX first, or use a parser that supports them.
Why do I get a SyntaxError?
The code isn't valid for the chosen mode and version. import and export need module mode, and newer syntax needs a later version.
Credits and licences
Parses with Acorn 8.19.0 (MIT License, Marijn Haverbeke and contributors; licence text).
