diff --git a/frontend/.eslintrc b/frontend/.eslintrc
index 340e7b9d..33c0160b 100644
--- a/frontend/.eslintrc
+++ b/frontend/.eslintrc
@@ -16,5 +16,6 @@
     "no-plusplus": "off",
     "no-continue": "off",
 	"no-use-before-define": "off",
+	"no-restricted-globals": "off",
   }
 }
diff --git a/frontend/css/base.css b/frontend/css/base.css
index 8d1b1184..c3fe5cc0 100644
--- a/frontend/css/base.css
+++ b/frontend/css/base.css
@@ -50,9 +50,21 @@ body {
   color: var(--color-black);
 }
 
+.hide {
+  display: none;
+}
+
+@media print {
+  body {
+    display: block;
+    font-size: 14px;
+    font-family: Helvetica, Arial, sans-serif;
+  }
+}
+
 /* --- Sidebar --- */
 
-aside {
+.sidebar {
   grid-area: sidebar;
   min-width: 220px;
 
@@ -61,9 +73,7 @@ aside {
   max-height: 100vh;
 }
 
-/* Header */
-
-aside header {
+.sidebar__header {
   flex-grow: 0;
   flex-shrink: 0;
 
@@ -72,7 +82,8 @@ aside header {
   padding-top: 8rem;
 }
 
-aside header .title, aside header .title a {
+.sidebar__title,
+.sidebar__title a {
   color: var(--color-white);
   font-size: 20px;
   line-height: 1em;
@@ -80,7 +91,13 @@ aside header .title, aside header .title a {
   text-decoration: none;
 }
 
-/* Search */
+@media print {
+  .sidebar {
+    display: none;
+  }
+}
+
+/* --- Search --- */
 
 .search {
   display: relative;
@@ -98,7 +115,6 @@ aside header .title, aside header .title a {
 
   border-radius: .5rem;
 }
-
 .search__field:focus {
   outline: none;
 }
@@ -118,7 +134,7 @@ aside header .title, aside header .title a {
   cursor: pointer;
 }
 
-/* Tree Navigation */
+/* --- Tree Navigation --- */
 
 .tree-nav {
   flex-grow: 1;
@@ -129,12 +145,10 @@ aside header .title, aside header .title a {
 }
 
 /* All ul */
-
 .tree-nav ul {
   margin-left: 3rem;
   list-style: none;
 }
-
 .tree-nav ul li a {
   text-decoration: none;
   color: inherit;
@@ -143,36 +157,26 @@ aside header .title, aside header .title a {
   display: inline-block;
   padding-top: 1.5rem;
 }
-
 .tree-nav ul li a:hover {
   color: var(--color-blue);
 }
-
 .tree-nav ul li.is-active > a {
   color: var(--color-blue);
 }
 
-aside .ghosted {
-  color: var(--color-midgray);
-}
-
 /* Top Level ul */
-
 .tree-nav > ul {
   margin-left: 0;
 }
-
 .tree-nav > ul > li {
   margin-bottom: 4rem;
   font-weight: bold;
 }
 
 /* Lower Level ul */
-
 .tree-nav ul ul li {
   font-weight: 300;
 }
-
 .tree-nav ul ul li::before {
   display: inline-block;
   content: "—";
@@ -181,11 +185,9 @@ aside .ghosted {
   top: .7em;
   left: -1.3em;
 }
-
 .tree-nav ul ul li:hover::before, .tree-nav ul ul li.is-active::before {
   visibility: hidden;
 }
-
 .tree-nav ul ul li a::before {
   visibility: hidden;
   content: "→";
@@ -194,31 +196,60 @@ aside .ghosted {
   top: .7em;
   left: -1.3em;
 }
-
 .tree-nav ul ul li:hover > a::before, .tree-nav ul ul li.is-active > a::before {
   visibility: visible;
 }
 
 /* --- Main --- */
 
-main {
+.main {
   grid-area: main;
   padding: 8rem;
   overflow-y: auto;
 }
 
-/* --- Node --- */
-
-/* Crumbs */
+.main .title {
+  font-size: 48px;
+  line-height: 1.3em;
+  margin-bottom: 4rem;
+}
 
-.crumbs {
+.main .description {
+  font-size: 28px;
+  line-height: 1.5em;
   margin-bottom: 2rem;
+  max-width: 650px;
+}
+
+@media print {
+  .main .title {
+    font-size: 35px;
+  }
+  .main .description {
+    font-size: 20px;
+  }
 }
-.crumbs ul {
+
+/* --- Doc Switcher --- */
+
+.doc-switches {
+  margin-top: 4rem;
+}
+
+.doc-switch {
+  display: inline-block;
+  margin-right: 1rem;
+}
+
+/* --- Crumbs --- */
+
+.crumbs {
   list-style: none;
   font-size: 16px;
   line-height: 1em;
+  margin-bottom: 2rem;
 }
+
 .crumbs__crumb {
   display: inline;
 }
@@ -226,9 +257,8 @@ main {
   color: var(--color-midgray);
   content: " / ";
 }
-
-/* Hide the current node*/
 .crumbs__crumb:last-child {
+  /* Hide the current node */
   display: none;
 }
 
@@ -241,29 +271,10 @@ main {
   color: var(--color-blue);
 }
 
-/* Title */
-
-h1 {
-  font-size: 48px;
-  line-height: 1.3em;
-  margin-bottom: 4rem;
-}
-
-/* Description */
-
-.description {
-  font-size: 28px;
-  line-height: 1.5em;
-  margin-bottom: 2rem;
-}
-
-/* Tags */
+/* --- Tags --- */
 
 .tags {
   user-select: none;
-}
-
-.tags ul {
   list-style: none;
 }
 
@@ -272,9 +283,7 @@ h1 {
   user-select: none;
   margin-right: 10px;
 }
-
 .tags__tag a {
-  cursor: pointer;
   background-color: var(--color-cyan);
   color: var(--color-white);
   text-decoration: none;
@@ -287,87 +296,99 @@ h1 {
   border-radius: .25rem;
 }
 
-/* Info */
+@media print {
+  .tags__tag a {
+    padding: 0;
+    margin-right: 1rem;
+    background-color: transparent;
+    color: var(--color-midgray);
+  }
+}
+
+/* --- Info --- */
 
 .info {
-  /*display: flex;*/
-  flex-wrap: wrap;
-  width: 100%;
-  margin-bottom: -8rem;
+  margin: 8rem 0;
+  display: flex;
 }
 
-.two-columns {
-  display: flex;
-  flex-direction: row;
-  margin: 8rem 0;
+.info .doc {
+  max-width: 650px;
+}
+.info .downloads {
+  padding-left: 8rem;
 }
 
-/* Children Table */
+/* --- Downloads --- */
 
-.children-table {
+.downloads {
+  color: var(--color-darkgray);
+}
+.downloads__title {
+  font-size: inherit;
+  margin-bottom: 2rem;
+  margin-top: 0;
+}
+.download {
   line-height: 1.6em;
-  flex-grow: 1;
-  max-width: 650px;
+}
+.download a {
+  color: inherit;
 }
 
+@media print {
+  .downloads {
+    display: none;
+  }
+}
+
+/* --- Children Table --- */
+
 .children-table table {
   border-collapse: collapse;
   width: 100%;
+  line-height: 1.6em;
+  flex-grow: 1;
+  max-width: 650px;
 }
 
-.children-table table tr {
+.children-table tr {
   border-bottom: 1px solid var(--color-semilightgray);
 }
 
-.children-table table tr:last-child {
+.children-table tr:last-child {
   border-bottom: none;
 }
 
-.children-table table td {
+.children-table td {
   padding: 2.5rem 3rem 2rem 0;
   vertical-align: top;
 }
 
-
-.children-table table td a {
+.children-table td a {
   text-decoration: none;
   color: inherit;
 }
 
-.children-table table td:first-child {
+.children-table td:first-child {
   text-align: right;
   width: 20%;
   font-weight: bold;
 }
 
-/* Files */
-
-.files {
-  padding-left: 8rem;
-  flex-grow: 0;
-  color: var(--color-darkgray);
-}
-
-/* Demos */
-
-.demos {
-  width: 100%;
-  margin: 8rem 0;
-}
-
-/* --- Text Styling --- */
+/* --- Doc Styling --- */
 
-.text {
+.doc {
   line-height: 1.6em;
 }
 
-.text h1 {
+.doc h1 {
   font-size: inherit;
   margin-bottom: 2rem;
   margin-top: 6rem;
 }
 
-.text h2 {
+.doc h2 {
   font-size: 12px;
   color: var(--color-darkgray);
   text-transform: uppercase;
@@ -376,23 +397,23 @@ h1 {
   margin-bottom: .5rem;
 }
 
-.text h1:first-child, .text h2:first-child {
+.doc h1:first-child, .doc h2:first-child {
   margin-top: 0;
 }
 
-.text p {
+.doc p {
   margin-bottom: 1.7rem;
 }
 
-.text p:last-child {
+.doc p:last-child {
   margin-bottom: 0;
 }
 
-.text a {
+.doc a {
   color: inherit;
 }
 
-.text a[data-node] {
+.doc a[data-node] {
   cursor: pointer;
   background-color: var(--color-semilightgray);
   text-decoration: none;
@@ -404,63 +425,64 @@ h1 {
   border-radius: .25rem;
 }
 
-.text ul {
+.doc ul {
   margin-left: -4rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
-.text ul ul {
+.doc ul ul {
   margin-left: 0;
 }
 
-.text ul li {
+.doc ul li {
   margin: .5rem 0 .5rem 4rem;
 }
 
-.text table {
+.doc table {
   border-collapse: collapse;
   width: 100%;
   margin: 4rem 0;
 }
 
-.text table:last-child {
+.doc table:last-child {
   margin-bottom: 0;
 }
 
-.text table td, .text table th {
+.doc table td, .doc table th {
   text-align: left;
   padding: 1rem 4rem .75rem 0;
   vertical-align: top;
 }
 
-.text table td:last-child, .text table th:last-child {
+.doc table td:last-child, .doc table th:last-child {
   padding-right: 0;
 }
 
-.text table th {
+.doc table th {
   font-size: 12px;
   color: var(--color-darkgray);
   text-transform: uppercase;
   letter-spacing: 0.1rem;
 }
 
-.text table tr {
+.doc table tr {
   border-bottom: 1px dotted var(--color-midgray);
 }
 
-.text table tbody tr:last-child {
+.doc table tbody tr:last-child {
   border-bottom: none;
 }
 
-.text hr {
+.doc hr {
   margin: 3rem 0;
   padding: 0;
   border: none;
   border-bottom: 1px dotted var(--color-midgray);
 }
 
-.text code {
+.source__code code,
+.doc code {
   background-color: var(--color-semilightgray);
   border: 2px solid var(--color-semilightgray);
   border-left-width: 3px;
@@ -472,7 +494,8 @@ h1 {
   font-weight: normal;
 }
 
-.text pre {
+.source__code,
+.doc pre {
   margin: 3rem 0;
   background-color: var(--color-lightgray);
   border: 1px solid var(--color-semilightgray);
@@ -481,17 +504,18 @@ h1 {
   overflow-x: auto;
 }
 
-.text pre code {
+.source__code code,
+.doc pre code {
   background-color: transparent;
   border: none;
 }
 
-.text img, .text video {
+.doc img, .doc video {
   max-width: 100%;
   margin: 2rem 0;
 }
 
-.text blockquote {
+.doc blockquote {
   border-left: 2px solid var(--color-cyan);
   color: var(--color-darkgray);
   padding-left: 1.5rem;
@@ -500,64 +524,27 @@ h1 {
   margin-bottom: 1.7rem;
 }
 
-/* Printer */
-
 @media print {
-  body {
-    display: block;
-    font-size: 14px;
-    font-family: Helvetica, Arial, sans-serif;
-  }
-
-  aside {
-    display: none;
-  }
-
-  /* Title */
-
-  h1 {
-    font-size: 35px;
-  }
-
-  /* Description */
-
-  .description {
-    font-size: 20px;
-  }
-
-
-  .files {
-    display: none;
-  }
-
-  .tags__tag a  {
-    padding: 0;
-    margin-right: 1rem;
-    background-color: transparent;
-    color: var(--color-midgray);
-  }
-
-  .text img:first-child {
+  .doc img:first-child {
     max-height: 450px;
     width: auto;
   }
 
-  .text pre {
+  .doc pre {
     border: 1px solid var(--color-semilightgray);
   }
 
-  .text code {
+  .doc code {
     border: none;
   }
 
-
-  .text table tr {
+  .doc table tr {
     border-bottom-style: solid;
     page-break-inside: avoid;
     page-break-after: auto;
   }
 
-  .text table td {
+  .doc table td {
     page-break-inside: avoid;
   }
 }
diff --git a/frontend/index.html b/frontend/index.html
index 17c05481..5ec1945f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,18 +1,23 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>DSK / Project</title>
+    <title>DSK /</title>
     <meta charset="utf-8">
     <link rel="stylesheet" href="/css/base.css">
     <script defer src="/js/dsk/Client.js"></script>
     <script defer src="/js/dsk/Tree.js"></script>
+    <script defer src="/js/nav.js"></script>
+    <script defer src="/js/search.js"></script>
+    <script defer src="/js/page.js"></script>
     <script defer src="/js/index.js"></script>
     <link rel="icon" href="/ico/app.png">
   </head>
   <body>
-    <aside>
-      <header>
-        <div class="title">DSK / <b><a href="/">Project</a></b></div>
+    <aside class="sidebar">
+      <header class="sidebar__header">
+        <div class="sidebar__title">
+          DSK / <b><a class="project-name" href="/"></a></b>
+        </div>
         <div class="search">
           <input class="search__field" autofocus>
           <div class="search__clear">×</div>
@@ -20,6 +25,6 @@
       </header>
       <nav class="tree-nav"></nav>
     </aside>
-    <main></main>
+    <main class="main"></main>
   </body>
 </html>
\ No newline at end of file
diff --git a/frontend/js/index.js b/frontend/js/index.js
index 9d3933e9..1c1a7c22 100644
--- a/frontend/js/index.js
+++ b/frontend/js/index.js
@@ -5,44 +5,74 @@
  * license that can be found in the LICENSE file.
  */
 
+/* globals Nav: false */
+/* globals Page: false */
+/* globals Search: false */
 /* globals Tree: false */
 /* globals Client: false */
 /* globals URLSearchParams: false */
 
-document.addEventListener('DOMContentLoaded', function() {
-  const $ = document.querySelectorAll.bind(document);
+document.addEventListener('DOMContentLoaded', () => {
   const $1 = document.querySelector.bind(document);
 
-  const baseTitle = document.title;
-
   let tree = new Tree();
 
-  let activeNode = null;
-  let activeTree = null;
-  let activeSearch = null;
+  let nav = new Nav($1('.tree-nav'), {
+    onNavigate: navigateToNode,
+  });
+  let search = new Search($1('.search__field'), $1('.search__clear'), tree, {
+    // onFilter set later below.
+  });
+  let page = new Page($1('main'), {
+    onSearch: (q) => {
+      search.setQuery(q);
+      search.render();
+      search.perform();
+    },
+    onNavigate: navigateToNode,
+  });
 
-  let main = $1('main');
-  let nav = $1('.tree-nav');
-  let searchField = $1('.search__field');
-  let searchClear = $1('.search__clear');
+  // Capture page and nav.
+  search.setOnFilter((root, q) => {
+    history.replaceState(
+      {
+        node: page.node,
+        search: q || '',
+      },
+      '',
+      // Every search action can be navigated to, just the "q" part changes.
+      q ? `${window.location.pathname}?q=${q}` : window.location.pathname,
+    );
 
-  //
-  // Global State
-  //
+    nav.setRoot(root);
+    nav.render();
+  });
 
   // Initializes the tree, the left hand tree navigation and displays
   // the currently route selected node - if any.
   (function initialState() {
     let params = new URLSearchParams(window.location.search);
+
+    // Fetch in parallel.
+    let hello = Client.hello();
     let get = Client.get(window.location.pathname.replace('/tree/', ''));
     let sync = tree.sync();
 
-    Promise.all([get, sync]).then((vals) => {
-      restoreState(params.get('q'), vals[0]);
+    hello.then((data) => {
+      // Representing.
+      console.log(`%cDSK Version ${data.version}`, 'background-color: #0E26FC; color: white;');
+      console.log('https://github.com/atelierdisko/dsk');
+
+      $1('.project-name').innerText = data.project;
+      page.setBaseTitle(`${document.title} ${data.project}`);
+      // Will render page in restoreState().
+
+      Promise.all([get, sync]).then((vals) => {
+        restoreState(params.get('q'), vals[0]);
+      });
     });
   }());
 
-
   // Restore previous state, when navigating back and forth.
   window.addEventListener('popstate', (ev) => {
     if (ev.state) {
@@ -51,44 +81,25 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   function restoreState(q, n) {
-    searchField.value = q;
+    search.setQuery(q);
+    page.setNode(n);
+    nav.setActiveNode(n);
 
-    setTitle(n);
-    renderNode(n);
+    search.render();
+    page.render();
     // Must wait until we have nav, to activateNode.
-    activeNode = n;
 
     if (!q) {
-      renderNav(tree.root, activeNode);
+      nav.setRoot(tree.root);
+      nav.render();
     } else {
       Client.search(q).then((results) => {
-        renderNav(tree.filteredBy(results).root, activeNode);
+        nav.setRoot(tree.filteredBy(results).root);
+        nav.render();
       });
     }
   }
 
-  function setTitle(n) {
-    document.title = (n ? `${baseTitle}: ${n.title}` : baseTitle);
-  }
-
-  //
-  // Node Display
-  //
-
-  // main.querySelectorAll('.text a, .crumbs a, .keywords a, .children-table a').forEach((el) => {
-  main.addEventListener('click', (ev) => {
-    if (ev.metaKey || !ev.target || ev.target.nodeName !== 'A') {
-      return;
-    }
-    ev.preventDefault();
-
-    // Tag-links are not links to be followed, but queries
-    // to be entered into the search bar.
-
-    // Differntiate between node links and other links.
-    console.log('Clicked link in main!', ev.target);
-  });
-
   // Load the node based on node URL path.
   function navigateToNode(nurl, replaceState) {
     return Client.get(nurl).then((n) => {
@@ -101,161 +112,11 @@ document.addEventListener('DOMContentLoaded', function() {
         q ? `/tree/${nurl}?q=${q}` : `/tree/${nurl}`,
       );
 
-      setTitle(n);
-      renderNode(n);
-      activeNode = n;
-
-      let active;
-      active = nav.querySelector('.is-active');
-      if (active) {
-        active.classList.remove('is-active');
-      }
-      active = nav.querySelector(`a[href="/tree/${n.url}"]`);
-      if (active) {
-        active.parentNode.classList.add('is-active');
-      }
-    });
-  }
-
-  function renderNode(n) {
-    main.innerHTML = '';
-
-    let title = document.createElement('section');
-    title.classList.add('title');
-    title.innerHTML = `<h1>${n.title}</h1>`;
-
-    main.appendChild(title);
-
-    if (n.description) {
-      let description = document.createElement('section');
-      description.classList.add('description');
-      description.innerHTML = n.description;
-
-      main.appendChild(description);
-    }
-
-    if (n.tags.length) {
-      let tags = document.createElement('section');
-      tags.classList.add('tags');
-
-      let ul = document.createElement('ul');
-
-      n.tags.forEach((tag) => {
-        let li = document.createElement('li');
-        li.classList.add('tags__tag');
-
-        let a = document.createElement('a');
-        a.href = `/tree/${n.url}?q=${tag}`;
-        a.innerText = tag;
-
-        li.appendChild(a);
-        ul.appendChild(li);
-      });
-
-      tags.appendChild(ul);
-      main.appendChild(tags);
-    }
-
-    let info = document.createElement('div');
-    info.classList.add('info');
-
-    main.appendChild(info);
-
-    let twoColumns = document.createElement('div');
-    twoColumns.classList.add('two-columns');
-
-    info.appendChild(twoColumns);
-
-    if (n.docs[0]) {
-      let text = document.createElement('div');
-      text.classList.add('text');
-      text.innerHTML = n.docs[0].html;
-
-      twoColumns.appendChild(text);
-    }
-  }
-
-  //
-  // Tree Navigation
-  //
-
-  function renderNav(root, activeNode) {
-    nav.innerHTML = '';
+      page.setNode(n);
+      nav.setActiveNode(n);
 
-    if (root.children.length) {
-      nav.appendChild(renderList(root, activeNode).childNodes[1]);
-    }
-  }
-
-  // Recursively turns the given tree data into a "ul li" structure.
-  function renderList(n, activeNode) {
-    let li = document.createElement('li');
-    let ul = document.createElement('ul');
-    let a = document.createElement('a');
-
-    if (activeNode && n.url === activeNode.url) {
-      li.classList.add('is-active');
-    }
-
-    a.href = `/tree/${n.url}`;
-    a.innerHTML = n.title;
-    a.addEventListener('click', (ev) => {
-      if (ev.metaKey) {
-        return;
-      }
-      ev.preventDefault();
-      navigateToNode(n.url);
-    });
-
-    li.appendChild(a);
-
-    if (n.children.length) {
-      li.appendChild(ul);
-    }
-    n.children.forEach((c) => {
-      let cl = renderList(c, activeNode);
-      if (cl) {
-        ul.appendChild(cl);
-      }
+      page.render();
+      nav.render();
     });
-    return li;
   }
-
-  //
-  // Search
-  //
-
-  searchField.addEventListener('input', function() {
-    let q = this.value;
-
-    history.replaceState(
-      { node: activeNode, search: q },
-      '',
-      // Every search action can be navigated to, just the "q" part changes.
-      q ? `${window.location.pathname}?q=${q}` : window.location.pathname,
-    );
-
-    if (!q) {
-      renderNav(tree.root, activeNode);
-    } else {
-      Client.search(q).then((results) => {
-        renderNav(tree.filteredBy(results).root, activeNode);
-      });
-    }
-  });
-
-  searchClear.addEventListener('click', () => {
-    searchField.value = '';
-    history.replaceState({ node: activeNode, search: '' }, '', window.location.pathname);
-    renderNav(tree.root, activeNode);
-  });
-
-  // Focus the search field when pressing CMD + k.
-  window.addEventListener('keydown', (ev) => {
-    if (ev.key !== 'k' || !ev.metaKey) {
-      return;
-    }
-    ev.preventDefault();
-    searchField.focus();
-  });
 });
diff --git a/frontend/js/nav.js b/frontend/js/nav.js
new file mode 100644
index 00000000..ca9cb08a
--- /dev/null
+++ b/frontend/js/nav.js
@@ -0,0 +1,65 @@
+/*!
+ * Copyright 2018 Atelier Disko. All rights reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+class Nav {
+  constructor(nav, props) {
+    this.nav = nav;
+    this.onNavigate = props.onNavigate;
+  }
+
+  setRoot(root) {
+    this.root = root;
+  }
+
+  setActiveNode(node) {
+    this.activeNode = node;
+  }
+
+  render() {
+    this.nav.innerHTML = '';
+
+    if (this.root.children.length) {
+      this.nav.appendChild(
+        this.renderList(this.root, this.activeNode).childNodes[1],
+      );
+    }
+  }
+
+  // Recursively turns the given tree data into a "ul li" structure.
+  renderList(n, activeNode) {
+    let li = document.createElement('li');
+    let ul = document.createElement('ul');
+    let a = document.createElement('a');
+
+    if (activeNode && n.url === activeNode.url) {
+      li.classList.add('is-active');
+    }
+
+    a.href = `/tree/${n.url}`;
+    a.innerHTML = n.title;
+    a.addEventListener('click', (ev) => {
+      if (ev.metaKey) {
+        return;
+      }
+      ev.preventDefault();
+      this.onNavigate(n.url);
+    });
+
+    li.appendChild(a);
+
+    if (n.children.length) {
+      li.appendChild(ul);
+    }
+    n.children.forEach((c) => {
+      let cl = this.renderList(c, activeNode);
+      if (cl) {
+        ul.appendChild(cl);
+      }
+    });
+    return li;
+  }
+}
diff --git a/frontend/js/page.js b/frontend/js/page.js
new file mode 100644
index 00000000..1871c915
--- /dev/null
+++ b/frontend/js/page.js
@@ -0,0 +1,273 @@
+/*!
+ * Copyright 2018 Atelier Disko. All rights reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+/* globals Client: false */
+
+class Page {
+  constructor(main, props) {
+    this.main = main;
+
+    this.onSearch = props.onSearch;
+    this.onNavigate = props.onNavigate;
+    this.handleClicks = this.handleClicks.bind(this);
+
+    main.addEventListener('click', this.handleClicks);
+  }
+
+  setBaseTitle(title) {
+    this.baseTitle = title;
+  }
+
+  setNode(n) {
+    this.node = n;
+  }
+
+  handleClicks(ev) {
+    if (ev.metaKey || !ev.target || ev.target.nodeName !== 'A') {
+      return;
+    }
+    let t = ev.target;
+    let p = ev.target.parentNode;
+
+    // Tag-links are not links to be followed, but queries
+    // to be entered into the search bar. They usually have
+    // the form:
+    // /tree/Blocks/Entering-Data/RadioButtonGroup?q=Control
+    if (p.classList.contains('tags__tag')) {
+      ev.preventDefault();
+      let url = new URL(t.href);
+      let q = url.searchParams.get('q');
+
+      this.onSearch(q);
+      return;
+    }
+    if (p.classList.contains('crumbs__crumb')) {
+      ev.preventDefault();
+      let url = new URL(t.href);
+
+      this.onNavigate(url.pathname.replace('/tree/', ''));
+      return;
+    }
+
+    // Differentiate between node links and other links.
+    if (t.dataset.node) {
+      ev.preventDefault();
+      this.onNavigate(t.dataset.node);
+      return;
+    }
+
+    if (p.parentNode.classList.contains('children-table__child')) {
+      ev.preventDefault();
+      let url = new URL(t.href);
+
+      this.onNavigate(url.pathname.replace('/tree/', ''));
+      return;
+    }
+  }
+
+  render() {
+    document.title = `${this.baseTitle}: ${this.node.title}`;
+
+    this.main.innerHTML = '';
+
+    // Crumbs
+    let crumbs = document.createElement('ul');
+    crumbs.classList.add('crumbs');
+    this.main.appendChild(crumbs);
+
+    this.node.crumbs.forEach((crumb) => {
+      let li = document.createElement('li');
+      li.classList.add('crumbs__crumb');
+      crumbs.appendChild(li);
+
+      let a = document.createElement('a');
+      a.href = `/tree/${crumb.url}`;
+      a.innerText = crumb.title;
+      li.appendChild(a);
+    });
+
+    // Title
+    let title = document.createElement('h1');
+    title.classList.add('title');
+    title.innerText = this.node.title;
+    this.main.appendChild(title);
+
+    // Description
+    if (this.node.description) {
+      let description = document.createElement('section');
+      description.classList.add('description');
+      description.innerHTML = this.node.description;
+
+      this.main.appendChild(description);
+    }
+
+    // Tags
+    if (this.node.tags.length) {
+      let tags = document.createElement('ul');
+      tags.classList.add('tags');
+
+      this.node.tags.forEach((tag) => {
+        let li = document.createElement('li');
+        li.classList.add('tags__tag');
+
+        let a = document.createElement('a');
+        a.href = `/tree/${this.node.url}?q=${tag}`;
+        a.innerText = tag;
+
+        li.appendChild(a);
+        tags.appendChild(li);
+      });
+      this.main.appendChild(tags);
+    }
+
+    // Docs
+    if (this.node.docs.length > 1) {
+      // Zwitch between documents
+      let switches = document.createElement('section');
+      switches.classList.add('doc-switches');
+      this.main.appendChild(switches);
+
+      this.node.docs.sort((a, b) => {
+        if (a.title.toLowerCase() === 'readme') {
+          return -1;
+        }
+        if (b.title.toLowerCase() === 'readme') {
+          return 1;
+        }
+        return 0;
+      });
+
+      this.node.docs.forEach((doc, index) => {
+        let a = document.createElement('a');
+        a.classList.add('doc-switch');
+        a.href = `#doc-${index}`;
+        a.innerText = doc.title;
+
+        a.addEventListener('click', (ev) => {
+          ev.preventDefault();
+
+          this.main.querySelectorAll('.doc').forEach((el) => {
+            el.classList.toggle('hide', el.id !== `doc-${index}`);
+          });
+        });
+        switches.appendChild(a);
+      });
+    }
+
+    // Info Area
+    let info = document.createElement('section');
+    info.classList.add('info');
+    this.main.appendChild(info);
+
+    // Docs
+    if (this.node.docs.length) {
+      this.node.docs.forEach((doc, index) => {
+        let text = document.createElement('article');
+        text.classList.add('doc');
+        text.innerHTML = doc.html;
+
+        if (index !== 0) {
+          text.classList.add('hide');
+        }
+        text.id = `doc-${index}`;
+        info.appendChild(text);
+      });
+    } else {
+      let dir = document.createElement('table');
+      dir.classList.add('children-table');
+      info.appendChild(dir);
+
+      this.node.children.forEach((c) => {
+        let row = document.createElement('tr');
+        row.classList.add('children-table__child');
+        dir.appendChild(row);
+
+        let cell0 = document.createElement('td');
+        row.appendChild(cell0);
+
+        let at = document.createElement('a');
+        at.innerText = c.title;
+        at.href = `/tree/${c.url}`;
+        cell0.appendChild(at);
+
+        let cell1 = document.createElement('td');
+        row.appendChild(cell1);
+
+        let ad = document.createElement('a');
+        ad.href = `/tree/${c.url}`;
+        cell1.appendChild(ad);
+
+        Client.get(c.url).then((item) => {
+          ad.innerText = c.description || '';
+        });
+      });
+    }
+
+    // Downloads
+    if (this.node.downloads.length) {
+      let downloads = document.createElement('aside');
+      downloads.classList.add('downloads');
+      info.appendChild(downloads);
+
+      let h1 = document.createElement('h1');
+      h1.classList.add('downloads__title');
+      h1.innerText = 'Downloads';
+      downloads.appendChild(h1);
+
+      let downloadsList = document.createElement('ul');
+      downloads.appendChild(downloadsList);
+
+      this.node.downloads.forEach((c) => {
+        let li = document.createElement('li');
+        li.classList.add('download');
+        downloadsList.appendChild(li);
+
+        let a = document.createElement('a');
+        a.href = `/api/v1/tree/${c.url}`;
+        a.innerText = c.name;
+        a.setAttribute('download', '');
+        li.appendChild(a);
+      });
+    }
+
+    // Show Source
+    let source = document.createElement('section');
+    source.classList.add('source');
+    this.main.appendChild(source);
+
+    let a = document.createElement('a');
+    a.innerText = 'Source';
+    a.href = '#source-code';
+    source.appendChild(a);
+
+    let wrap = document.createElement('div');
+    wrap.classList.add('hide');
+    source.appendChild(wrap);
+
+    let pre = document.createElement('pre');
+    pre.classList.add('source__code');
+    wrap.appendChild(pre);
+
+    let code = document.createElement('code');
+    code.innerText = `GET /api/v1/tree/${this.node.url}\n\n`;
+    code.innerText += JSON.stringify(this.node, null, 2);
+    pre.appendChild(code);
+
+    let more = document.createElement('a');
+    wrap.classList.add('source__diy');
+    more.href = 'https://github.com/atelierdisko/dsk/tree/master#building-your-own-frontend';
+    more.target = 'new';
+    more.innerText = 'Build your own frontend';
+    wrap.appendChild(more);
+
+    a.addEventListener('click', (ev) => {
+      ev.preventDefault();
+      wrap.classList.toggle('hide');
+    });
+  }
+}
+
diff --git a/frontend/js/search.js b/frontend/js/search.js
new file mode 100644
index 00000000..8a4339f3
--- /dev/null
+++ b/frontend/js/search.js
@@ -0,0 +1,64 @@
+/*!
+ * Copyright 2018 Atelier Disko. All rights reserved.
+ *
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+/* globals Client: false */
+
+class Search {
+  constructor(field, clear, tree, props) {
+    this.field = field;
+    this.clear = clear;
+    this.tree = tree;
+
+    this.query = field.value || '';
+
+    this.onFilter = props.onFilter;
+
+    let _this = this;
+    this.field.addEventListener('input', function() {
+      _this.setQuery(this.value);
+      // Skip render, as the value is just read from there.
+      _this.perform();
+    });
+
+    this.clear.addEventListener('click', () => {
+      this.setQuery('');
+      this.render();
+      this.perform();
+    });
+
+    // Focus the search field when pressing CMD + k.
+    window.addEventListener('keydown', (ev) => {
+      if (ev.key !== 'k' || !ev.metaKey) {
+        return;
+      }
+      ev.preventDefault();
+      this.field.focus();
+    });
+  }
+
+  setOnFilter(onFilter) {
+    this.onFilter = onFilter;
+  }
+
+  setQuery(q) {
+    this.query = q;
+  }
+
+  render() {
+    this.field.value = this.query;
+  }
+
+  perform() {
+    if (!this.query) {
+      this.onFilter(this.tree.root, this.query);
+    } else {
+      Client.search(this.query).then((results) => {
+        this.onFilter(this.tree.filteredBy(results).root, this.query);
+      });
+    }
+  }
+}