AST Explorer

Parse JavaScript into its Abstract Syntax Tree and explore every node interactively.

JavaScript Input

AST Output

Click "Parse AST" to explore the syntax tree

About this tool

Paste JavaScript, TypeScript, CSS, HTML, or JSON code and explore its Abstract Syntax Tree (AST) interactively. Click any node in the tree to highlight the corresponding source code. Choose from multiple parsers including Babel, Acorn, TypeScript, and PostCSS. Indispensable for writing codemods, ESLint rules, Babel plugins, and understanding how parsers work.

How to Explore a JavaScript AST

1Paste your code into the left panel.
2Select the language and parser from the dropdown menus.
3The AST tree appears on the right - expand nodes to explore.
4Click any node in the tree to highlight the corresponding source code.
5Click source code to jump to that node in the tree.

Frequently Asked Questions

What is an Abstract Syntax Tree (AST)?+

An AST is a tree representation of source code's structure. Each node represents a syntactic construct - function declarations, variable assignments, expressions. Compilers, linters, and formatters all work by manipulating ASTs rather than raw text.

Which parsers are available?+

JavaScript/TypeScript: Babel, Acorn, Esprima, TypeScript compiler. CSS: PostCSS, CSSTree. HTML: parse5. JSON: built-in. Each parser has slightly different node types and property names.

How do I use AST Explorer for writing ESLint rules?+

Paste the code you want to lint, find the node type in the AST, and use that node type as the key in your rule's visitor object. The node's properties become what you check and report.

What is a codemod?+

A codemod is a script that transforms source code by manipulating its AST rather than using regex. Tools like jscodeshift use ASTs to safely rename variables, change API calls, or restructure code across an entire codebase.

Looking for a deeper guide on this topic? Browse the Searchlight blog.

Visit the blog →

Related tools

View all Code Tools →