Tea Sitter - AST Explorer

This is a simple web application that allows you to explore the Abstract Syntax Tree (AST) generated by tree-sitter parsers.

It uses Tree-sitter's WebAssembly binding to parse code directly in the browser and generate its AST — no server required.

Todo

• Parse code from the built-in editor
• Generate AST visualization
  • Display the AST in a tree view
  • Display the AST in a graph view
  • Display the AST in a JSON view (I don't know if this is useful)
• PWA support
• highlight code in the editor when hovering on a node in the AST
• customize node information displayed in the AST
• Tree-sitter queries support
• Load code from a github URL

Supported Languages

• C
• JavaScript
• Python
• and maybe other grammars available in tree-sitter 👀

Installation

After cloning the repository, run the following command to install the dependencies:

npm install

Usage

To start the application, run the following command:

npm start

References

I took inspiration from the following projects:

• tree-sitter playground
• Neovim's InspectTree
• Swift AST Explorer
• TypeScript AST Viewer