T
ast compiler eslint babel typescript parsing

AST Explorer and Visualizer Guide: Understanding Abstract Syntax Trees

Learn how Abstract Syntax Trees (AST) power compilers, linters, and formatters. Discover tools for visualizing JS, TS, and CSS ASTs like ESTree and PostCSS.

2026-04-13

AST Explorer and Visualizer Guide: Understanding Abstract Syntax Trees

Ever wondered how your code editor knows when you have a syntax error, or how ESLint can automatically fix your code? The answer lies in the Abstract Syntax Tree (AST). An AST is a tree-like representation of the structure of your source code, and it is the foundation of modern web development tools like Babel, Prettier, and TypeScript.

1. What is an Abstract Syntax Tree (AST)?

When a compiler or a tool reads your source code, it doesn't just treat it as a long string of text. Instead, it goes through several phases:

  1. Lexical Analysis (Tokenizing): Breaks the code into "tokens" (e.g., keywords, identifiers, operators).
  2. Syntax Analysis (Parsing): Arranges these tokens into a tree structure that reflects the grammar of the language.

The resulting AST strips away unnecessary details like comments, whitespace, and semicolons (hence "abstract") and focuses on the structural relationship between different parts of the code.

2. Why is AST useful for Compilers, Linters, and Formatters?

ASTs are the universal language for tools that analyze or transform code:

  • Compilers (e.g., Babel, TypeScript): Transform an AST from one version (like ES6) into another (like ES5) before generating the final JavaScript.
  • Linters (e.g., ESLint): Traverse the AST to find patterns that violate rules (e.g., "no-unused-vars") and can even modify the tree to "auto-fix" errors.
  • Formatters (e.g., Prettier): Parse your code into an AST and then regenerate it from scratch according to a consistent set of rules, ignoring your original formatting.

3. Visualizing AST for JS, TS, and CSS

Different languages use different AST specifications:

  • JavaScript/TypeScript (ESTree): Most JS tools follow the ESTree specification. In this tree, a variable declaration is represented as a VariableDeclaration node, which contains VariableDeclarator nodes.
  • CSS (PostCSS/CSSTree): CSS is also parsed into an AST. Tools like PostCSS use this to handle vendor prefixes, variables, and nesting.

4. How to use an AST Explorer

The best way to understand an AST is to see it in action. AST Explorer (astexplorer.net) is an essential online tool for developers.

  1. Paste your code: Put your snippet in the left pane.
  2. Choose your parser: Select the language (JavaScript, CSS, JSON, etc.) and the parser (e.g., @babel/parser, typescript).
  3. Inspect the Tree: Click on different parts of your code to see the corresponding node in the tree structure on the right.

5. Common Tools Powered by ASTs

  • Babel: The industry standard for transpiling JavaScript.
  • ESLint: The most popular linter, which uses the espree parser to create an AST.
  • Prettier: An opinionated code formatter that uses multiple parsers (Babel, TypeScript, Flow) to build ASTs.
  • SWC: A fast, Rust-based compiler that also uses ASTs for transformation.

FAQ (Frequently Asked Questions)

Q: What is a Parser?

A: A parser is the piece of software that takes source code as input and produces an AST as output. Examples include Acorn, Babel Parser, and Esprima.

Q: What is the difference between a Source Map and an AST?

A: An AST is a structural representation used for analysis and transformation. A Source Map is a mapping file that tells the browser how the transformed/minified code relates to the original source code for easier debugging.

Q: Can I build my own linter using AST?

A: Yes! Tools like ESLint allow you to write custom rules. You define a visitor function that "visits" specific node types in the AST and reports errors when certain conditions are met.

Related on Tool3M

  • Code Minifier: See how code is compressed by transforming and simplifying the AST.
  • JSON Formatter: Visualize your JSON data structure as a clean, interactive tree.
Back to Blog