diff --git a/data/audio_notes_example.html b/data/audio_notes_example.html
new file mode 100755
index 0000000..5f84d4a
--- /dev/null
+++ b/data/audio_notes_example.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/dependencies/webdav.js"></script>
+  </head>
+  <body>
+
+
+<div id=content></div>
+
+<script>
+// insert screenshots (could probably do the same way, i.e. filereader then webdav upload
+const webdavURL = "https://webdav.benetou.fr";
+const subdirWebDAV = "/fotsave/fot_sloan_companion_public/"
+var webdavClient = window.WebDAV.createClient(webdavURL)
+
+// const eventSourceConverted = new EventSource( `https://ntfy.benetou.fr/convertedwebdav/sse` )
+// to use for live updates
+
+async function getContent(){
+	let rootEl = document.getElementById("content")
+	const contents = await webdavClient.getDirectoryContents(subdirWebDAV);
+	// consider instead search https://github.com/perry-mitchell/webdav-client#search
+	contents.filter(f => f.basename.endsWith('.ogg'))
+	.sort( (a,b) => new Date(a.lastmod).getTime() < new Date(b.lastmod).getTime() ) // newest first
+	.map(a => {
+		contents.filter(f => f.basename.endsWith('.jpg') && f.basename.includes("screenshot") )
+		.filter(scsht => (new Date(scsht.lastmod).getTime() < new Date(a.lastmod).getTime() ) &&
+			new Date(scsht.lastmod).getTime() < (new Date(a.lastmod).getTime() + 3600*1000) )
+		.slice(-1)
+		.map(scsht => {
+			let img = document.createElement("img")
+			img.src = scsht.basename
+			img.style.width = "400px"
+			rootEl.appendChild(img)
+			let br = document.createElement("br")
+			rootEl.appendChild(br)
+		})
+		// could also filter by modification time, e.g. only done during the last hour
+			// and/or username, e.g. last hour by username fabien (which prefix filename saving)
+		contents.filter(f => f.basename.endsWith('.srt') && f.basename.includes(a.basename) ).map(srt => {
+			let el = document.createElement("a")
+			el.href = srt.basename
+			rootEl.appendChild(el)
+			el.innerText = srt.basename
+			let hr = document.createElement("br")
+			rootEl.appendChild(hr)
+			let sub = document.createElement("span")
+			rootEl.appendChild(sub)
+			let br = document.createElement("br")
+			rootEl.appendChild(br)
+			fetch( srt.basename ).then( r => r.text() ).then( txt => {
+				sub.innerText = txt.split(/\n\n/g).map(s=>s.split('\n')[2]).join('')
+			})
+		})
+		let el = document.createElement("audio")
+		el.setAttribute("controls","")
+		el.src = a.basename
+		rootEl.appendChild(el)
+		let hr = document.createElement("hr")
+		rootEl.appendChild(hr)
+	})
+}
+
+getContent()
+</script>
+
+<div id=comments>
+webdav check on audio files with matching srt files
+
+show provenance (e.g. when was it recorded and by whom, with XR perspective)
+
+<br>
+Grouping of screenshots and audio is not obvious, could want multiple screenshot for one audio or the other way around. Should though start at first with something simple, e.g. 1-1 potentially based on time, e.g. always screenshot then next recorded audio. Basically looking up modification time and add the last found screenshot per audio. Could also have a cut-out, e.g. only add screenshot done within the last hour maximum, otherwhise no screenshot.
+
+<br>
+
+Consider also highlight frament, e.g. https://companion.benetou.fr/audio_notes_example.html#:~:text=recording even though it seems PROFIND preflight CORS fails on Chromium (where fragments are supported) but works on Firefox (where they are not). So... right now only works on Quest, which is a bit pointless as it's XR.
+</div>
+
+  </body>
+</html>
diff --git a/data/demos_editor_example.html b/data/demos_editor_example.html
new file mode 100644
index 0000000..7b40961
--- /dev/null
+++ b/data/demos_editor_example.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/dependencies/webdav.js"></script>
+  </head>
+  <body>
+<button onclick="save()">save</button>
+
+<div id=content></div>
+
+<script>
+// insert screenshots (could probably do the same way, i.e. filereader then webdav upload
+const webdavURL = "https://webdav.benetou.fr";
+const subdirWebDAV = "/fotsave/fot_sloan_companion_public/"
+var webdavClient = window.WebDAV.createClient(webdavURL)
+const hmdURL = "https://hmd.link/?https://companion.benetou.fr"
+
+// const eventSourceConverted = new EventSource( `https://ntfy.benetou.fr/convertedwebdav/sse` )
+// to use for live updates
+
+let positions = []
+let newElements = []
+let originalJSON
+
+function save(){
+	let newContent = {}
+	newContent.configuration = originalJSON.configuration
+	newContent.content = []
+	newElements.map( n => newContent.content.push( originalJSON.content.find( o => o.name == n ) ) )
+	// assuming we always find
+	let uu = originalJSON.content.find( n => n["unassigned-usernames"] )
+	if ( uu ) newContent.content.push( uu )
+	let filename = "demos_saved_"+Date.now()+".json"
+	saveJSONToWebDAV( filename, newContent )
+	let url = webdavURL+subdirWebDAV+filename
+	window.open(url, '_blank')
+}
+
+function saveJSONToWebDAV(filename, content){
+        async function w(path = "/file.txt"){ return await webdavClient.putFileContents(path, JSON.stringify(content)) }
+        written = w(subdirWebDAV+filename)
+}
+
+async function getContent(){
+	let rootEl = document.getElementById("content")
+	const contents = await webdavClient.getDirectoryContents(subdirWebDAV);
+	// consider instead search https://github.com/perry-mitchell/webdav-client#search
+	contents.filter(f => f.basename.endsWith('demo_q1.json'))
+	.map(a => {
+		fetch(a.basename).then( r => r.json() ).then( r => {
+			originalJSON = r
+			r.content.filter( c => c.name ).map( c => {
+				let el = document.createElement("h3")
+				el.innerText = c.name
+				el.draggable="true"
+				el.ondragend = (e) => {
+					// console.log( e.layerY )
+					let name = e.target.innerText
+					newElements = newElements.filter( n => n != name)
+					if ( e.layerY < positions[0].y ) {
+						// console.log( 'before first' )
+						newElements = [name].concat(newElements)
+					}
+					if ( e.layerY > positions.at(-1).y ) {
+						// console.log( 'after last' )
+						newElements.push( name )
+					}
+					positions.map( (p,i) => {
+						let next = positions[i+1]
+						if (next && e.layerY > p.y && e.layerY < next.y){
+							// console.log( name, 'between', p.name, ' & ', next.name)
+							newElements.splice(newElements.indexOf(next.name), 0, name)
+						}
+					})
+					// console.log( newElements )
+					let existing = Array.from( rootEl.children )
+					newElements.map( (el,i) => existing[i].innerText = el )
+						
+				}
+				rootEl.appendChild(el)
+				let pos = el.getBoundingClientRect()
+				positions.push( { name:c.name, y:pos.y+pos.height/2 } )
+				newElements.push( c.name )
+			})
+		})
+	})
+}
+
+getContent()
+</script>
+
+<div id=comments>
+
+<br>
+<br>
+</div>
+
+<h3>
+ideas :
+</h3>
+
+<ul>
+<li>code links, e.g. "code":["https://git.benetou.fr/utopiah/text-code-xr-engine/src/branch/master/index.html#L129", "https://git.benetou.fr/utopiah/text-code-xr-engine/src/branch/master/index.html#L1375-L1408"]
+<li>better integration with viewer (e.g. side by side view)
+<li>in XR mode
+<li>listing of past saved demo queues
+</ul>
+
+<h3>
+done :
+</h3>
+
+<ul>
+<li>save
+<li>linked from viewer
+<li>re-order
+<li>test output https://companion.benetou.fr/demos_saved_1742539103750.json
+</ul>
+
+  </body>
+</html>
diff --git a/data/highlights_example.html b/data/highlights_example.html
new file mode 100755
index 0000000..c860b3a
--- /dev/null
+++ b/data/highlights_example.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/dependencies/webdav.js"></script>
+  </head>
+  <body>
+
+
+<div id=content></div>
+
+<script>
+// insert screenshots (could probably do the same way, i.e. filereader then webdav upload
+const webdavURL = "https://webdav.benetou.fr";
+const subdirWebDAV = "/fotsave/fot_sloan_companion_public/"
+var webdavClient = window.WebDAV.createClient(webdavURL)
+
+// const eventSourceConverted = new EventSource( `https://ntfy.benetou.fr/convertedwebdav/sse` )
+// to use for live updates
+
+async function getContent(){
+	let rootEl = document.getElementById("content")
+	const contents = await webdavClient.getDirectoryContents(subdirWebDAV);
+	// consider instead search https://github.com/perry-mitchell/webdav-client#search
+	contents.filter(f => f.basename.endsWith('_highlights.json'))
+	.sort( (a,b) => new Date(a.lastmod).getTime() < new Date(b.lastmod).getTime() ) // newest first
+	.map(a => {
+
+		fetch(a.basename).then( r => r.json() ).then( r => {
+			let h2 = document.createElement("h2")
+			h2.innerText = r.source[0]
+			rootEl.appendChild(h2)
+			let h3 = document.createElement("h3")
+			h3.innerText = r.identifier[0]
+			rootEl.appendChild(h3)
+			let ul = document.createElement("ul")
+			rootEl.appendChild(ul)
+
+			r.highlights.map( h => {
+				let li = document.createElement("li")
+				li.innerText = '"' + h.content + '"' + ' (p' + h.page + ')'
+				let span = document.createElement("span")
+				span.innerHTML = "&#9632;"
+				span.style.color = h.ccolor // typo, should be color, not ccolor
+				li.appendChild(span)
+				ul.appendChild(li)
+			})
+
+			let hr = document.createElement("hr")
+			rootEl.appendChild(hr)
+		})
+	})
+}
+
+getContent()
+</script>
+
+<div id=comments>
+
+<br>
+<br>
+</div>
+
+  </body>
+</html>
