---
layout: default
title: Playground
permalink: playground
---

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.css">

<h1>Syntax Tree Playground</h1>

<div id="playground-container" style="visibility: hidden;">

<h4>Code</h4>
<select id="language-select">
  <option value="bash">Bash</option>
  <option value="c">C</option>
  <option value="cpp">C++</option>
  <option value="c_sharp">C#</option>
  <option value="go">Go</option>
  <option value="html">HTML</option>
  <option value="java">Java</option>
  <option value="javascript" selected="selected">JavaScript</option>
  <option value="php">PHP</option>
  <option value="python">Python</option>
  <option value="ruby">Ruby</option>
  <option value="rust">Rust</option>
  <option value="toml">TOML</option>
  <option value="typescript">TypeScript</option>
  <option value="yaml">YAML</option>
  <option value="ql">QL</option>
</select>

<input id="logging-checkbox" type="checkbox"></input>
<label for="logging-checkbox">Log</label>

<input id="query-checkbox" type="checkbox"></input>
<label for="query-checkbox">Query</label>

<textarea id="code-input">
</textarea>

<div id="query-container" style="visibility: hidden; position: absolute;">
  <h4>Query</h4>
  <textarea id="query-input"></textarea>
</div>

<h4>Tree</h4>
<span id="update-time"></span>
<div id="output-container-scroll">
  <pre id="output-container" class="highlight"></pre>
</div>

<h4 id="about">About </h4>
<p>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
  <a href="/tree-sitter/creating-parsers">CLI</a>'s <code>tree-sitter playground</code> subcommand.</p>
<p>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.</p>
<p>Logging (if enabled) can be viewed in the browser's console.</p>
<p>You can enter one or more <a href="/tree-sitter/using-parsers#pattern-matching-with-queries">patterns</a>
  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 <code>(node_name) @capture-name</code></p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.js"></script>

{% if jekyll.environment == "development" %}
<script>LANGUAGE_BASE_URL = "/assets/js";</script>
<script src="/assets/js/tree-sitter.js"></script>
{% else %}
<script>LANGUAGE_BASE_URL = "https://tree-sitter.github.io";</script>
<script src="https://tree-sitter.github.io/tree-sitter.js"></script>
{% endif %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.js"></script>
<script src="{{ '/assets/js/playground.js' | relative_url }}"></script>