AST Explorer
LivePaste JavaScript or TypeScript code and view the AST (Abstract Syntax Tree) visually.
Enter code to see AST
Understanding Code Formatting & Quality
An Abstract Syntax Tree (AST) is the structured, tree-form representation of source code that compilers, transpilers, linters, and code transformation tools use to understand and manipulate programs. Every tool in the JavaScript ecosystem — Babel, ESLint, Prettier, TypeScript compiler, webpack — works by parsing code into an AST, analyzing or transforming the tree, and regenerating code from the modified tree. Understanding ASTs is essential for writing custom ESLint rules, Babel plugins, codemods, and code generators.
Use this free online AST explorer to visualize the Abstract Syntax Tree of JavaScript and TypeScript code. Paste your code and instantly view a hierarchical tree of nodes — functions, variables, expressions, statements, and more. Click any AST node to highlight the corresponding source code. Essential for understanding how parsers and compilers interpret your code, building Babel plugins, ESLint rules, or codemods. Supports TypeScript AST exploration with full type annotation parsing.
The Devkitr AST Explorer parses JavaScript, TypeScript, HTML, CSS, or other languages into their AST representation and displays the tree as an interactive, navigable structure. Click on any code token to highlight the corresponding AST node, or navigate the tree to see which code each node represents. This bidirectional mapping makes understanding AST structure intuitive.
In a typical development workflow, AST Explorer becomes valuable whenever you need to paste javascript or typescript code and view the ast (abstract syntax tree) visually. Whether you are working on a personal side project, maintaining production applications for a company, or collaborating with a distributed team across time zones, having a reliable browser-based inspection tool eliminates the need to install desktop software, write one-off scripts, or send data to third-party services that may log or retain your information. Since AST Explorer processes everything locally on your device, your data stays private and your workflow stays uninterrupted — open a browser tab, paste your input, get your result.
Key Features
Code-to-Tree Highlighting
Click on any token in the source code panel to highlight and scroll to the corresponding AST node in the tree panel, showing exact structural mapping.
Tree-to-Code Highlighting
Click on any AST node to highlight the corresponding source code range, revealing exactly which code a specific tree node represents.
Multiple Parser Support
Parse code using different parsers (Babel, TypeScript, Acorn, Espree for ESLint) to see how each parser represents the same code differently.
JSON Tree Export
Copy the full AST as JSON for use in writing AST-matching patterns in custom ESLint rules, Babel plugins, or codemod scripts.
How to Use AST Explorer
Paste Your Source Code
Enter JavaScript, TypeScript, or other supported language code into the source panel.
Select a Parser
Choose the parser that matches your tool context — Babel for Babel plugins, Espree for ESLint rules, TypeScript for TS compiler plugins.
Explore the AST
Navigate the tree structure, clicking nodes to understand how constructs like function declarations, expressions, and statements are represented.
Export AST Data
Copy specific node types and structures to use as reference when writing custom AST-based transformations or lint rules.
Use Cases
Writing Custom ESLint Rules
Explore how ESLint's parser represents code patterns to write accurate AST selectors and visitor functions for custom linting rules.
Building Babel Plugins
Understand Babel's AST node types and structure to write visitor patterns that transform code correctly during transpilation.
Creating Codemods
Explore AST node types for code patterns you want to find-and-replace across large codebases using jscodeshift or ts-morph.
Learning Compiler Internals
Use the explorer to understand how programming language constructs are represented in tree form — the foundation of all language tooling.
Pro Tips
Start by exploring simple expressions (1 + 2, a.b, function() {}) to understand basic node types before examining complex code.
Compare how different parsers represent the same code — Babel and TypeScript parsers produce different AST formats for identical input.
Focus on the "type" field of each node — ESLint selectors and Babel visitors both use node type names to match patterns.
Export the AST JSON for specific code patterns and use it as test fixtures when developing custom AST transformation plugins.
Common Pitfalls
Assuming all JavaScript parsers produce identical AST structures
Fix: Babel, Espree, Acorn, and TypeScript parsers all produce different AST formats. Choose the parser that matches the tool you're writing plugins for.
Ignoring node location data (start, end, loc) when writing codemods
Fix: Location metadata is essential for code generation and source map creation. Preserve loc data when creating or modifying AST nodes in transformations.
Trying to match code patterns by node type alone without checking properties
Fix: Many constructs share the same node type but differ in properties. Check both node type and specific properties (operator, name, kind) for accurate matching.
Frequently Asked Questions
QWhat is an AST explorer?
An AST explorer parses your code into an Abstract Syntax Tree and displays it visually, letting you see how compilers and tools interpret your JavaScript or TypeScript source code.
QDoes this AST explorer support TypeScript?
Yes. The AST explorer fully supports TypeScript AST parsing including type annotations, interfaces, generics, enums, and modern TypeScript syntax.
QWhat parser does the AST explorer use?
It uses a lightweight AST parser with Acorn-compatible output format for JavaScript, with extended support for TypeScript syntax.
QCan I use this AST explorer for building ESLint plugins?
Yes. Understanding the AST structure is essential for writing ESLint rules, Babel plugins, and codemods. This tool helps you explore node types and structures.
Related Articles
Related Tools
SQL Formatter
SQL beautifier — format and beautify SQL queries with proper indentation online.
HTML Formatter
Beautify HTML code with proper indentation, nesting, and readability.
CSS Beautifier
Beautify minified or messy CSS with consistent formatting and indentation.
XML Formatter
Format and beautify XML documents with proper indentation and structure.