JavaScript AST Viewer
Paste JavaScript or TypeScript and explore its syntax tree — powered by the real TypeScript compiler.
Code → AST
JavaScript
AST
Loading the TypeScript compiler…
Loading parser…
What this tool does
Paste code and this viewer shows you exactly how the TypeScript compiler parses it: a collapsible tree of SyntaxKind nodes with their source spans. Hover any node and its source text lights up in the editor — the fastest way to learn what a piece of syntax actually is, debug a codemod or lint rule, or explore how JSX and type annotations shape the tree. Parsing is tolerant, so even broken code shows its best-effort tree alongside a line-accurate error. Everything runs in your browser.
How to use it
- Paste your code into the left pane — or hit Upload (the mode is auto-detected from the file extension).
- Pick the mode: JS, JSX, TS, or TSX — it decides how the parser treats angle brackets and type syntax.
- Explore the Tree — click a node to collapse it, hover to highlight its source in the editor.
- Copy AST, or open the Download menu to save the AST as
.jsonor the source file.
Frequently asked questions
Is my code uploaded anywhere?
No. The TypeScript compiler runs entirely in your browser — it loads as part of this page, and your code is never sent to a server, logged, or stored.
What parser produces the AST?
The real TypeScript compiler (
ts.createSourceFile) — the same parser your editor and build tools use. Node names are TypeScript SyntaxKinds, and each node shows its source span.What are JSX / TS / TSX modes for?
They set the parser's script kind. Type annotations and interfaces are errors outside TS/TSX — and TS vs TSX changes how angle brackets read:
<T>value is a type assertion in TS but a JsxElement in TSX. (JSX itself parses in JS mode too, exactly like a .js file.)Why do I still see a tree when my code has an error?
TypeScript parses tolerantly: it reports the first syntax error — named in the status bar and underlined in the editor — and still produces its best-effort tree, which is often exactly what you need to see what the parser made of the broken code.
What do the numbers next to each node mean?
The node’s character span in the source (start–end, including leading trivia like whitespace and comments). Hover any node and the corresponding source text lights up in the editor.