diff --git a/Makefile b/Makefile
index 36aca36..cd30671 100644
--- a/Makefile
+++ b/Makefile
@@ -56,29 +56,11 @@ cover: $(SOURCES)
 # Documentation
 #################################################
 
-PACKAGE_VERSION := 0.4.0
-docs/sitemap.xml: $(SOURCES)
-	dub build -b ddox
-	@echo "Performing cosmetic changes..."
-	# Navigation Sidebar
-	@$(SED) -i -e "/<nav id=\"main-nav\">/r views/nav.html" -e "/<nav id=\"main-nav\">/d" `find docs -name '*.html'`
-	# Page Titles
-	@$(SED) -i "s/<\/title>/ - wgpu-d<\/title>/" `find docs -name '*.html'`
-	# Index
-	@$(SED) -i "s/API documentation/API Reference/g" docs/index.html
-	@$(SED) -i -e "/<h1>API Reference<\/h1>/r views/index.html" -e "/<h1>API Reference<\/h1>/d" docs/index.html
-	# License Link
-	@$(SED) -i "s/3-Clause BSD License/<a href=\"https:\/\/opensource.org\/licenses\/BSD-3-Clause\">3-Clause BSD License<\/a>/" `find docs -name '*.html'`
-	# Footer
-	@$(SED) -i -e "/<p class=\"faint\">Generated using the DDOX documentation generator<\/p>/r views/footer.html" -e "/<p class=\"faint\">Generated using the DDOX documentation generator<\/p>/d" `find docs -name '*.html'`
-	# Dub Package Version
-	@echo Latest tag: `git describe --tags --abbrev=0`
-	@$(SED) -i "s/DUB_VERSION/$(PACKAGE_VERSION)/g" `find docs -name '*.html'`
-	@echo Done
-
 docs: docs/sitemap.xml
 ifeq ($(OS),Windows_NT)
 	$(error Build documentation on *nix!)
+else
+	@dub build -b docs
 endif
 .PHONY: docs
 
