Beginning of rendering the ast list.

static/index.html

@@ -14,7 +14,7 @@
         <div id="parse-output" class="code_block" style="counter-set: code_line_number 0;"></div>
       </div>
       <div>
-        tree goes here
+        <div id="ast-tree"></div>
       </div>
     </div>
   </body>

static/script.js

@@ -1,6 +1,7 @@
 let inFlightRequest = null;
 const inputElement = document.querySelector("#org-input");
 const outputElement = document.querySelector("#parse-output");
+const astTreeElement = document.querySelector("#ast-tree");
 
 function abortableFetch(request, options) {
     const controller = new AbortController();
@@ -12,9 +13,19 @@ function abortableFetch(request, options) {
     };
 }
 
-async function renderParseResponse(response) {
+function clearOutput() {
-    console.log(response);
     outputElement.innerHTML = "";
+    astTreeElement.innerHTML = "";
+}
+
+function renderParseResponse(response) {
+    clearOutput();
+    console.log(response);
+    renderSourceBox(response);
+    renderAstTree(response);
+}
+
+function renderSourceBox(response) {
     const lines = response.input.split(/\r?\n/);
     const numLines = lines.length;
     const numDigits = Math.log10(numLines) + 1;
@@ -28,13 +39,32 @@ async function renderParseResponse(response) {
     }
 }
 
+function renderAstTree(response) {
+    for (let list of response.lists) {
+        renderAstList(response.input, 0, list);
+    }
+}
+
+function renderAstList(originalSource, depth, list) {
+    const listElem = document.createElement("div");
+    listElem.classList.add("ast_node");
+
+    let sourceForList = originalSource.slice(list.position.start_character - 1, list.position.end_character - 1);
+    // Since sourceForList is a string, JSON.stringify will escape with backslashes and wrap the text in quotation marks, ensuring that the string ends up on a single line. Coincidentally, this is the behavior we want.
+    let escapedSource = JSON.stringify(sourceForList);
+
+    listElem.innerText = `List: ${escapedSource}`;
+    listElem.style.marginLeft = `${depth * 20}px`;
+    astTreeElement.appendChild(listElem);
+}
+
 inputElement.addEventListener("input", async () => {
     let orgSource = inputElement.value;
     if (inFlightRequest != null) {
         inFlightRequest.abort();
         inFlightRequest = null;
     }
-    outputElement.innerHTML = "";
+    clearOutput();
 
     let newRequest = abortableFetch("/parse", {
         method: "POST",

static/style.css

@@ -62,3 +62,7 @@ h7 {
 .output_container > * {
     flex: 1 0;
 }
+
+.ast_node {
+    background: #eeeeee;
+}