diff --git a/backend/static/js/qleverUI.js b/backend/static/js/qleverUI.js
index 46073158..91fd485d 100755
--- a/backend/static/js/qleverUI.js
+++ b/backend/static/js/qleverUI.js
@@ -224,6 +224,9 @@ $(document).ready(function () {
   // Attach format funtion to formatButton.
   const formatButton = $("#formatButton");
   formatButton.click(function() {
+    console.log("Formatting query");
+    const parseTree = parse(editor.getValue());
+    console.log("Parse tree: ", parseTree);
     editor.setValue(format(editor.getValue()));
   })
 
diff --git a/backend/templates/partials/head.html b/backend/templates/partials/head.html
index c97c06f7..d5693cd4 100644
--- a/backend/templates/partials/head.html
+++ b/backend/templates/partials/head.html
@@ -74,9 +74,10 @@
 
   <!-- WASM formatter -->
   <script type="module">
-    import { format, determineOperationType } from "{% static '/wasm/formatter/index.js' %}";
+    import { format, determineOperationType, parse } from "{% static '/wasm/formatter/index.js' %}";
     window.format = format;
     window.determineOperationType = determineOperationType;
+    window.parse = parse;
   </script>
 
   <!-- Our own JavaScript code for this demo -->
diff --git a/formatter/index.js b/formatter/index.js
index e9f68705..799951f1 100644
--- a/formatter/index.js
+++ b/formatter/index.js
@@ -1,18 +1,32 @@
-import init, { format_raw, determine_operation_type } from 'qlue-ls';
-import wasmModule from 'qlue-ls/qlue_ls_bg.wasm'
+// QLUE-LS
+import init1, { format_raw, determine_operation_type } from 'qlue-ls';
+import wasmModule1 from 'qlue-ls/qlue_ls_bg.wasm'
 
-console.info("Loading WebAssembly module...")
-wasmModule().then((mod) => {
-	console.info("Initializing WebAssembly module...")
-	init(mod).then(() => console.log("WebAssembly module ready!"))
+wasmModule1().then((mod) => {
+  console.debug("Initializing WebAssembly module...")
+  init1({"module_or_path": mod})
 });
 
 function format(text) {
-	return format_raw(text);
+  return format_raw(text);
 }
 
 function determineOperationType(text) {
-	return determine_operation_type(text);
+  return determine_operation_type(text);
 }
 
-export { format, determineOperationType }
+
+// LL-SPARQL-PARSER
+import init2, { get_parse_tree } from 'll-sparql-parser';
+import wasmModule2 from 'll-sparql-parser/ll_sparql_parser_bg.wasm'
+
+wasmModule2().then((mod) => {
+  console.debug("Initializing WebAssembly module...")
+  init2({"module_or_path": mod})
+});
+
+function parse(text) {
+  return get_parse_tree(text);
+}
+
+export { format, determineOperationType, parse };
diff --git a/package-lock.json b/package-lock.json
index ae1bb849..1d702d3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@rollup/plugin-commonjs": "^28.0.1",
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-wasm": "^6.2.2",
+        "ll-sparql-parser": "^0.7.0",
         "qlue-ls": "npm:qlue-ls-web@~0.5.3",
         "rollup": "^4.26.0"
       }
@@ -472,6 +473,12 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/ll-sparql-parser": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/ll-sparql-parser/-/ll-sparql-parser-0.7.0.tgz",
+      "integrity": "sha512-XFLnrdzf9oodssBV7rYK/fXVP2GFUY5LKkDPnpPMjPyyevP1xxrd270zCvDUiMCvuUfjOFevjqo27U1kWHUStg==",
+      "license": "MIT"
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
diff --git a/package.json b/package.json
index a32862b1..ce955ece 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-wasm": "^6.2.2",
+    "ll-sparql-parser": "^0.7.0",
     "qlue-ls": "npm:qlue-ls-web@~0.5.3",
     "rollup": "^4.26.0"
   }