diff --git a/webapp/lsp/lsp-text.xqm b/webapp/lsp/lsp-text.xqm
index 2e96949..1a5bb20 100644
--- a/webapp/lsp/lsp-text.xqm
+++ b/webapp/lsp/lsp-text.xqm
@@ -15,7 +15,7 @@ declare variable $lsp-text:methods:=map{
   "textDocument/hover":  lsp-text:hover#1,
   "textDocument/completion": lsp-text:completion#1,
   "textDocument/formatting" : lsp-text:format#1,
-   "textDocument/documentSymbol" : lsp-text:symbols#1
+  "textDocument/documentSymbol" : lsp-text:symbols#1
 };
 
 (:~  hover :)
@@ -35,7 +35,8 @@ declare
 function lsp-text:symbols($json as map(*)) 
 as map(*)?
 {
- let $doc:=$json?params?textDocument?uri
+ let $uri:=$json?params?textDocument?uri
+ let $text:=docs:get(ws:id(), $uri, "textDocument")?text
  return map{
     "jsonrpc": "2.0",
     "id": $json?id,
diff --git a/webapp/static/clients/codemirror/data.json b/webapp/static/clients/codemirror/data.json
new file mode 100644
index 0000000..3722f88
--- /dev/null
+++ b/webapp/static/clients/codemirror/data.json
@@ -0,0 +1,26 @@
+[
+    {
+        "name": "symbol 1",
+        "description": "This is the first item"
+    },
+    {
+        "name": "symbol 2",
+        "description": "This is the second item"
+    },
+    {
+        "name": "symbol 3",
+        "description": "This is the third item"
+    },
+    {
+        "name": "symbol 4",
+        "description": "This is the third item"
+    },
+    {
+        "name": "symbol 5",
+        "description": "This is the third item"
+    },
+    {
+        "name": "symbol 6",
+        "description": "This is the third item"
+    }
+]
\ No newline at end of file
diff --git a/webapp/static/clients/codemirror/grail.css b/webapp/static/clients/codemirror/grail.css
index 3786aeb..3a3467e 100644
--- a/webapp/static/clients/codemirror/grail.css
+++ b/webapp/static/clients/codemirror/grail.css
@@ -59,7 +59,6 @@ body {
 .page-sidebar {
   grid-column: 1 / 2;
   grid-row: 2 / 4;
-  background: #e1bee7;
 }
 .page-nav {
   grid-column: 2 / 3;
diff --git a/webapp/static/clients/codemirror/grail.html b/webapp/static/clients/codemirror/grail.html
index faac481..ae19aeb 100644
--- a/webapp/static/clients/codemirror/grail.html
+++ b/webapp/static/clients/codemirror/grail.html
@@ -88,13 +88,16 @@
                 </div>
             </div>
         </nav>
+
         <main class="page-main" style="overflow: auto;">
             <!-- Editor goes in here -->
             <div id="editor"></div>
-
         </main>
+
         <aside class="page-sidebar">
             <div id="msg">(msgs)</div>
+            <div class="bg-info">OutLine</div>
+            <json-list  id="symList" style="display:block; overflow:scroll; height: 10em;"></json-list>
             <select id="load">
                 <option selected value="">load..</option>
                 <optgroup label="XQuery3">
@@ -123,6 +126,7 @@
                 <li>-</li>
             </ul>
         </aside>
+
         <footer class="page-footer">
             Footer <select id="language">
                 <option selected>Language</option>
@@ -163,6 +167,8 @@
     <!-- CodeMirror 6 -->
     <script src="./lsp.bundle.js"></script>
     <script src="./script.js"></script>
+    <script src="./list.js"></script>
+  
 </body>
 
 </html>
\ No newline at end of file
diff --git a/webapp/static/clients/codemirror/list.js b/webapp/static/clients/codemirror/list.js
new file mode 100644
index 0000000..73e5de0
--- /dev/null
+++ b/webapp/static/clients/codemirror/list.js
@@ -0,0 +1,68 @@
+/* Define the web component for settable list
+https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from
+*/
+class JsonListComponent extends HTMLElement {
+    #shadow;
+    #data;
+    #selected;
+    constructor() {
+      super();
+    this.#shadow = this.attachShadow({ mode: "open" });
+    this.#data = [];
+    this.render();
+    }
+
+   setData(newData, append = false) {
+    if (!Array.isArray(newData)) {
+      console.warn("Invalid format, expected an array.");
+      return;
+    }
+
+    this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
+    this.render();
+  }
+
+  set data(value) {
+    this.setData(value, false);
+  }
+  get data() {
+    return this.#data;
+  }
+
+    /* Render the list items using the fetched JSON data */
+   render() {
+    const list = document.createElement('ul');
+    this.#data.forEach(item => {
+        const listItem = document.createElement('li');
+        listItem.textContent = `${item.name} - ${item.description}`;
+        // Adding a click event listener for user interaction
+        listItem.addEventListener('click', () => {
+            console.log('Item clicked:', item);
+            // You can dispatch a custom event here if needed.
+            this.dispatchEvent(new CustomEvent('itemSelected', { 
+                detail: item, 
+                bubbles: true, 
+                composed: true 
+            }));
+        });
+        list.appendChild(listItem);
+    });
+    this.#shadow.innerHTML = '';
+    const style = document.createElement('style');
+    style.textContent = `
+      ul { list-style-type: none; padding: 0; margin: 0; }
+      li { padding: 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
+      li:hover { background: #f0f0f0; }
+    `;
+    this.#shadow.appendChild(style);
+    this.#shadow.appendChild(list);
+}
+
+    /* Render an error message if JSON fetching fails */
+    renderError(error) {
+        this.#shadow.innerHTML = `<p>Error loading data: ${error.message}</p>`;
+    }
+}
+
+/* Define the new custom element */
+customElements.define('json-list', JsonListComponent);
\ No newline at end of file
diff --git a/webapp/static/clients/codemirror/script.js b/webapp/static/clients/codemirror/script.js
index 2596e1b..1371005 100644
--- a/webapp/static/clients/codemirror/script.js
+++ b/webapp/static/clients/codemirror/script.js
@@ -6,6 +6,7 @@ let doc = "xquery version '3.1';\n(:~ comment:)\nmodule namespace pdfbox='ns';\n
 var client;
 var extLint;
 
+
 function $(id) { return document.getElementById(id) };
 
 // Load saved content from localStorage when the page loads
@@ -45,9 +46,36 @@ $("wordAt").onclick = e => {
 
 $("symbols2").onclick = e => {
     client.sync();
-    client.request("textDocument/documentSymbol", { "textDocument": { "uri": $("iFile").value} })
-        .then (r => {
-            alert("symbols " + "TODO");
+    client.request("textDocument/documentSymbol", { "textDocument": { "uri": $("iFile").value } })
+        .then(r => {
+            console.log("symbols", r)
+            var symbolData = [
+                {
+                    "name": "symbol 1",
+                    "description": "This is the first item"
+                },
+                {
+                    "name": "symbol 2",
+                    "description": "This is the second item"
+                },
+                {
+                    "name": "symbol 3",
+                    "description": "This is the third item"
+                },
+                {
+                    "name": "symbol 4",
+                    "description": "This is the third item"
+                },
+                {
+                    "name": "symbol 5",
+                    "description": "This is the third item"
+                },
+                {
+                    "name": "symbol 6",
+                    "description": "This is the third item"
+                }
+            ];
+            $("symList").setData(symbolData);
         });
 };
 
@@ -59,6 +87,9 @@ $("cmd").onclick = e => {
 
 };
 
+$("symList").onclick = e => {
+    alert("Sym click");
+};
 $("lint").onclick = async e => {
     console.log("word", view.state.wordAt(1));
     lsp.openLintPanel(view);