Privacy
Do you allow measurement and integrations that are enabled for this host profile?
Parser AST

typescript-eslint Parser Playground (Learning Mode)

A private playground for reading parser output, diagnostics, node ranges and selector hints while designing ESLint rules for TypeScript.

  • Code stays in the browser
  • ESTree-like learning mode
  • Node selectors and parent path

Parser workbench

Pick a preset or paste a TS/TSX/JS snippet. The worker builds a node tree with diagnostics and selector hints.

ESTree-like learning mode

Interface, generic type, union literals and Array<T> for TSInterfaceDeclaration and TSTypeReference.

Input

AST output

Ready to parse

Run the parser to see the node tree, selected node details and diagnostics.

What this playground parses

The MVP shows the perspective an ESLint rule author needs: node type, text range, line/column positions, parent path, selector hint and parser diagnostics. The real @typescript-eslint/parser package did not pass the browser-bundle gate without Node-only dependencies, so the production mode is explicitly labeled as an ESTree-like learning mode based on the TypeScript compiler API. It is not full parser parity, but it is a practical private model for learning AST shape and designing selectors.

ESTree, TypeScript AST and RuleTester

ESTree vs TypeScript AST

TypeScript AST Viewer shows raw compiler API SyntaxKind. This playground maps important nodes toward rule-authoring names such as TSInterfaceDeclaration, TSTypeReference, JSXElement and CallExpression.

Open TypeScript AST Viewer

When to move to RuleTester

After the selector and diagnostics are clear, move to ESLint Rule Tester Playground or a repository test suite. There you check messageId, valid/invalid fixtures and autofix output.

Open ESLint Rule Tester

What the MVP does not do

There is no projectService, parserServices, type-aware linting, tsconfig filesystem context or rule execution. Input is capped at 50,000 characters, the tree at 5,000 nodes and depth at 64.

FAQ

Is this the full @typescript-eslint/parser?

No. This is the approved educational fallback after the browser gate. The UI shows ESTree-like learning mode so it does not imply full parser or parserServices parity.

Does my code go to a backend?

No. The snippet is parsed in a browser worker and is not sent to the server.

Can I inspect TSX?

Yes. The TSX preset uses ScriptKind.TSX and shows JSXElement, JSXAttribute and call expressions.

When do I need type-aware linting?

If a rule needs symbol resolution, semantic type information or project references, move the test into a repository with official @typescript-eslint/rule-tester and projectService.