You can try out tree-sitter with a few pre-selected grammars on this page. You can also run playground locally (with your own grammar) using the CLI's tree-sitter playground subcommand.
tree-sitter playground
The syntax tree should update as you type in the code. As you move around the code, the current node should be highlighted in the tree; you can also click any node in the tree to select the corresponding part of the code.
Logging (if enabled) can be viewed in the browser's console.
You can enter one or more patterns into the Query panel. If the query is valid, its captures will be highlighted both in the Code and in the Query panels. Otherwise the problematic parts of the query will be underlined, and detailed diagnostics will be available on hover. Note that to see any results you must use at least one capture, like (node_name) @capture-name
(node_name) @capture-name