---
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>

</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>