diff --git a/docs/process.d b/docs/process.d
new file mode 100644
index 0000000..b407aae
--- /dev/null
+++ b/docs/process.d
@@ -0,0 +1,27 @@
+/// Process handlebars templates in API documentation.
+///
+/// Authors: Chance Snow
+/// Copyright: Copyright © 2024 Chance Snow. All rights reserved.
+/// License: MIT License
+module wgpu.docs.process;
+
+import handlebars.tpl;
+static import std.file;
+import std.process;
+import std.stdio;
+
+void main(string[] args) {
+  string template_ = std.file.readText("views/index.hbs");
+
+  struct Constants {
+    string DUB_VERSION;
+    auto SYMBOLS = new string[0];
+    auto MODULES = new string[0];
+  }
+
+  auto gitTagCmd = execute(["git", "describe", "--tags", "--abbrev=0"]);
+  assert(gitTagCmd.status == 0);
+  gitTagCmd.output.writeln;
+  auto result = render(template_, Constants(gitTagCmd.output));
+  result.writeln;
+}
diff --git a/docs/styles/docs.css b/docs/styles/docs.css
new file mode 100644
index 0000000..ea906aa
--- /dev/null
+++ b/docs/styles/docs.css
@@ -0,0 +1,338 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
+    "Segoe UI", "Roboto Sans", "Open Sans", sans-serif;
+  font-size: 10pt;
+}
+
+.flex {
+  display: flex;
+}
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}
+
+h1, h2, h3 {
+  font-weight: normal;
+}
+h1 {
+  margin-top: -5pt;
+}
+h2 {
+  margin-top: 2em;
+}
+h3 {
+  margin-top: 1.5em;
+}
+
+a {
+  color: #1133EE;
+  text-decoration: none;
+}
+a:hover {
+  color: #4488FF;
+  text-decoration: underline;
+}
+
+table {
+  border-collapse: collapse;
+}
+th, td {
+  padding: 0 10pt;
+  vertical-align: top;
+}
+th:first-child,
+td:first-child {
+  padding-left: 0;
+}
+th {
+  text-align: left;
+  font-weight: normal;
+  font-style: italic;
+}
+tr {
+  border-bottom: 1px dashed #ddd;
+  vertical-align: top;
+}
+col.caption {
+  min-width: 150pt;
+}
+
+p.faint {
+  color: #ccc;
+}
+
+span.tableEntryAnnotation {
+  color: #888;
+}
+
+main,
+main > aside:first-of-type > nav,
+#symbolSearch,
+#symbolSearchResults {
+  box-sizing: border-box;
+}
+
+main {
+  display: flex;
+  vertical-align: top;
+  font-size: 9.5pt;
+  flex-grow: 1;
+}
+
+main > aside:first-of-type > nav {
+  vertical-align: top;
+  font-size: 9.5pt;
+  padding: 2em 1.5em;
+  min-width: 16em;
+  background: linear-gradient(#ddd, #fff),
+    linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),
+    linear-gradient(#eee, #fff);
+  background-size:
+    1px 100%,
+    100% 100%,
+    100% 100%;
+  background-position:
+    100% 0,
+    0 0,
+    0 0;
+  background-repeat: no-repeat, no-repeat;
+}
+
+main > aside:first-of-type nav h1 {
+  align-self: center;
+  margin: 0 0 0 0.25rem;
+  font-size: 19px;
+  line-height: 1;
+}
+
+main > aside:first-of-type nav h1 > span {
+  display: block;
+  padding-bottom: 0.25em;
+  white-space: nowrap;
+}
+main > aside:first-of-type nav h1 > span.faint {
+  font-weight: lighter;
+}
+
+#logo {
+  margin-right: 0.5rem;
+  max-width: 4rem;
+}
+
+main > article {
+  margin: 2em;
+}
+
+article.module > section.members > ul {
+  padding: 0;
+  list-style: none;
+}
+
+ul li > dd.decl {
+  margin: 8px 0 0 12px;
+}
+
+ul li > dd.decl > ul.members {
+  list-style-type: square;
+}
+
+article.module > section.members > ul > li {
+  padding: 0;
+}
+
+ul.enum.members > li.member > dt.decl > code {
+  display: none;
+}
+
+dt.decl {
+  font-family: monospace;
+}
+
+#symbolSearchPane form {
+  margin-bottom: 1.5em;
+}
+#symbolSearch {
+  width: 100%;
+}
+#symbolSearchResults {
+  position: absolute;
+  padding-right: 0.5em;
+  margin: 0;
+  margin-top: -1.5em;
+  background: white;
+  min-width: 20em;
+  border: 1px solid #ddd;
+  box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.5);
+}
+.symbolList {
+  list-style: none;
+  padding: 0;
+  overflow: hidden;
+}
+.symbolList li {
+  background-repeat: no-repeat;
+  background-position: 0 1pt;
+  padding-left: 18px;
+}
+
+.searchResults.symbolList li {
+  background-position: 0 5pt;
+}
+.searchResults h2 {
+  margin-bottom: 0;
+  margin-top: 1em;
+}
+
+.symbolList .deprecated a {
+  color: gray;
+}
+.symbolList .module {
+  background-image: url(../icons/module.png);
+}
+.symbolList .functiondeclaration {
+  background-image: url(../icons/function.png);
+}
+.symbolList .classdeclaration {
+  background-image: url(../icons/class.png);
+}
+.symbolList .interfacedeclaration {
+  background-image: url(../icons/interface.png);
+}
+.symbolList .structdeclaration {
+  background-image: url(../icons/struct.png);
+}
+.symbolList .variabledeclaration {
+  background-image: url(../icons/variable.png);
+}
+.symbolList .property {
+  background-image: url(../icons/property.png);
+}
+.symbolList .enumdeclaration {
+  background-image: url(../icons/enum.png);
+}
+.symbolList .enummemberdeclaration {
+  background-image: url(../icons/enummember.png);
+}
+.symbolList .aliasdeclaration {
+  background-image: url(../icons/alias.png);
+}
+.symbolList .templatedeclaration {
+  background-image: url(../icons/template.png);
+}
+
+ul.tree-view li {
+  list-style-type: none;
+  padding-left: 18px;
+  padding-right: 4px;
+}
+
+ul.tree-view .package {
+  padding-left: 18px;
+  background-image: url(../icons/package.png);
+  background-repeat: no-repeat;
+  background-position: left 2px;
+  cursor: default;
+}
+
+ul.tree-view .package:hover {
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+ul.tree-view .module {
+  padding-left: 18px;
+  background-image: linear-gradient(
+      rgba(255, 255, 255, 0.5),
+      rgba(255, 255, 255, 0.5)
+    ),
+    url(../icons/module.png);
+  background-repeat: no-repeat, no-repeat;
+  background-position:
+    left 1px,
+    left 1px;
+  background-size: 18px 16px;
+}
+
+ul.tree-view .module.selected,
+ul.tree-view .package.selected {
+  font-weight: bold;
+}
+ul.tree-view .module.selected {
+  background-image: url(../icons/module.png);
+}
+
+ul.tree-view li.collapsed ul {
+  display: none;
+}
+
+ul.tree-view {
+  padding: 0;
+  margin: 0;
+}
+
+ul.tree-view ul {
+  margin: 0;
+  padding: 0;
+}
+
+a.protected {
+  font-style: italic;
+  background-image: url(../icons/protected.png);
+  background-repeat: no-repeat;
+  padding-left: 16px;
+}
+a.package {
+  font-style: italic;
+  background-image: url(../icons/package.png);
+  background-repeat: no-repeat;
+  padding-left: 16px;
+}
+
+a.private {
+  font-style: italic;
+  background-image: url(../icons/private.png);
+  background-repeat: no-repeat;
+  padding-left: 16px;
+}
+a.inherited:after {
+  content: url(../icons/inherited.png);
+  padding-left: 2pt;
+}
+
+nav.page-nav ul {
+  list-style: none;
+  padding-left: 0;
+}
+nav.page-nav li a {
+  color: black;
+}
+nav.page-nav li:before {
+  content: "▼";
+  padding-right: 3px;
+}
+
+.license-info {
+  margin-top: 2em;
+  color: #888;
+}
+.license-info p {
+  display: inline;
+}
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 2em 2em;
+}
+
+@media (max-width: 500pt) {
+  body {
+    display: block;
+  }
+}
diff --git a/docs/styles/dub.css b/docs/styles/dub.css
new file mode 100644
index 0000000..82169ac
--- /dev/null
+++ b/docs/styles/dub.css
@@ -0,0 +1,42 @@
+.bs-hbtn {
+  display: inline-block;
+  color: white;
+  height: 34pt;
+  vertical-align: top;
+  text-align: center;
+  float: right;
+}
+.bs-hbtn.red.left {
+  background: #ab1919;
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-size: 100% 34pt, 100% 18pt, 18.5pt 34pt;
+  background-position: 0 0, 18pt 34pt, 0 0;
+  background-clip: content-box, border-box, border-box;
+}
+.bs-hbtn.black.right {
+  background: black;
+  margin-right: 18pt;
+  background-repeat: no-repeat, no-repeat;
+  background-size: 100% 34pt, 100% 18pt, 18.5pt 34pt;
+  background-position: 0 0, -18pt 34pt, 100% 0;
+  background-clip: content-box, border-box, border-box;
+}
+.dub-logo {
+  background-image: url(../images/dub-logo.png);
+  width: 56px;
+  height: 100%;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+#downloadButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+#downloadButton large {
+  font-size: 14pt;
+  line-height: 16pt;
+}
+#downloadButton .content {
+  padding: 0 5pt;
+}
diff --git a/dub.json b/dub.json
index 2bc32e8..e2002fc 100644
--- a/dub.json
+++ b/dub.json
@@ -21,6 +21,22 @@
   },
   "systemDependencies": "vulkan >= 1.1.0 or DirectX >= 11 or metal >= 2 or OpenGL >= 3.3",
   "preGenerateCommands": ["make wgpu"],
