diff --git a/examples/with-hyperapp/.babelrc b/examples/with-hyperapp/.babelrc
new file mode 100644
index 000000000..491157267
--- /dev/null
+++ b/examples/with-hyperapp/.babelrc
@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "razzle/babel"
+  ],
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "pragma": "h"
+      }
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/examples/with-hyperapp/.gitignore b/examples/with-hyperapp/.gitignore
new file mode 100644
index 000000000..52273a920
--- /dev/null
+++ b/examples/with-hyperapp/.gitignore
@@ -0,0 +1,13 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+public/static
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
\ No newline at end of file
diff --git a/examples/with-hyperapp/README.md b/examples/with-hyperapp/README.md
new file mode 100644
index 000000000..d108bc576
--- /dev/null
+++ b/examples/with-hyperapp/README.md
@@ -0,0 +1,30 @@
+# Razzle Hyperapp Example
+
+## How to use
+
+Download the example [or clone the whole project](https://github.com/jaredpalmer/razzle.git):
+
+```bash
+curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-hyperapp
+cd with-hyperapp
+```
+
+Install it and run:
+
+```bash
+yarn install
+yarn start
+```
+
+## Idea behind the example
+
+This shows how to setup [Hyperapp](https://github.com/hyperapp/hyperapp/) with Razzle.
+
+Here is a list of changes from Razzle's base template:
+
+1.  Install `babel-plugin-transform-react-jsx` as a devDependency.
+2.  Extend Razzle's babel config with a custom `.babelrc`
+3.  Install `hyperapp` and `"@hyperapp/render`
+4.  Remove `react`, `react-dom`, `react-router-dom` entirely
+5.  Update `server.js` to use `@hyperapp/render`'s `withRender` function. Also remove the `<div id="root">` element from our html template since Hyperapp can render to the body.
+6.  Add a `main.js` file which exports the essential pieces of Hyperapp, which are the `state`, `actions`, and `view`. These are to be shared between the `server.js` and `client.js` files.
diff --git a/examples/with-hyperapp/package.json b/examples/with-hyperapp/package.json
new file mode 100644
index 000000000..6dffa6f9c
--- /dev/null
+++ b/examples/with-hyperapp/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "razzle-examples-with-hyperapp",
+  "version": "2.0.0-alpha.7",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "@hyperapp/render": "^2.0.0",
+    "express": "^4.15.2",
+    "hyperapp": "^1.2.5"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-react-jsx": "^6.23.0",
+    "razzle": "^2.0.0-alpha.7"
+  }
+}
diff --git a/examples/with-hyperapp/public/favicon.ico b/examples/with-hyperapp/public/favicon.ico
new file mode 100644
index 000000000..46bceb8c7
Binary files /dev/null and b/examples/with-hyperapp/public/favicon.ico differ
diff --git a/examples/with-hyperapp/public/robots.txt b/examples/with-hyperapp/public/robots.txt
new file mode 100644
index 000000000..9ea8559a9
--- /dev/null
+++ b/examples/with-hyperapp/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /api/
+Disallow: /publicapi/
+Disallow: /query/
diff --git a/examples/with-hyperapp/src/App.css b/examples/with-hyperapp/src/App.css
new file mode 100644
index 000000000..03e310f56
--- /dev/null
+++ b/examples/with-hyperapp/src/App.css
@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
diff --git a/examples/with-hyperapp/src/App.js b/examples/with-hyperapp/src/App.js
new file mode 100644
index 000000000..0bbad782d
--- /dev/null
+++ b/examples/with-hyperapp/src/App.js
@@ -0,0 +1,18 @@
+/** @jsx h */
+import { h } from 'hyperapp';
+
+import HyperappLogo from './hyperapp.svg';
+import './App.css';
+
+const App = ({ state, actions }) => (
+  <div class="App">
+    <img src={HyperappLogo} alt="Hyperapp Logo" />
+    <p>Hello Hyperapp!</p>
+
+    <h3>Count is {state.count}</h3>
+
+    <button onclick={() => actions.up(1)}>up</button>
+    <button onclick={() => actions.down(1)}>down</button>
+  </div>
+);
+export default App;
diff --git a/examples/with-hyperapp/src/App.test.js b/examples/with-hyperapp/src/App.test.js
new file mode 100644
index 000000000..c8956a4cf
--- /dev/null
+++ b/examples/with-hyperapp/src/App.test.js
@@ -0,0 +1,13 @@
+/** @jsx h */
+import { h } from 'hyperapp';
+import { renderToString } from '@hyperapp/render';
+import App from './App';
+
+describe('<App />', () => {
+  test('renders without exploding', () => {
+    const body = document.createElement('body');
+    const markup = renderToString(<App state={{}} actions={{}} />);
+
+    expect(markup).toContain('App');
+  });
+});
diff --git a/examples/with-hyperapp/src/client.js b/examples/with-hyperapp/src/client.js
new file mode 100644
index 000000000..e7a994b90
--- /dev/null
+++ b/examples/with-hyperapp/src/client.js
@@ -0,0 +1,10 @@
+/** @jsx h */
+import { app } from 'hyperapp';
+
+import { state, actions, view } from './main';
+
+app(state, actions, view, document.body);
+
+if (module.hot) {
+  module.hot.accept();
+}
diff --git a/examples/with-hyperapp/src/hyperapp.svg b/examples/with-hyperapp/src/hyperapp.svg
new file mode 100644
index 000000000..6d2f52936
--- /dev/null
+++ b/examples/with-hyperapp/src/hyperapp.svg
@@ -0,0 +1 @@
+<svg height="217" preserveAspectRatio="xMidYMid" viewBox="0 0 256 217" width="256" xmlns="http://www.w3.org/2000/svg"><path d="m223.733134 43.3036863h-138.248736l15.762596-43.3036863h-46.0829117l-55.1640823 151.562447h46.081092l23.6434397-64.9550744h138.2450963l-7.880843 21.6513884h-115.0830618l-23.7035015 64.955074v.00091c-1.2876897 3.536369-1.94655 7.272035-1.94655 11.035911 0 17.700956 14.5659095 32.266866 32.2668657 32.266866h69.0611216l15.761686-43.303687h-69.061121l7.941815-21.651388h69.001059l-7.880843 21.651388h46.082912l31.524283-86.6064624v-.00091c1.28769-3.5363691 1.94655-7.2720344 1.94655-11.0359105 0-17.7009563-14.565909-32.2668658-32.266866-32.2668658z" fill="#00b0ff"/></svg>
\ No newline at end of file
diff --git a/examples/with-hyperapp/src/index.js b/examples/with-hyperapp/src/index.js
new file mode 100644
index 000000000..ed81f83d1
--- /dev/null
+++ b/examples/with-hyperapp/src/index.js
@@ -0,0 +1,21 @@
+import express from 'express';
+import app from './server';
+
+if (module.hot) {
+  module.hot.accept('./server', function() {
+    console.log('🔁  HMR Reloading `./server`...');
+  });
+  console.info('✅  Server-side HMR Enabled!');
+}
+
+const port = process.env.PORT || 3000;
+
+export default express()
+  .use((req, res) => app.handle(req, res))
+  .listen(port, function(err) {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    console.log(`> Started on port ${port}`);
+  });
diff --git a/examples/with-hyperapp/src/main.js b/examples/with-hyperapp/src/main.js
new file mode 100644
index 000000000..5faee3c92
--- /dev/null
+++ b/examples/with-hyperapp/src/main.js
@@ -0,0 +1,17 @@
+/** @jsx h */
+import { h } from 'hyperapp';
+import App from './App';
+
+/* MODEL */
+const state = { count: 0 };
+
+/* UPDATE */
+const actions = {
+  down: value => state => ({ count: state.count - value }),
+  up: value => state => ({ count: state.count + value }),
+};
+
+/* VIEW */
+const view = (state, actions) => <App state={state} actions={actions} />;
+
+export { state, actions, view };
diff --git a/examples/with-hyperapp/src/main.test.js b/examples/with-hyperapp/src/main.test.js
new file mode 100644
index 000000000..b24ec8bbe
--- /dev/null
+++ b/examples/with-hyperapp/src/main.test.js
@@ -0,0 +1,12 @@
+import { app } from 'hyperapp';
+import { withRender } from '@hyperapp/render';
+import { state, actions, view } from './main';
+
+describe('main app', () => {
+  test('renders without exploding', () => {
+    const body = document.createElement('body');
+    const markup = withRender(app)(state, actions, view, body).toString();
+
+    expect(markup).toContain('Hello Hyperapp');
+  });
+});
diff --git a/examples/with-hyperapp/src/server.js b/examples/with-hyperapp/src/server.js
new file mode 100644
index 000000000..78aa8a4e0
--- /dev/null
+++ b/examples/with-hyperapp/src/server.js
@@ -0,0 +1,43 @@
+/** @jsx h */
+import express from 'express';
+import { app } from 'hyperapp';
+import { withRender } from '@hyperapp/render';
+
+import { state, actions, view } from './main';
+
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+
+const server = express();
+server
+  .disable('x-powered-by')
+  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+  .get('/*', (req, res) => {
+    const markup = withRender(app)(state, actions, view).toString();
+
+    res.status(200).send(
+      `<!doctype html>
+    <html lang="">
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta charSet='utf-8' />
+        <title>Welcome to Razzle</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ''
+        }
+        ${
+          process.env.NODE_ENV === 'production'
+            ? `<script src="${assets.client.js}" defer></script>`
+            : `<script src="${assets.client.js}" defer crossorigin></script>`
+        }
+    </head>
+    <body>
+        ${markup}
+    </body>
+</html>`
+    );
+  });
+
+export default server;
diff --git a/examples/with-preact/src/server.js b/examples/with-preact/src/server.js
index 74fdfa311..00646a639 100644
--- a/examples/with-preact/src/server.js
+++ b/examples/with-preact/src/server.js
@@ -21,12 +21,16 @@ server
         <meta charSet='utf-8' />
         <title>Welcome to Razzle</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        ${assets.client.css
-          ? `<link rel="stylesheet" href="${assets.client.css}">`
-          : ''}
-        ${process.env.NODE_ENV === 'production'
-          ? `<script src="${assets.client.js}" defer></script>`
-          : `<script src="${assets.client.js}" defer crossorigin></script>`}
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ''
+        }
+        ${
+          process.env.NODE_ENV === 'production'
+            ? `<script src="${assets.client.js}" defer></script>`
+            : `<script src="${assets.client.js}" defer crossorigin></script>`
+        }
     </head>
     <body>
         ${markup}