Privacy
Allow analytics and ads (GA4 + AdSense) on this site?
Playground

Inspect TypeScript AST without project setup

Paste TypeScript code, choose a preset and see the node kinds, ranges, diagnostics and source slices produced by the compiler API. Parsing runs locally in the browser.

  • Browser-only
  • SyntaxKind + ranges
  • Compiler API snippet

Why inspect AST

AST shows code structure the way the TypeScript parser understands it. That helps when writing lint rules, codemods, generators and refactoring tools without guessing from raw text.

Code is not sent to a backend. TypeScript compiler API loads after you run analysis and stays inside the current tab.

Analyze a snippet

Choose a preset or paste your own code. The result shows the AST tree, diagnostics and details for the selected node.

Type declaration, function parameters and call expression for reviewing FunctionDeclaration, Parameter and CallExpression.

TypeScript code

The MVP parses TSX, reports syntax diagnostics and never executes code.

Parser result

No result

Click Analyze AST to build a tree for the current code.

Keep in mind

  • `pos` can include comments and whitespace; `getStart` usually points to the first meaningful token.
  • The MVP parses as TSX, so JSX/TSX goes through the same compiler API path.
  • When syntax is broken, a tree may still exist, but some nodes can come from parser recovery.
  • Large files are limited to avoid locking the browser tab.

Compiler API, Babel or regex

TypeScript compiler API

Best when you need native TypeScript syntax, parser diagnostics and `SyntaxKind`.

Babel parser

Excellent in the JavaScript transform ecosystem, but it uses a different representation than TypeScript compiler.

Regex/manual inspection

Fast for simple search, risky for refactoring and structural changes.

FAQ

Is code sent to the server?

No. Parsing runs in the browser and user input is not sent to a backend.

Why are `pos` and `start` different?

`pos` often includes trivia such as comments and whitespace. `start` points to the first meaningful token.

Can I inspect TSX?

Yes. The MVP creates the source file as TSX, so JSX and decorators are handled by compiler API.

Is this the same as type-checking?

No. This is a syntax AST and parser diagnostics viewer, not a full TypeScript program with type resolution.

What is the compiler API snippet for?

It lets you reproduce traversal locally and start writing a rule, codemod or analysis tool.