AST Explorer

About AST Explorer

Paste JavaScript, TypeScript, JSON, or CSS and see its abstract syntax tree as a collapsible JSON viewer. Switch between parsers — Acorn, @babel/parser, and TypeScript — to compare how each tokenizes your source. Click any node to highlight the matching span in your code. Indispensable for writing codemods, ESLint rules, Babel plugins, or learning how parsers work.

How to Use AST Explorer

Learn how to visualize and analyze the abstract syntax tree of your source code using various parsers.

1. 1

   Paste your code into the editor

   Insert your JavaScript, TypeScript, JSON, or CSS code into the main input area to begin the analysis.

2. 2

   Select your preferred parser

   Choose between parsers like Acorn, @babel/parser, or TypeScript to see how each specific engine tokenizes your source.

3. 3

   Explore the collapsible JSON tree

   Navigate the generated abstract syntax tree in the viewer to inspect nodes, properties, and nested structures.

4. 4

   Click nodes to highlight source code

   Select any node in the AST viewer to instantly highlight the corresponding span of code in the editor.

5. 5

   Analyze tokens for development tasks

   Use the structural data to help you write custom ESLint rules, Babel plugins, or complex codemods.

Estimated time: PT2M

Frequently Asked Questions

Related Articles

AST Explorer Guide: Visualizing Abstract Syntax Trees

Learn how to use AST Explorer to visualize code as syntax trees. Compare parsers like Acorn and Babel to build ESLint rules and codemods efficiently today.