+  "buildTypes": {
+    "docs": {
+      "sourceFiles": [
+        "views/docs.ddoc"
+      ],
+      "buildOptions": ["syntaxOnly"],
+      "dependencies": {
+        "handlebars": "~>0.3.1"
+      },
+      "dflags": ["-Dddocs"],
+      "postBuildCommands-posix": [
+        "dub fetch handlebars",
+        "rdmd -I~/.dub/packages/handlebars/0.3.1/handlebars/source docs/process.d"
+      ]
+    }
+  },
   "configurations": [
     {
       "name": "library",
diff --git a/views/docs.ddoc b/views/docs.ddoc
new file mode 100644
index 0000000..d91f405
--- /dev/null
+++ b/views/docs.ddoc
@@ -0,0 +1,236 @@
+API=WebGPU D Bindings API Reference
+API_TITLE=WebGPU API Reference
+
+FOOTER=<footer>
+  <a href="https://github.com/chances/wgpu-d#readme">GitHub</a>
+  <span class="faint" style="float: right;">Generated using <a href="https://code.dlang.org/packages/ddox">DDOX</a></span>
+</footer>
+
+DDOC=<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>$(TITLE) - $(API_TITLE)</title>
+    <link rel="stylesheet" href="styles/docs.css" />
+    <link rel="stylesheet" href="styles/dub.css" />
+  </head>
+  <body>
+    $(HEADER)
+    <main>
+      <a id="downloadButton" href="https://code.dlang.org/packages/wgpu-d">
+        <div class="bs-hbtn right black">
+          <div class="content">get <strong>wgpu-d</strong><br><large>{{ DUB_VERSION }}</large></div>
+        </div><div class="bs-hbtn left red">
+          <div class="dub-logo"></div>
+        </div>
+      </a>
+      <aside class="flex row">
+        <nav>
+          <header class="flex row">
+            <img id="logo" src="https://chances.github.io/wgpu-d/images/logo.png" alt="WebGPU Logo">
+            <h1>
+              <span>D Bindings</span>
+            </h1>
+          </header>
+          <ul style="list-style: none; padding: 0;">
+            <li>
+              <a href="https://chances.github.io/wgpu-d">API Reference</a>
+            </li>
+            <li>
+              <a href="https://code.dlang.org/packages/wgpu-d">Download</a>
+            </li>
+            <li>
+              <a href="https://github.com/chances/wgpu-d#readme">Open Source on GitHub</a>
+            </li>
+          </ul>
+          <h2>API Reference</h2>
+          <ul id="symbols">{{#each array}}
+            <li>{{ this }}</li>
+          {{/each}}</ul>
+        </nav>
+      </aside>
+      <article class="module">
+        $(ARTICLE_HEADER)
+        <h1>$(MODULE_LABEL) $(TITLE)</h1>
+        <section class="source">
+          <h4>Source</h4>
+          <p><a href="https://github.com/chances/wgpu-d/blob/main/$(SRCFILENAME)">$(SRCFILENAME)</a></p>
+        </section>
+        $(BODY)
+      </article>
+    </main>
+    $(FOOTER)
+  </body>
+</html>
+
+ESCAPES =
+  /</&lt;/
+  />/&gt;/
+  /&/&amp;/
+  /MIT License/<a href="https:\/\/opensource.org\/licenses\/MIT">MIT License</a>/
+
+BCKGND_BGCOLOR=#6080a0
+BCKGND_FGCOLOR=#ffffff
+MAIN_BGCOLOR=#e0e0e0
+MAIN_FGCOLOR=#000000
+INTRO_BGCOLOR=$(NEST1_BGCOLOR)
+INTRO_FGCOLOR=$(NEST1_FGCOLOR)
+NEST1_BGCOLOR=#f0f0f0
+NEST1_FGCOLOR=$(MAIN_FGCOLOR)
+NEST2_BGCOLOR=#f8f8f8
+NEST2_FGCOLOR=$(MAIN_FGCOLOR)
+NEST3_BGCOLOR=#ffffff
+NEST3_FGCOLOR=$(MAIN_FGCOLOR)
+CODEBLK_BGCOLOR=#ffffc0
+CODEBLK_FGCOLOR=#000000
+
+MODULE_LABEL=Module
+TITLE=<code>$0</code>
+MEMBERS_HEADER=<h2>Members</h2>
+
+RED=<span style="color:red">$0</span>
+BLUE=<span style="color:blue">$0</span>
+GREEN=<span style="color:green">$0</span>
+YELLOW=<span style="color:yellow">$0</span>
+BLACK=<span style="color:black">$0</span>
+WHITE=<span style="color:white">$0</span>
+
+DDOC_SECTIONS=$0
+
+DDOC_LICENSE = <section class="license">
+  <h4>License</h4>
+  <p>
+    $0
+  </p>
+</section>$(LF)
+
+DDOC_AUTHORS = <section class="authors">
+  <h4>Authors</h4>
+  <p>
+    $0
+  </p>
+</section>$(LF)
+
+DDOC_BUGS = <section class="bugs">
+  <h4>Bugs</h4>
+  <p>
+    $0
+  </p>
+</section>$(LF)
+
+DDOC_COPYRIGHT = <section class="copyright">
+  <h4>Copyright</h4>
+  <p>
+    $0
+  </p>
+</section>$(LF)
+
+DDOC_DATE = <section class="date">
+  <h4>Date</h4>
+  <p>
+    $0
+  </p>
+</section>$(LF)
+
+DDOC_DEPRECATED = <section class="deprecated">
+  <h4>Deprecated</h4>
+  <p>
+    $0
+  </p>
+</section>$(LF)
+
+DDOC_HISTORY = <section class="history">
+  <h4>History</h4>
+  <p>
+    $0
+  </p>
+</section>$(LF)
+
+DDOC_SEE_ALSO = <section class="see-also">
+  <h4>See Also</h4>
+  <p>
+    $0
+  </p>
+</section>$(LF)
+
+DDOC_STANDARDS = <section class="standards">
+  <h4>Standards</h4>
+  <p>
+    $0
+  </p>
+</section>
+
+DDOC_THROWS = <section class="throws">
+  <h4>Throws</h4>
+  <p>
+    $0
+  </p>
+</section>
+
+DDOC_VERSION = <section class="version">
+  <h4>Version</h4>
+  <p>
+    $0
+  </p>
+</section>
+
+DDOC_MODULE_MEMBERS=<section class="members">
+    $(MEMBERS_HEADER)
+    <ul>$0</ul>
+  </section>
+
+DDOC_MEMBERS = <ul class="members">
+  $0
+</ul>
+
+DDOC_CLASS_MEMBERS=<h4 class="class members">Members</h4>
+  <dl>$0</dl>
+DDOC_STRUCT_MEMBERS = <ul class="struct members">
+  $0
+</ul>
+DDOC_ENUM_MEMBERS = <ul class="enum members">
+  $0
+</ul>
+DDOC_TEMPLATE_MEMBERS = <ul class="template members">
+  $0
+</ul>
+
+DDOC_MEMBER = <li class="member">
+  $0
+</li>
+
+DDOC_MEMBER_HEADER = <h3>$0</h3>
+DDOC_HEADER_ANCHOR = <a id="$1" href="#$1"><code class="code">$2</code></a>
+
+DDOC_ANCHOR = <span class="anchor" id="$1"></span>
+DDOC_DECL=<dt class="decl"><code>$0</code></dt>
+DDOC_PSYMBOL=<strong>$0</strong>
+DDOC_DECL_DD=<dd class="decl">$0</dd>
+
+DDOC_SUMMARY=<p>$0</p>
+DDOC_DESCRIPTION=<p>$0</p>
+DDOC_BLANKLINE=</p><p>
+
+CODE=<code>$0</code>
+DDOC_PARAMS = <div class="ddoc_params">
+  <h4>Parameters</h4>
+  <table cellspacing="0" cellpadding="5" border="0" class="params">
+    <tbody>
+      $0
+    </tbody>
+  </table>
+</div>$(LF)
+DDOC_PARAM_ROW=<tr>$0</tr>
+DDOC_PARAM_ID=<td class="param name">$(CODE $0)</td>
+DDOC_PARAM_DESC=<td class="param desc"><p>$0</p></td>
+DDOC_PARAM=$(CODE $(I $0))
+
+DDOC_SECTION_H=<h4 class="section">$0</h4>
+DDOC_SECTION=<p>$0</p>
+SECTION=$(DDOC_SECTION_H $1) $(DDOC_SECTION $2)
+
+DDOC_ENUM_BASETYPE=<a href="https://dlang.org/spec/type.html#basic-data-types">$0</a>
+
+DDOC_RETURNS=<p><strong>Returns:</strong> $0</p>
+DDOC_EXAMPLES=$(SECTION Examples, $0)
+DDOC_BUGS=$(SECTION $(RED Bugs), $0)
diff --git a/views/footer.html b/views/footer.html
deleted file mode 100644
index 2d27cdb..0000000
--- a/views/footer.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div style="display: flex; justify-content: space-between; margin-top: 2em;">
-  <a href="https://github.com/chances/wgpu-d#readme">GitHub</a>
-  <span class="faint" style="float: right;">Generated using <a href="https://code.dlang.org/packages/ddox">DDOX</a></span>
-</div>
diff --git a/views/index.hbs b/views/index.hbs
new file mode 100644
index 0000000..d434c1a
--- /dev/null
+++ b/views/index.hbs
@@ -0,0 +1,86 @@
+<html>
+<head>
+  <title></title>
+  <meta charset="UTF-8">
+  <title>WebGPU D Bindings API Reference</title>
+  <link rel="stylesheet" href="styles/docs.css" />
+  <link rel="stylesheet" href="styles/dub.css" />
+</head>
+<body>
+  <main>
+    <a id="downloadButton" href="https://code.dlang.org/packages/wgpu-d">
+      <div class="bs-hbtn right black">
+        <div class="content">get <strong>wgpu-d</strong><br><large>{{ DUB_VERSION }}</large></div>
+      </div><div class="bs-hbtn left red">
+        <div class="dub-logo"></div>
+      </div>
+    </a>
+    <aside class="flex row">
+      <nav>
+        <header class="flex row">
+          <img id="logo" src="https://chances.github.io/wgpu-d/images/logo.png" alt="WebGPU Logo">
+          <h1>
+            <span>D Bindings</span>
+          </h1>
+        </header>
+        <ul style="list-style: none; padding: 0;">
+          <li>
+            <a href="https://chances.github.io/wgpu-d">API Reference</a>
+          </li>
+          <li>
+            <a href="https://code.dlang.org/packages/wgpu-d">Download</a>
+          </li>
+          <li>
+            <a href="https://github.com/chances/wgpu-d#readme">Open Source on GitHub</a>
+          </li>
+        </ul>
+        <h2>API Reference</h2>
+        <form id="symbolSearchForm" action="#" method="GET">
+          <input id="symbolSearch" type="text" name="q" placeholder="Search for symbols" autocomplete="off" onchange="performSymbolSearch(40);" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" tabindex="1000">
+        </form>
+        <ul id="symbols">{{#each SYMBOLS}}
+          <li>{{ this }}</li>
+        {{/each}}</ul>
+      </nav>
+    </aside>
+
+    <h1>WebGPU D Bindings Reference</h1>
+    <p>
+      <a href="https://code.dlang.org/packages/wgpu-d">
+        <img src="https://img.shields.io/dub/v/wgpu-d.svg" alt="DUB Package">
+      </a>
+      <a target="_blank" href="https://opensource.org/licenses/MIT">
+        <img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT License">
+      </a>
+      <a target="_blank" rel="noopener noreferrer" href="https://github.com/chances/wgpu-d/workflows/wgpu-d%20CI/badge.svg?branch=master">
+        <img src="https://github.com/chances/wgpu-d/workflows/wgpu-d%20CI/badge.svg?branch=master" alt="wgpu-d CI">
+      </a>
+      <a href="https://codecov.io/gh/chances/wgpu-d">
+        <img src="https://codecov.io/gh/chances/wgpu-d/branch/master/graph/badge.svg" alt="codecov">
+      </a>
+    </p>
+    <p>D bindings to <a href="https://github.com/gfx-rs/wgpu-native">wgpu-native</a> as an idiomatic D wrapper around the library.</p>
+    <p>Targets wgpu-native <code><a href="https://github.com/gfx-rs/wgpu-native/releases/tag/v0.19.1.1">v0.19.1.1</a></code>.</p>
+    <h2 id="Usage">Usage</h2>
+    <pre class="json">
+    "dependencies": {
+      "wgpu-d": "{{ DUB_VERSION }}"
+    }
+    </pre>
+    <h2>Examples</h2>
+    <p>You can try the examples before installing:</p>
+    <h3>Headless</h3>
+    <pre>dub run wgpu-d:headless</pre>
+    <h3>Triangle</h3>
+    <pre>dub run wgpu-d:triangle</pre>
+    <h3>Cube</h3>
+    <pre>dub run wgpu-d:cube</pre>
+    <h2>Modules</h2>
+  </main>
+  <footer>
+    <a href="https://github.com/chances/wgpu-d#readme">GitHub</a>
+    <span class="faint" style="float: right;">Generated using <a href="https://dlang.org/spec/ddoc.html">Ddoc</a></span>
+  </footer>
+  <script type="application/javascript">const symbols = [{{#each SYMBOLS}}{{ this }},{{/each}}]</script>
+  <script type="application/javascript" src="scripts/symbols.js"></script>
+</body>
diff --git a/views/index.html b/views/index.html
deleted file mode 100644
index 969060e..0000000
--- a/views/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<style>
-.bs-hbtn {
-  display: inline-block;
-  color: white;
-  height: 34pt;
-  vertical-align: top;
-  text-align: center;
-  float: right;
-}
-.bs-hbtn.red.left {
-  background: #ab1919;
-  background-repeat: no-repeat, no-repeat, no-repeat;
-  background-size: 100% 34pt, 100% 18pt, 18.5pt 34pt;
-  background-position: 0 0, 18pt 34pt, 0 0;
-  background-clip: content-box, border-box, border-box;
-}
-.bs-hbtn.black.right {
-  background: black;
-  margin-right: 18pt;
-  background-repeat: no-repeat, no-repeat;
-  background-size: 100% 34pt, 100% 18pt, 18.5pt 34pt;
-  background-position: 0 0, -18pt 34pt, 100% 0;
-  background-clip: content-box, border-box, border-box;
-}
-.dub-logo {
-  background-image: url(images/dub-logo.png);
-  width: 56px;
-  height: 100%;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-}
-#downloadButton {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-#downloadButton large {
-  font-size: 14pt;
-  line-height: 16pt;
-}
-#downloadButton .content {
-  padding: 0 5pt;
-}
-</style>
-
-<a id="downloadButton" href="https://code.dlang.org/packages/wgpu-d">
-  <div class="bs-hbtn right black">
-    <div class="content">get <strong>wgpu-d</strong><br><large>DUB_VERSION</large></div>
-  </div><div class="bs-hbtn left red">
-    <div class="dub-logo"></div>
-  </div>
-</a>
-
-<h1>wgpu-d API Reference</h1>
-<p>
-  <a href="https://code.dlang.org/packages/wgpu-d">
-    <img src="https://img.shields.io/dub/v/wgpu-d.svg" alt="DUB Package">
-  </a>
-  <a target="_blank" href="https://opensource.org/licenses/MIT">
-    <img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT License">
-  </a>
-  <a target="_blank" rel="noopener noreferrer" href="https://github.com/chances/wgpu-d/workflows/wgpu-d%20CI/badge.svg?branch=master">
-    <img src="https://github.com/chances/wgpu-d/workflows/wgpu-d%20CI/badge.svg?branch=master" alt="wgpu-d CI">
-  </a>
-  <a href="https://codecov.io/gh/chances/wgpu-d">
-    <img src="https://codecov.io/gh/chances/wgpu-d/branch/master/graph/badge.svg" alt="codecov">
-  </a>
-</p>
-<p>D bindings to <a href="https://github.com/gfx-rs/wgpu-native">wgpu-native</a> as an idiomatic D wrapper around the library.</p>
-<p>Targets wgpu-native <code><a href="https://github.com/gfx-rs/wgpu-native/releases/tag/v0.19.1.1">v0.19.1.1</a></code>.</p>
-<h2 id="Usage">Usage</h2>
-<pre class="json">
-"dependencies": {
-  "wgpu-d": "DUB_VERSION"
-}
-</pre>
-<h2>Examples</h2>
-<p>You can try the examples before installing:</p>
-<h3>Headless</h3>
-<pre>dub run wgpu-d:headless</pre>
-<h3>Triangle</h3>
-<pre>dub run wgpu-d:triangle</pre>
-<h3>Cube</h3>
-<pre>dub run wgpu-d:cube</pre>
-<h2>Modules</h2>
diff --git a/views/nav.html b/views/nav.html
deleted file mode 100644
index bbc9850..0000000
--- a/views/nav.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<style>
-#main-nav > h1 {
-  display: flex;
-  align-items: flex-end;
-}
-#main-nav > h1 > span {
-  padding-bottom: 0.25em;
-}
-#logo {
-  margin-right: 0.5rem;
-  max-width: 4rem;
-}
-</style>
-<nav id="main-nav">
-  <h1>
-    <img id="logo" src="https://chances.github.io/wgpu-d/images/logo.png" alt="wgpu Logo">
-    <span>D Bindings</span>
-  </h1>
-  <ul style="list-style: none; padding: 0;">
-    <li>
-      <a href="https://chances.github.io/wgpu-d">API Reference</a>
-    </li>
-    <li>
-      <a href="https://code.dlang.org/packages/wgpu-d">Download</a>
-    </li>
-    <li>
-      <a href="https://github.com/chances/wgpu-d#readme">Open Source on GitHub</a>
-    </li>
-  </ul>
-  <h2>API Reference</h2>