7 Playground

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.css"> <h1>Syntax Tree Playground</h1> <div id="playground-container" class="ts-playground" style="visibility: hidden;"> <h2>Code</h2> <div class="language-container"> <div class="custom-select"> <button id="language-button" class="select-button"> <span class="selected-value">JavaScript</span> <svg class="arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </button> <div class="select-dropdown"> <div class="option" data-value="bash">Bash</div> <div class="option" data-value="c">C</div> <div class="option" data-value="cpp">C++</div> <div class="option" data-value="c_sharp">C#</div> <div class="option" data-value="go">Go</div> <div class="option" data-value="html">HTML</div> <div class="option" data-value="java">Java</div> <div class="option" data-value="javascript">JavaScript</div> <div class="option" data-value="php">PHP</div> <div class="option" data-value="python">Python</div> <div class="option" data-value="ruby">Ruby</div> <div class="option" data-value="rust">Rust</div> <div class="option" data-value="toml">TOML</div> <div class="option" data-value="typescript">TypeScript</div> <div class="option" data-value="yaml">YAML</div> </div> <select id="language-select" style="display: none;"> <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> </select> </div> <div id="language-version"> </div> </div>

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

<input id="anonymous-nodes-checkbox" type="checkbox"></input> <label for="anonymous-nodes-checkbox">Show anonymous nodes</label>

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

<input id="accessibility-checkbox" type="checkbox"></input> <label for="accessibility-checkbox">Accessibility</label>

<textarea id="code-input"> </textarea> <div id="query-container" style="visibility: hidden; position: absolute;"> <h2>Query</h2> <textarea id="query-input"></textarea> </div> <h2> Tree <button type="button" id="copy-button" class="theme-toggle" aria-label="Copy tree"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect width="14" height="14" x="8" y="8" rx="2" ry="2" /> <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /> </svg> </button> </h2> <span id="update-time"></span> <div id="output-container-scroll"> <pre id="output-container" class="highlight"></pre> </div> <h2 id="about">About </h2> <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/cli/playground.html">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>You can enter one or more <a href="/tree-sitter/using-parsers/queries/index.html">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/6.65.7/codemirror.min.js"></script> <script>LANGUAGE_BASE_URL = "https://tree-sitter.github.io";</script> <script type="module"> import * as TreeSitter from 'https://tree-sitter.github.io/web-tree-sitter.js'; window.TreeSitter = TreeSitter; setTimeout(() => window.initializePlayground({local: false}), 1); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.js"></script>