diff --git a/.gitignore b/.gitignore
index 9001a8f5..167255b2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 /font-renderer/target
 /partitioner/target
 /demo/client/target
+/demo/client/*.html
 /demo/client/*.js
 /demo/client/src/*.js
 /demo/client/src/*.js.map
diff --git a/demo/client/html/include/header.html b/demo/client/html/include/header.html
new file mode 100644
index 00000000..6781fc46
--- /dev/null
+++ b/demo/client/html/include/header.html
@@ -0,0 +1,5 @@
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
+<link rel="stylesheet" href="/css/pathfinder.css">
+<script type="text/javascript" src="js/jquery/jquery.js"></script>
+<script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
diff --git a/demo/client/html/include/navbar.html b/demo/client/html/include/navbar.html
new file mode 100644
index 00000000..7891ddb7
--- /dev/null
+++ b/demo/client/html/include/navbar.html
@@ -0,0 +1,15 @@
+<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
+    <a class="navbar-brand" href="#">Pathfinder</a>
+    <div class="collapse navbar-collapse">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item dropdown active">
+                <a class="nav-link dropdown-toggle" id="pf-demos-menu" data-toggle="dropdown"
+                 ref="/" aria-haspopup="true" aria-expanded="false">Demos</a>
+                <div class="dropdown-menu" aria-labelledby="pf-demos-menu">
+                    <a class="dropdown-item" href="/">Text</a>
+                    <a class="dropdown-item" href="/svg">SVG</a>
+                </div>
+            </li>
+        </ul>
+    </div>
+</nav>
diff --git a/demo/client/html/svg.html b/demo/client/html/svg.html
index 8cc6d040..47780448 100644
--- a/demo/client/html/svg.html
+++ b/demo/client/html/svg.html
@@ -3,30 +3,11 @@
     <head>
         <title>SVG &mdash; Pathfinder Demo</title>
         <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
-        <link rel="stylesheet" href="/css/pathfinder.css">
-        <script type="text/javascript" src="js/jquery/jquery.js"></script>
-        <script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
+        ${require('./include/header.html')}
         <script type="text/javascript" src="js/pathfinder/svg.js"></script>
     </head>
     <body>
-        <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
-            <a class="navbar-brand" href="#">Pathfinder</a>
-            <div class="collapse navbar-collapse">
-                <ul class="navbar-nav mr-auto">
-                    <li class="nav-item dropdown active">
-                        <a class="nav-link dropdown-toggle" id="pf-demos-menu"
-                         data-toggle="dropdown" ref="/" aria-haspopup="true"
-                         aria-expanded="false">Demos</a>
-                        <div class="dropdown-menu" aria-labelledby="pf-demos-menu">
-                            <a class="dropdown-item" href="/">Text</a>
-                            <a class="dropdown-item" href="/svg">SVG</a>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </nav>
+        ${require('./include/navbar.html')}
         <div class="rounded py-1 px-3" id="pf-fps-label">0 ms</div>
         <canvas id="pf-canvas" width="400" height="300"></canvas>
         <svg id="pf-svg" xmlns="http://www.w3.org/2000/svg" width="400" height="300"></svg>
diff --git a/demo/client/html/text.html b/demo/client/html/text.html
index 94324cd4..30c9a6c9 100644
--- a/demo/client/html/text.html
+++ b/demo/client/html/text.html
@@ -3,30 +3,11 @@
     <head>
         <title>Text &mdash; Pathfinder Demo</title>
         <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
-        <link rel="stylesheet" href="/css/pathfinder.css">
-        <script type="text/javascript" src="js/jquery/jquery.js"></script>
-        <script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
+        ${require('./include/header.html')}
         <script type="text/javascript" src="js/pathfinder/text.js"></script>
     </head>
     <body>
-        <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
-            <a class="navbar-brand" href="#">Pathfinder</a>
-            <div class="collapse navbar-collapse">
-                <ul class="navbar-nav mr-auto">
-                    <li class="nav-item dropdown active">
-                        <a class="nav-link dropdown-toggle" id="pf-demos-menu"
-                         data-toggle="dropdown" ref="/" aria-haspopup="true"
-                         aria-expanded="false">Demos</a>
-                        <div class="dropdown-menu" aria-labelledby="pf-demos-menu">
-                            <a class="dropdown-item" href="/">Text</a>
-                            <a class="dropdown-item" href="/svg">SVG</a>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </nav>
+        ${require('./include/navbar.html')}
         <div class="rounded py-1 px-3" id="pf-fps-label">0 ms</div>
         <canvas id="pf-canvas" width="400" height="300"></canvas>
         <label class="btn btn-secondary btn-file pf-bottom-control" id="pf-load-font-button-label">
diff --git a/demo/client/package.json b/demo/client/package.json
index 6f21f879..02f32f10 100644
--- a/demo/client/package.json
+++ b/demo/client/package.json
@@ -16,7 +16,10 @@
     "@types/opentype.js": "0.0.0",
     "base64-js": "^1.2.1",
     "bootstrap": "^4.0.0-alpha.6",
+    "extract-loader": "^1.0.1",
+    "file-loader": "^0.11.2",
     "gl-matrix": "^2.4.0",
+    "html-loader": "^0.5.1",
     "lodash": "^4.17.4",
     "opentype.js": "^0.7.3",
     "parse-color": "^1.0.0",
diff --git a/demo/client/src/svg.ts b/demo/client/src/svg.ts
index 3e1cfcdb..d7b1b0d4 100644
--- a/demo/client/src/svg.ts
+++ b/demo/client/src/svg.ts
@@ -21,6 +21,8 @@ import {PathfinderView, Timings} from './view';
 import AppController from './app-controller';
 import SSAAStrategy from "./ssaa-strategy";
 
+require('../html/svg.html');
+
 const parseColor = require('parse-color');
 
 const SVG_NS: string = "http://www.w3.org/2000/svg";
diff --git a/demo/client/src/text.ts b/demo/client/src/text.ts
index 5e9f2601..562f2342 100644
--- a/demo/client/src/text.ts
+++ b/demo/client/src/text.ts
@@ -26,6 +26,8 @@ import AppController from './app-controller';
 import PathfinderBufferTexture from './buffer-texture';
 import SSAAStrategy from './ssaa-strategy';
 
+require('../html/text.html');
+
 const TEXT: string =
 `’Twas brillig, and the slithy toves
 Did gyre and gimble in the wabe;
diff --git a/demo/client/webpack.config.js b/demo/client/webpack.config.js
index 3f6a0acd..97cdb7e7 100644
--- a/demo/client/webpack.config.js
+++ b/demo/client/webpack.config.js
@@ -1,3 +1,5 @@
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
 module.exports = {
     devtool: 'inline-source-map',
     entry: {
@@ -10,11 +12,40 @@ module.exports = {
                 test: /\.tsx?$/,
                 use: 'ts-loader',
                 exclude: /node_modules/,
-            }
+            },
+            {
+                test: /html\/[a-zA-Z0-9_-]+\.html$/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: "[name].html",
+                        },
+                    },
+                    'extract-loader',
+                    {
+                        loader: 'html-loader',
+                        options: {
+                            interpolate: true,
+                        },
+                    },
+                ],
+            },
+            {
+                test: /html\/include\/[a-zA-Z0-9_-]+\.html$/,
+                use: [
+                    {
+                        loader: 'html-loader',
+                        options: {
+                            interpolate: true,
+                        },
+                    },
+                ],
+            },
         ]
     },
     resolve: {
-        extensions: [".tsx", ".ts", ".js"],
+        extensions: [".tsx", ".ts", ".html", ".js"],
     },
     output: {
         filename: "[name].js",
diff --git a/demo/server/src/main.rs b/demo/server/src/main.rs
index c53b0490..f120e9bb 100644
--- a/demo/server/src/main.rs
+++ b/demo/server/src/main.rs
@@ -38,8 +38,8 @@ use std::mem;
 use std::path::{Path, PathBuf};
 use std::u32;
 
-static STATIC_TEXT_DEMO_PATH: &'static str = "../client/html/text.html";
-static STATIC_SVG_DEMO_PATH: &'static str = "../client/html/svg.html";
+static STATIC_TEXT_DEMO_PATH: &'static str = "../client/text.html";
+static STATIC_SVG_DEMO_PATH: &'static str = "../client/svg.html";
 static STATIC_CSS_BOOTSTRAP_PATH: &'static str = "../client/node_modules/bootstrap/dist/css";
 static STATIC_CSS_PATHFINDER_PATH: &'static str = "../client/css/pathfinder.css";
 static STATIC_JS_BOOTSTRAP_PATH: &'static str = "../client/node_modules/bootstrap/dist/js";
