almost there:

- spreadsheet is rendered from fenced code block
- source gets updated when spreadsheet is updated

missing: update spreadsheet, when source is updated

frontend/src/Components/MarkdownDisplay.svelte

@@ -2,10 +2,26 @@
 	import { onMount } from 'svelte';
 	let { classes='markdown', markdown, onclick = null, oncontextmenu = null, title='', wrapper = 'div' } = $props();
 	let jspreadsheet = null;
+	const regex = /@startsheet[\s\S]*?@endsheet/g;
+
+	function update(sheet, index){
+		const data        = sheet.getData(false,false,'|',false);
+		markdown.source = replaceNthSpreadsheet(markdown.source,index,data);
+	}
+
+	function replaceNthSpreadsheet(text, n, newContent) {
+		const blocks = text.match(regex) || [];
+		if (blocks.length < n+1){
+			console.warn(`cannot replace block ${n}: only ${blocks.length} blocks found!`);
+			return text;
+		}
+
+		return text.replace(regex, (match, index) => index === n ? `@startsheet\n${newContent}\n@endsheet` : match);
+	}
+
 
 	async function transform(){
 		if (!markdown.rendered) return;
-		console.log('transform');
 		let sheets = document.getElementsByClassName('spreadsheet');
 		for (let i = 0; i < sheets.length; i++) {
 			if (!jspreadsheet) {
@@ -21,13 +37,16 @@
             // Use parseCSV from the helpers
             const parsed = jspreadsheet.helpers.parseCSV(raw, '|');
 
-            jspreadsheet(document.getElementById(sheet.id), {worksheets:[{data:parsed}]});
-			//sheet.innerHTML = 'spreadsheet transformation not implemented, yet!';
+            jspreadsheet(document.getElementById(sheet.id), {
+                worksheets : [{data:parsed}],
+                onchange   : (instance, cell, x, y, value) => update(instance, i)
+			});
 		}
 	}
 
 	// TODO: use target from urls.svelte to replace internal URLs
-	onMount(transform)
+	onMount(transform);
+
 </script>
 
 {#if markdown.rendered}