diff --git a/spike/review/reinvent/ezmded/ui/files.ctmpl b/spike/review/reinvent/ezmded/ui/files.ctmpl
new file mode 100644
index 0000000..4baf62f
--- /dev/null
+++ b/spike/review/reinvent/ezmded/ui/files.ctmpl
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+	<header>
+		<title>{{ .Title }}</title>
+      {{ template "imports" . }}
+	</header>
+	<body class="lr_fullscreen tb_fullscreen" onload="init(); return false;">
+		<br>
+		<div class="rows">
+         {{ template "searchbar" . }}
+			<div class="columns thic_flex tb_buffer">
+            {{ template "filetree" . }}
+				<div class="thic_flex lr_fullscreen" style="margin-left: 1em; width: 5px;">
+               {{ template "editor" . }}
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/spike/review/reinvent/ezmded/ui/templates/editor.ctmpl b/spike/review/reinvent/ezmded/ui/templates/editor.ctmpl
new file mode 100644
index 0000000..20b9a59
--- /dev/null
+++ b/spike/review/reinvent/ezmded/ui/templates/editor.ctmpl
@@ -0,0 +1,170 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<style>
+	.EasyMDEContainer button {
+		color: black;
+	}
+	img {
+		max-width: 100%;
+		max-height: 100%;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.editor-toolbar > button.preview {
+		color: #08c;
+	}
+</style>
+<script>
+	function deleteFile() {
+		if (!confirm("would you like to delete this file?"))
+			return
+		const id = easyMDE.meta.id
+		if (!id || id.length == 0)
+			return
+		http("DELETE", "/api/v0/files/" + id, (body, status) => {
+			if (status != 200) {
+				alert(`failed to delete file ${id}: ${status}: ${body}`)
+				throw `failed to delete file ${id}: ${status}: ${body}`
+			}
+			drawTree()
+			var pid = id.slice(0, id.lastIndexOf("/"))
+			if (pid) {
+				drawFile(pid)
+			} else {
+				disableMDE()
+			}
+		})
+	}
+
+	var saveFeedbackInterval = null
+	function pushFile() {
+		const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
+		const body = easyMDE.value() ? easyMDE.value() : ""
+		const id = easyMDE.meta.id ? easyMDE.meta.id : ""
+		headers = {}
+		if (title)
+			headers["Title"] = title
+		http("PUT", "/api/v0/files/" + id, (body, status) => {
+			if (status != 200) {
+				alert(`failed to push file ${id}: ${status}: ${body}`)
+				throw `failed to push file ${id}: ${status}: ${body}`
+			}
+			drawTree()
+			//drawFile(id)
+			document.getElementById("saveFeedback").innerHTML = "success!"
+			if (saveFeedbackInterval) {
+				clearTimeout(saveFeedbackInterval)
+			}
+			saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
+		}, body, headers)
+	}
+
+	function drawFile(id) {
+		if (!id || id.length < 1) {
+			return
+		}
+		http("GET", "/api/v0/files/"+id, (body, status, headers) => {
+			if (status != 200) {
+				throw `ERR loading file: ${status}: ${body}`
+			}
+			const title = headers("title") ? headers("title") : ""
+			setMDE(id, title, body)
+		})
+	}
+
+	function drawNewFile(pid) {
+		setMDE(pid + "/" + crypto.randomUUID().substr(0, 5), "", "")
+		if (easyMDE.isPreviewActive()) {
+			easyMDE.togglePreview()
+		}
+	}
+
+	function enableMDE() {
+		document.getElementById("searchResults").className = "mia";
+		document.getElementById("article").className = "";
+	}
+
+	function disableMDE() {
+		document.getElementById("article").className = "mia";
+		document.getElementById("searchResults").className = "";
+	}
+
+	var liveLeafTimeout = null
+
+	function setMDE(id, title, body) {
+		if (id[0] == "/")
+			id = id.slice(1, id.length)
+		if (id[id.length-1] == "/")
+			id = id.slice(0, id.length-1)
+		var pids = id.split("/")
+		pids = pids.slice(0, pids.length-1)
+
+		var titlePath = "/"
+		for (var i = 0; i < pids.length; i++) {
+			const fullPid = pids.slice(0, i+1)
+			titlePath = `/ <input type="button" class="lil_btn" value="${idsToTitle(fullPid)}" onclick="drawFile('${fullPid.join("/")}');"/> /`
+		}
+		if (pids.length > 1) {
+			titlePath = "/ ... "+titlePath
+		}
+
+		enableMDE()
+		document.getElementById("titlePath").innerHTML = titlePath
+		document.getElementById("title").innerHTML = title
+		easyMDE.value(body)
+		easyMDE.meta = {
+			id: id,
+		}
+		if (!easyMDE.isPreviewActive()) {
+			easyMDE.togglePreview()
+			var previews = document.getElementsByClassName("preview")
+		}
+		const previouslyHighlighted = document.getElementsByClassName("live_leaf")
+		for (var i in previouslyHighlighted)
+			if (previouslyHighlighted && previouslyHighlighted[i] && previouslyHighlighted[i].classList)
+				previouslyHighlighted[i].classList.remove("live_leaf")
+		if (liveLeafTimeout)
+			clearTimeout(liveLeafTimeout)
+		liveLeafTimeout = setTimeout(() => {
+			const toHighlight = document.getElementsByClassName(btoa("/"+id))
+			for (var i = 0; i < toHighlight.length; i++) {
+				if (toHighlight && toHighlight[i] && toHighlight[i].classList)
+					toHighlight[i].classList.add("live_leaf")
+			}
+		}, 100)
+		navigateToQuery("f", id)
+	}
+</script>
+<article id="article">
+	<h1 class="columns">
+		<span class="r_buffer">
+         <form action="#" onsubmit="pushFile(); return false;"> <!-- TODO -->
+			   <input class="button-info lil_btn" type="submit" value="SAVE"/>
+         </form>
+		</span>
+		<span id="titlePath">
+         {{ if ne .PID "" }}
+            <a href="/ui/files/{{ .PID }}">{{ .PTitle }}</a>
+         {{ end }}
+      </span>
+		<span id="title" class="thic_flex" contenteditable>{{ .Title }}</span>
+		<span class="l_buffer">
+         <form action="#" onsubmit="return confirm('are you sure?') && deleteFile();"> <!-- TODO -->
+			   <input class="button-error lil_btn" type="submit" value="DELETE"/>
+         </form>
+		</span>
+	</h1>
+	<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
+	</div>
+	<!-- todo: each line no is an anchor -->
+	<div class="monospace">
+		<textarea id="my-text-area"></textarea>
+	</div>
+</article>
diff --git a/spike/review/reinvent/ezmded/ui/templates/filetree.ctmpl b/spike/review/reinvent/ezmded/ui/templates/filetree.ctmpl
new file mode 100644
index 0000000..715a1b6
--- /dev/null
+++ b/spike/review/reinvent/ezmded/ui/templates/filetree.ctmpl
@@ -0,0 +1,6 @@
+<div>
+   <!-- TODO {{ .Branches }} -->
+   {{ range $key, $value := .Branches }}
+      <!-- TODO {{ $key }}{{ $value }} -->
+   {{ end }}
+</div>
diff --git a/spike/review/reinvent/ezmded/ui/templates/import.ctmpl b/spike/review/reinvent/ezmded/ui/templates/import.ctmpl
new file mode 100644
index 0000000..7d42a10
--- /dev/null
+++ b/spike/review/reinvent/ezmded/ui/templates/import.ctmpl
@@ -0,0 +1,15 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+<!-- todo css
+<link rel="stylesheet" href="https://cdn.concisecss.com/concise.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
+<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+-->
diff --git a/spike/review/reinvent/ezmded/ui/templates/searchbar.ctmpl b/spike/review/reinvent/ezmded/ui/templates/searchbar.ctmpl
new file mode 100644
index 0000000..e92ce9d
--- /dev/null
+++ b/spike/review/reinvent/ezmded/ui/templates/searchbar.ctmpl
@@ -0,0 +1,4 @@
+<form class="columns" action="/ui/search" method="GET">
+	<input class="thic_flex" type="text" name="searchbox" placeholder="space delimited search regexp"/>
+	<input class="info lil_btn" type="submit" value="search"/>
+</form>
