diff --git a/src/public/index.html b/src/public/index.html
new file mode 100644
index 0000000..f44f8b9
--- /dev/null
+++ b/src/public/index.html
@@ -0,0 +1,277 @@
+<html>
+  <header>
+    <style>
+      html {
+        background-color: #444;
+        color: #ccc;
+      }
+      body {
+        margin: 0 auto;
+        max-width: 52rem;
+        padding: 2rem;
+        font-family: "Helvetica", "Arial", sans-serif;
+        line-height: 1.5;
+        font-size: 1.5rem;
+      }
+      label {
+        padding: 0 1rem 0 0;
+      }
+      input {
+        background-color: #333;
+        color: #ddd;
+        font-size: 1.5rem;
+      }
+    </style>
+    <script>
+      function init() {
+        load()
+      }
+
+      function reset() {
+        if (!confirm("you sure?")) {
+          return
+        }
+        if (!confirm("really??")) {
+          return
+        }
+        var inputs = document.getElementById("form").getElementsByTagName("input")
+        for(var input of inputs) {
+          input.value = null
+          input.checked = false
+        }
+        save()
+        load()
+      }
+
+      function load() {
+        var marshalled = localStorage.getItem("data")
+        if (!marshalled)
+          return
+        var data = JSON.parse(marshalled)
+        var inputs = document.getElementById("form").getElementsByTagName("input")
+        var i = 0;
+        for(var input of inputs) {
+          if (input.name == data[i].name) {
+            for(var k in data[i]) {
+              input[k] = data[i][k]
+            }
+          }
+          i += 1
+        }
+        console.log(new Date(), "loaded", data)
+      }
+
+      function save() {
+        var inputs = document.getElementById("form").getElementsByTagName("input")
+        var data = []
+        for(var input of inputs) {
+          data.push({name: input.name, value: input.value, checked: input.checked})
+        }
+        var marshalled = JSON.stringify(data)
+        localStorage.setItem("data", marshalled)
+        console.log(new Date(), "saved", data)
+      }
+    </script>
+  </header>
+  <body onload="init();">
+    <h1>Oathsworn: State of the Deepwood</h1>
+    <form id="form" onchange="save()">
+      <players>
+        <h2>Players</h2>
+        <oathsworn_and_companions>
+          <h3>Oathsworn and Companions</h3>
+          <oathsworn_or_companion>
+            <details>
+              <summary><label for="name">name</label><input name="name" type="text"/><br></summary>
+              <label for="is_companion">is_companion</label><input name="is_companion" type="checkbox"/><br>
+              <label for="hp">hp</label><input name="hp" type="number"/><br>
+              <tokens>
+                <label for="token0">token0</label><input name="token0" type="text"/><br>
+                <label for="token1">token1</label><input name="token1" type="text"/><br>
+                <label for="token2">token2</label><input name="token2" type="text"/><br>
+              </tokens>
+              <animus>
+                <label for="regen">regen</label><input name="regen" type="number"/><br>
+                <label for="max">max</label><input name="max" type="number"/><br>
+              </animus>
+            </details>
+          </oathsworn_or_companion>
+          <oathsworn_or_companion>
+            <details>
+              <summary><label for="name">name</label><input name="name" type="text"/><br></summary>
+              <label for="is_companion">is_companion</label><input name="is_companion" type="checkbox"/><br>
+              <label for="hp">hp</label><input name="hp" type="number"/><br>
+              <tokens>
+                <label for="token0">token0</label><input name="token0" type="text"/><br>
+                <label for="token1">token1</label><input name="token1" type="text"/><br>
+                <label for="token2">token2</label><input name="token2" type="text"/><br>
+              </tokens>
+              <animus>
+                <label for="regen">regen</label><input name="regen" type="number"/><br>
+                <label for="max">max</label><input name="max" type="number"/><br>
+              </animus>
+            </details>
+          </oathsworn_or_companion>
+          <oathsworn_or_companion>
+            <details>
+              <summary><label for="name">name</label><input name="name" type="text"/><br></summary>
+              <label for="is_companion">is_companion</label><input name="is_companion" type="checkbox"/><br>
+              <label for="hp">hp</label><input name="hp" type="number"/><br>
+              <tokens>
+                <label for="token0">token0</label><input name="token0" type="text"/><br>
+                <label for="token1">token1</label><input name="token1" type="text"/><br>
+                <label for="token2">token2</label><input name="token2" type="text"/><br>
+              </tokens>
+              <animus>
+                <label for="regen">regen</label><input name="regen" type="number"/><br>
+                <label for="max">max</label><input name="max" type="number"/><br>
+              </animus>
+            </details>
+          </oathsworn_or_companion>
+          <oathsworn_or_companion>
+            <details>
+              <summary><label for="name">name</label><input name="name" type="text"/><br></summary>
+              <label for="is_companion">is_companion</label><input name="is_companion" type="checkbox"/><br>
+              <label for="hp">hp</label><input name="hp" type="number"/><br>
+              <tokens>
+                <label for="token0">token0</label><input name="token0" type="text"/><br>
+                <label for="token1">token1</label><input name="token1" type="text"/><br>
+                <label for="token2">token2</label><input name="token2" type="text"/><br>
+              </tokens>
+              <animus>
+                <label for="regen">regen</label><input name="regen" type="number"/><br>
+                <label for="max">max</label><input name="max" type="number"/><br>
+              </animus>
+            </details>
+          </oathsworn_or_companion>
+        </oathsworn_and_companions>
+      </players>
+      <free_company>
+        <h2>Free Company</h2>
+        <label for="name">name</label><input name="name" type="text"/><br>
+        <chapters>
+          <h3>Chapters</h3>
+          <details>
+            <summary><label for="number">number</label><input name="number" type="number"/><br></summary>
+            <chapter_progress>
+              <story>
+                <label for="story.complete">story.complete</label><input name="story.complete" type="checkbox"/><br>
+                <label for="story.ambushed">story.ambushed</label><input name="story.ambushed" type="checkbox"/><br>
+                <label for="story.special_rules">story.special_rules</label><input name="story.special_rules" type="checkbox"/><br>
+                <label for="story.unique_item">story.unique_item</label><input name="story.unique_item" type="checkbox"/><br>
+              </story>
+              <label for="encounter">encounter</label><input name="encounter" type="checkbox"/><br>
+            </chapter_progress>
+          </details>
+          <details>
+            <summary><label for="number">number</label><input name="number" type="number"/><br></summary>
+            <chapter_progress>
+              <story>
+                <label for="story.complete">story.complete</label><input name="story.complete" type="checkbox"/><br>
+                <label for="story.ambushed">story.ambushed</label><input name="story.ambushed" type="checkbox"/><br>
+                <label for="story.special_rules">story.special_rules</label><input name="story.special_rules" type="checkbox"/><br>
+                <label for="story.unique_item">story.unique_item</label><input name="story.unique_item" type="checkbox"/><br>
+              </story>
+              <label for="encounter">encounter</label><input name="encounter" type="checkbox"/><br>
+            </chapter_progress>
+          </details>
+          <details>
+            <summary><label for="number">number</label><input name="number" type="number"/><br></summary>
+            <chapter_progress>
+              <story>
+                <label for="story.complete">story.complete</label><input name="story.complete" type="checkbox"/><br>
+                <label for="story.ambushed">story.ambushed</label><input name="story.ambushed" type="checkbox"/><br>
+                <label for="story.special_rules">story.special_rules</label><input name="story.special_rules" type="checkbox"/><br>
+                <label for="story.unique_item">story.unique_item</label><input name="story.unique_item" type="checkbox"/><br>
+              </story>
+              <label for="encounter">encounter</label><input name="encounter" type="checkbox"/><br>
+            </chapter_progress>
+          </details>
+        </chapters>
+        <traits>
+          <h3>Traits</h3>
+            <input name="name" type="text"/><br>
+            <input name="name" type="text"/><br>
+            <input name="name" type="text"/><br>
+        </traits>
+        <knockouts>
+          <h3>Knockouts</h3>
+          <knockout>
+            <input name="chapter" type="number"/>
+            <input name="name" type="text"/>
+          </knockout><br>
+          <knockout>
+            <input name="chapter" type="number"/>
+            <input name="name" type="text"/>
+          </knockout><br>
+          <knockout>
+            <input name="chapter" type="number"/>
+            <input name="name" type="text"/>
+          </knockout><br>
+        </knockouts>
+        <cities>
+          <h3>Cities</h3>
+          <city>
+            <input name="x" type="text"/>
+            <input name="y" type="text"/>
+          </city><br>
+          <city>
+            <input name="x" type="text"/>
+            <input name="y" type="text"/>
+          </city><br>
+          <city>
+            <input name="x" type="text"/>
+            <input name="y" type="text"/>
+          </city><br>
+        </cities>
+        <allies>
+          <h3>Allies</h3>
+          <ally>
+            <input name="number" type="text"/>
+            <input name="name" type="text"/>
+          </ally><br>
+          <ally>
+            <input name="number" type="text"/>
+            <input name="name" type="text"/>
+          </ally><br>
+          <ally>
+            <input name="number" type="text"/>
+            <input name="name" type="text"/>
+          </ally><br>
+        </allies>
+        <woods>
+          <h3>Woods</h3>
+          <wood>
+            <input name="x" type="text"/>
+            <input name="y" type="text"/>
+          </wood><br>
+          <wood>
+            <input name="x" type="text"/>
+            <input name="y" type="text"/>
+          </wood><br>
+          <wood>
+            <input name="x" type="text"/>
+            <input name="y" type="text"/>
+          </wood><br>
+        </woods>
+        <keywords>
+          <h3>Keywords</h3>
+          <input name="keyword1" type="text"/><br>
+          <input name="keyword2" type="text"/><br>
+          <input name="keyword3" type="text"/><br>
+          <input name="keyword4" type="text"/><br>
+          <input name="keyword5" type="text"/><br>
+        </keywords>
+        <notes>
+          <h3>Notes</h3>
+          <input name="note1" type="text"/><br>
+          <input name="note2" type="text"/><br>
+          <input name="note3" type="text"/><br>
+          <input name="note4" type="text"/><br>
+          <input name="note5" type="text"/><br>
+        </notes>
+      </free_company>
+    </form>
+    <button onclick="reset(); return false;">RESET</button>
+  </body>
+</html>
