AnyTool
Your files never leave your device. All processing happens locally in your browser.

How to view the AST of JavaScript or TypeScript code?

Paste or type JavaScript, TypeScript, JSX or TSX into AnyTool's AST Viewer and it parses the code with the real TypeScript compiler, rendering an interactive, clickable abstract syntax tree beside your editor. Click any node to highlight its exact source range. Everything runs 100% in your browser - no upload, no signup.

  • Live two-pane editor and clickable AST tree with bidirectional node-to-source highlight
  • Parses JS, TS, JSX and TSX in one tool via the genuine TypeScript compiler API
  • Node inspector shows SyntaxKind, span, NodeFlags, modifiers and copyable subtree JSON
  • 100% in your browser - no upload, no signup, works offline

What is

Abstract Syntax Tree (AST)

An abstract syntax tree is a structured, tree-shaped representation of source code where each node stands for a construct such as a function, variable, or expression. AST viewers let you inspect how a parser interprets your code.

Developer Tools

Related terms

SyntaxKindTypeScript Compiler APIESTreeCodemod

Frequently Asked Questions

No. Parsing runs entirely in your browser - no upload, no server, no runtime CDN.

AnyTool's AST Viewer is fully client-side. The TypeScript compiler runs in a Web Worker on your device, so your code never leaves the browser. There is no backend, no API call, and no runtime CDN fetch.

JavaScript, TypeScript, JSX and TSX, all through the real TypeScript compiler.

A single engine handles every flavour via ts.createSourceFile, so you can switch between JavaScript, TypeScript, JSX and TSX and toggle module versus script parsing. Each node resolves its SyntaxKind, NodeFlags and modifiers.

No. Type resolution is best-effort and single-file only, since nothing is fetched from the network.

An opt-in Resolve types toggle uses an in-memory TypeScript LanguageService for best-effort type and symbol hints. Because nothing leaves the browser, cross-file and external @types or library imports cannot resolve - it works on single-file, local code only.

Use the search box to filter by kind or text, then step through matches and jump to each one.

Type a SyntaxKind or text fragment into the tree search to filter nodes, then press Enter or the arrows to step through matches. The viewer expands ancestors, scrolls the virtualized tree to each hit and highlights its source range.

Detailed Explanation

How It Works

AnyTool AST Viewer Overview

The AnyTool AST Viewer parses JavaScript, TypeScript, JSX and TSX into an abstract syntax tree using the genuine TypeScript compiler. A CodeMirror editor sits beside an interactive, collapsible tree where each row shows the node's resolved SyntaxKind, field name, source text and key properties. Clicking a node highlights its exact source range, and moving the editor caret reveals the enclosing node with an ancestor breadcrumb.

  • Parses JS, TS, JSX and TSX through one TypeScript compiler engine
  • Bidirectional node-to-source highlighting with ancestor breadcrumb
  • Node inspector surfaces SyntaxKind, span, NodeFlags, modifiers and properties
Technical Details

How AST Parsing Runs Locally

The multi-megabyte TypeScript compiler is dynamically imported and runs inside a Web Worker, so typing stays responsive while re-parsing is debounced around 220 milliseconds. The serialized tree is a flat array virtualized with react-virtual, keeping 10k-node trees smooth. Sharing encodes the code and parser options into a pako-compressed URL hash rather than a server snippet store.

  • TypeScript compiler runs in a Web Worker, debounced re-parse near 220ms
  • Virtualized flat-array tree handles 10k-plus nodes smoothly
  • State shared via deflate-then-base64url URL hash, no backend
Limitations

Type Resolution Limits

By default the viewer parses syntax only. An opt-in Resolve types toggle spins up an in-memory TypeScript LanguageService for best-effort type and symbol hints, but it is slower and strictly single-file. Because the tool fetches nothing from the network, cross-file references and external @types or library imports cannot resolve, so types are limited to local, self-contained code.

  • Type resolution is opt-in, slower and single-file only
  • No network means external @types and library imports do not resolve
  • Default parsing is syntax-only via ts.createSourceFile
AnyTool AST Viewer vs typical online AST explorers
CapabilityAnyToolTypical alternative
Privacy / no uploadYes - 100% client-sideOften server-side persistence
Runtime CDN parser fetchNo - compiler bundled locallySometimes fetched from CDN
JS, TS, JSX and TSX in one toolYes - real TypeScript compilerOften single-parser or TS-only
Mobile and dark modeResponsive, dark-mode nativeFrequently desktop-only
Shareable stateCompressed URL hash, no signupServer snippet or gist account

Best-effort type resolution is opt-in and single-file; external library types do not resolve offline.