Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tree-sitter/tree-sitter/llms.txt

Use this file to discover all available pages before exploring further.

The Tree-sitter web playground is an interactive tool that allows you to experiment with Tree-sitter parsers directly in your browser.

​
Online Playground

You can access the online playground at:

Tree-sitter Playground

Try Tree-sitter with pre-selected grammars in your browser

​
Features

The playground provides several powerful features for exploring how Tree-sitter parsers work:

​
Syntax Tree Visualization

The syntax tree updates in real-time as you type in the code editor. As you move around the code, the current node is highlighted in the tree. You can also click any node in the tree to select the corresponding part of the code.

​
Query Testing

You can enter one or more query patterns into the Query panel. If the query is valid, its captures will be highlighted both in the Code and in the Query panels.
To see any query results, you must use at least one capture, like (node_name) @capture-name
If the query is invalid, the problematic parts will be underlined, and detailed diagnostics will be available on hover.

​
Supported Languages

The online playground includes pre-selected grammars for:

Bash

C

C++

C#

Go

HTML

Java

JavaScript

PHP

Python

Ruby

Rust

TOML

TypeScript

YAML

​
Display Options

The playground provides several display options:
  • Log: Enable logging (visible in the browser’s console)
  • Show anonymous nodes: Display anonymous nodes in the syntax tree
  • Query: Toggle the query panel
  • Accessibility: Enable accessibility features

​
Local Playground

You can also run the playground locally with your own grammar using the CLI’s tree-sitter playground command: 
tree-sitter playground
This allows you to test your custom parsers during development.

​
Building Wasm for Offline Use

If you want the local playground to work offline, you need to build the Wasm library first: 
cd lib/binding_web
npm install
npm run build
If you skip this step, the tree-sitter playground command will require an internet connection.

​
How It Works

The playground is built with:

​
Contributing to the Playground

If you’d like to improve the playground, the source code can be found in the Tree-sitter repository: See the Contributing guide for more information on how to get started.

​
Tips for Using the Playground

Copy the syntax tree to your clipboard using the copy button next to the “Tree” heading.
Use the playground to learn query syntax by experimenting with different patterns and seeing how they match nodes in real-time.
The update time (shown below the tree) helps you understand the performance characteristics of the parser.