diff --git a/architype.css b/architype.css
new file mode 100644
index 0000000..2a4856d
--- /dev/null
+++ b/architype.css
@@ -0,0 +1,47 @@
+body {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ margin: 0;
+
+ font-family: 'Courier', monospace;
+}
+
+#definition {
+ list-style: none;
+
+ margin: 0;
+ padding: 0;
+
+ height: 100%;
+ width: 400px;
+
+ overflow-y: scroll;
+}
+
+#definition li {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: left;
+ white-space: pre;
+
+ padding: 3px;
+ border: 5px dotted rgba(0,0,0,0.0);
+}
+
+#definition li.node {
+ background-color: #daf0db;
+}
+
+#definition li.selected {
+ border-color: red;
+}
+
+#definition li input {
+ background-color: rgba(255,255,255,0.8);
+ border: 1px solid black;
+}
diff --git a/architype.js b/architype.js
new file mode 100644
index 0000000..cb01d0a
--- /dev/null
+++ b/architype.js
@@ -0,0 +1,132 @@
+let def = document.getElementById('definition');
+
+document.addEventListener('keydown', e => {
+ console.log(e.key);
+
+ let sel = def.getElementsByClassName('selected').item(0);
+
+ switch (e.key) {
+ case 'd':
+ if (sel) {
+ let newSel = sel.nextElementSibling || sel.previousElementSibling;
+ if (newSel) {
+ newSel.classList.add('selected');
+ }
+ sel.remove();
+ }
+ break;
+
+ case 'D':
+ while (sel.nextElementSibling) {
+ sel.nextElementSibling.remove();
+ }
+ if (sel.previousElementSibling) {
+ sel.previousElementSiblist.classList.add('selected');
+ }
+ sel.remove();
+ break;
+
+ case 'j':
+ case 'ArrowDown':
+ if (sel) {
+ let newSel = sel.nextElementSibling || def.firstElementChild;
+ sel.classList.remove('selected');
+ newSel.classList.add('selected');
+ }
+ break;
+
+ case 'k':
+ case 'ArrowUp':
+ if (sel) {
+ let newSel = sel.previousElementSibling || def.lastElementChild;
+ sel.classList.remove('selected');
+ newSel.classList.add('selected');
+ }
+ break;
+
+ case 'PageUp':
+ if (sel) {
+ let pageCount = Math.floor(def.clientHeight / sel.clientHeight) - 1;
+ let newSel = sel;
+ for (let i = 0; i < pageCount; ++i) {
+ newSel = newSel.previousElementSibling || def.firstElementChild;
+ }
+ sel.classList.remove('selected');
+ newSel.classList.add('selected');
+ }
+ break;
+
+ case 'PageDown':
+ if (sel) {
+ let pageCount = Math.floor(def.clientHeight / sel.clientHeight) - 1;
+ let newSel = sel;
+ for (let i = 0; i < pageCount; ++i) {
+ newSel = newSel.nextElementSibling || def.lastElementChild;
+ }
+ sel.classList.remove('selected');
+ newSel.classList.add('selected');
+ }
+ break;
+
+ case 'Home':
+ if (sel) {
+ sel.classList.remove('selected');
+ def.firstElementChild.classList.add('selected');
+ }
+ break;
+
+ case 'G': // vi compat
+ case 'End':
+ if (sel) {
+ sel.classList.remove('selected');
+ def.lastElementChild.classList.add('selected');
+ }
+ break;
+
+ case 'n':
+ {
+ let node = document.createElement('li');
+ node.innerText = 'Node: ';
+
+ let input = document.createElement('input');
+ input.type = 'text';
+ node.appendChild(input);
+
+ node.classList.add('node');
+ def.insertBefore(node, sel ? sel.nextSibling : null);
+
+ if (sel) {
+ sel.classList.remove('selected');
+ }
+ node.classList.add('selected');
+ }
+ break;
+
+ case 'N':
+ {
+ let node = document.createElement('li');
+ node.innerText = 'Node: ';
+
+ let input = document.createElement('input');
+ input.type = 'text';
+ node.appendChild(input);
+
+ node.classList.add('node');
+ def.insertBefore(node, sel);
+
+ if (sel) {
+ sel.classList.remove('selected');
+ }
+ node.classList.add('selected');
+ }
+ break;
+ }
+
+ sel = def.getElementsByClassName('selected').item(0);
+
+ if (sel) {
+ sel.scrollIntoView({
+ block: 'center',
+ });
+ }
+});
diff --git a/index.html b/index.html
index 7bd306e..a0e4c9c 100644
--- a/index.html
+++ b/index.html
@@ -5,192 +5,14 @@
Architype
+
+