diff --git a/site/content/examples/7guis-circles/App.html b/site/content/examples/7guis-circles/App.svelte
similarity index 100%
rename from site/content/examples/7guis-circles/App.html
rename to site/content/examples/7guis-circles/App.svelte
diff --git a/site/content/examples/7guis-counter/App.html b/site/content/examples/7guis-counter/App.svelte
similarity index 100%
rename from site/content/examples/7guis-counter/App.html
rename to site/content/examples/7guis-counter/App.svelte
diff --git a/site/content/examples/7guis-crud/App.html b/site/content/examples/7guis-crud/App.svelte
similarity index 100%
rename from site/content/examples/7guis-crud/App.html
rename to site/content/examples/7guis-crud/App.svelte
diff --git a/site/content/examples/7guis-flight-booker/App.html b/site/content/examples/7guis-flight-booker/App.svelte
similarity index 100%
rename from site/content/examples/7guis-flight-booker/App.html
rename to site/content/examples/7guis-flight-booker/App.svelte
diff --git a/site/content/examples/7guis-temperature/App.html b/site/content/examples/7guis-temperature/App.svelte
similarity index 100%
rename from site/content/examples/7guis-temperature/App.html
rename to site/content/examples/7guis-temperature/App.svelte
diff --git a/site/content/examples/7guis-timer/App.html b/site/content/examples/7guis-timer/App.svelte
similarity index 100%
rename from site/content/examples/7guis-timer/App.html
rename to site/content/examples/7guis-timer/App.svelte
diff --git a/site/content/examples/await-block/App.html b/site/content/examples/await-block/App.svelte
similarity index 100%
rename from site/content/examples/await-block/App.html
rename to site/content/examples/await-block/App.svelte
diff --git a/site/content/examples/bar-chart/App.html b/site/content/examples/bar-chart/App.svelte
similarity index 100%
rename from site/content/examples/bar-chart/App.html
rename to site/content/examples/bar-chart/App.svelte
diff --git a/site/content/examples/binding-input-checkbox-group/App.html b/site/content/examples/binding-input-checkbox-group/App.svelte
similarity index 100%
rename from site/content/examples/binding-input-checkbox-group/App.html
rename to site/content/examples/binding-input-checkbox-group/App.svelte
diff --git a/site/content/examples/binding-input-checkbox/App.html b/site/content/examples/binding-input-checkbox/App.svelte
similarity index 100%
rename from site/content/examples/binding-input-checkbox/App.html
rename to site/content/examples/binding-input-checkbox/App.svelte
diff --git a/site/content/examples/binding-input-numeric/App.html b/site/content/examples/binding-input-numeric/App.svelte
similarity index 100%
rename from site/content/examples/binding-input-numeric/App.html
rename to site/content/examples/binding-input-numeric/App.svelte
diff --git a/site/content/examples/binding-input-radio/App.html b/site/content/examples/binding-input-radio/App.svelte
similarity index 100%
rename from site/content/examples/binding-input-radio/App.html
rename to site/content/examples/binding-input-radio/App.svelte
diff --git a/site/content/examples/binding-input-text/App.html b/site/content/examples/binding-input-text/App.svelte
similarity index 100%
rename from site/content/examples/binding-input-text/App.html
rename to site/content/examples/binding-input-text/App.svelte
diff --git a/site/content/examples/binding-media-elements/App.html b/site/content/examples/binding-media-elements/App.svelte
similarity index 100%
rename from site/content/examples/binding-media-elements/App.html
rename to site/content/examples/binding-media-elements/App.svelte
diff --git a/site/content/examples/binding-textarea/App.html b/site/content/examples/binding-textarea/App.svelte
similarity index 100%
rename from site/content/examples/binding-textarea/App.html
rename to site/content/examples/binding-textarea/App.svelte
diff --git a/site/content/examples/each-blocks/App.html b/site/content/examples/each-blocks/App.svelte
similarity index 100%
rename from site/content/examples/each-blocks/App.html
rename to site/content/examples/each-blocks/App.svelte
diff --git a/site/content/examples/hacker-news/App.html b/site/content/examples/hacker-news/App.svelte
similarity index 92%
rename from site/content/examples/hacker-news/App.html
rename to site/content/examples/hacker-news/App.svelte
index 2f8283fdf2..68ba61d6dc 100644
--- a/site/content/examples/hacker-news/App.html
+++ b/site/content/examples/hacker-news/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
-	import List from './List.html';
-	import Item from './Item.html';
+	import List from './List.svelte';
+	import Item from './Item.svelte';
 
 	let item;
 	let page;
diff --git a/site/content/examples/hacker-news/Comment.html b/site/content/examples/hacker-news/Comment.svelte
similarity index 100%
rename from site/content/examples/hacker-news/Comment.html
rename to site/content/examples/hacker-news/Comment.svelte
diff --git a/site/content/examples/hacker-news/Item.html b/site/content/examples/hacker-news/Item.svelte
similarity index 100%
rename from site/content/examples/hacker-news/Item.html
rename to site/content/examples/hacker-news/Item.svelte
diff --git a/site/content/examples/hacker-news/List.html b/site/content/examples/hacker-news/List.svelte
similarity index 100%
rename from site/content/examples/hacker-news/List.html
rename to site/content/examples/hacker-news/List.svelte
diff --git a/site/content/examples/hacker-news/Summary.html b/site/content/examples/hacker-news/Summary.svelte
similarity index 100%
rename from site/content/examples/hacker-news/Summary.html
rename to site/content/examples/hacker-news/Summary.svelte
diff --git a/site/content/examples/hello-world/App.html b/site/content/examples/hello-world/App.svelte
similarity index 100%
rename from site/content/examples/hello-world/App.html
rename to site/content/examples/hello-world/App.svelte
diff --git a/site/content/examples/homepage-demo-hello-world/App.html b/site/content/examples/homepage-demo-hello-world/App.svelte
similarity index 100%
rename from site/content/examples/homepage-demo-hello-world/App.html
rename to site/content/examples/homepage-demo-hello-world/App.svelte
diff --git a/site/content/examples/homepage-demo-reactivity/App.html b/site/content/examples/homepage-demo-reactivity/App.svelte
similarity index 100%
rename from site/content/examples/homepage-demo-reactivity/App.html
rename to site/content/examples/homepage-demo-reactivity/App.svelte
diff --git a/site/content/examples/homepage-demo-scoped-styles/App.html b/site/content/examples/homepage-demo-scoped-styles/App.svelte
similarity index 73%
rename from site/content/examples/homepage-demo-scoped-styles/App.html
rename to site/content/examples/homepage-demo-scoped-styles/App.svelte
index 7a372268d1..b1fe0495a9 100644
--- a/site/content/examples/homepage-demo-scoped-styles/App.html
+++ b/site/content/examples/homepage-demo-scoped-styles/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Foo from './Foo.html';
+	import Foo from './Foo.svelte';
 </script>
 
 <style>
diff --git a/site/content/examples/homepage-demo-scoped-styles/Foo.html b/site/content/examples/homepage-demo-scoped-styles/Foo.svelte
similarity index 100%
rename from site/content/examples/homepage-demo-scoped-styles/Foo.html
rename to site/content/examples/homepage-demo-scoped-styles/Foo.svelte
diff --git a/site/content/examples/homepage-demo-transitions/App.html b/site/content/examples/homepage-demo-transitions/App.svelte
similarity index 100%
rename from site/content/examples/homepage-demo-transitions/App.html
rename to site/content/examples/homepage-demo-transitions/App.svelte
diff --git a/site/content/examples/if-blocks/App.html b/site/content/examples/if-blocks/App.svelte
similarity index 100%
rename from site/content/examples/if-blocks/App.html
rename to site/content/examples/if-blocks/App.svelte
diff --git a/site/content/examples/immutable/App.html b/site/content/examples/immutable/App.svelte
similarity index 86%
rename from site/content/examples/immutable/App.html
rename to site/content/examples/immutable/App.svelte
index b5d78a165a..8cfc14aacb 100644
--- a/site/content/examples/immutable/App.html
+++ b/site/content/examples/immutable/App.svelte
@@ -1,8 +1,8 @@
 <svelte:options immutable/>
 
 <script>
-	import ImmutableTodo from './ImmutableTodo.html';
-	import MutableTodo from './MutableTodo.html';
+	import ImmutableTodo from './ImmutableTodo.svelte';
+	import MutableTodo from './MutableTodo.svelte';
 
 	export let todos;
 
diff --git a/site/content/examples/immutable/ImmutableTodo.html b/site/content/examples/immutable/ImmutableTodo.svelte
similarity index 100%
rename from site/content/examples/immutable/ImmutableTodo.html
rename to site/content/examples/immutable/ImmutableTodo.svelte
diff --git a/site/content/examples/immutable/MutableTodo.html b/site/content/examples/immutable/MutableTodo.svelte
similarity index 100%
rename from site/content/examples/immutable/MutableTodo.html
rename to site/content/examples/immutable/MutableTodo.svelte
diff --git a/site/content/examples/line-chart/App.html b/site/content/examples/line-chart/App.svelte
similarity index 100%
rename from site/content/examples/line-chart/App.html
rename to site/content/examples/line-chart/App.svelte
diff --git a/site/content/examples/modal-with-slot/App.html b/site/content/examples/modal-with-slot/App.svelte
similarity index 95%
rename from site/content/examples/modal-with-slot/App.html
rename to site/content/examples/modal-with-slot/App.svelte
index 621dfdd203..665a89554e 100644
--- a/site/content/examples/modal-with-slot/App.html
+++ b/site/content/examples/modal-with-slot/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Modal from './Modal.html';
+	import Modal from './Modal.svelte';
 
 	export let showModal;
 </script>
diff --git a/site/content/examples/modal-with-slot/Modal.html b/site/content/examples/modal-with-slot/Modal.svelte
similarity index 100%
rename from site/content/examples/modal-with-slot/Modal.html
rename to site/content/examples/modal-with-slot/Modal.svelte
diff --git a/site/content/examples/motion-spring/App.html b/site/content/examples/motion-spring/App.svelte
similarity index 100%
rename from site/content/examples/motion-spring/App.html
rename to site/content/examples/motion-spring/App.svelte
diff --git a/site/content/examples/nested-components/App.html b/site/content/examples/nested-components/App.svelte
similarity index 53%
rename from site/content/examples/nested-components/App.html
rename to site/content/examples/nested-components/App.svelte
index a00cb18a41..83cc0c6eb5 100644
--- a/site/content/examples/nested-components/App.html
+++ b/site/content/examples/nested-components/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Nested from './Nested.html';
+	import Nested from './Nested.svelte';
 </script>
 
 <p>This is a top-level element.</p>
diff --git a/site/content/examples/nested-components/Nested.html b/site/content/examples/nested-components/Nested.svelte
similarity index 100%
rename from site/content/examples/nested-components/Nested.html
rename to site/content/examples/nested-components/Nested.svelte
diff --git a/site/content/examples/parallax/App.html b/site/content/examples/parallax/App.svelte
similarity index 100%
rename from site/content/examples/parallax/App.html
rename to site/content/examples/parallax/App.svelte
diff --git a/site/content/examples/scatterplot/App.html b/site/content/examples/scatterplot/App.svelte
similarity index 87%
rename from site/content/examples/scatterplot/App.html
rename to site/content/examples/scatterplot/App.svelte
index e45d6f8f7f..8e88532ab5 100644
--- a/site/content/examples/scatterplot/App.html
+++ b/site/content/examples/scatterplot/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Scatterplot from './Scatterplot.html';
+	import Scatterplot from './Scatterplot.svelte';
 
 	export let a;
 	export let b;
diff --git a/site/content/examples/scatterplot/Scatterplot.html b/site/content/examples/scatterplot/Scatterplot.svelte
similarity index 100%
rename from site/content/examples/scatterplot/Scatterplot.html
rename to site/content/examples/scatterplot/Scatterplot.svelte
diff --git a/site/content/examples/scoped-styles/App.html b/site/content/examples/scoped-styles/App.svelte
similarity index 100%
rename from site/content/examples/scoped-styles/App.html
rename to site/content/examples/scoped-styles/App.svelte
diff --git a/site/content/examples/self-references/App.html b/site/content/examples/self-references/App.svelte
similarity index 100%
rename from site/content/examples/self-references/App.html
rename to site/content/examples/self-references/App.svelte
diff --git a/site/content/examples/svg-clock/App.html b/site/content/examples/svg-clock/App.svelte
similarity index 100%
rename from site/content/examples/svg-clock/App.html
rename to site/content/examples/svg-clock/App.svelte
diff --git a/site/content/examples/transitions-custom/App.html b/site/content/examples/transitions-custom/App.svelte
similarity index 100%
rename from site/content/examples/transitions-custom/App.html
rename to site/content/examples/transitions-custom/App.svelte
diff --git a/site/content/examples/transitions-fade/App.html b/site/content/examples/transitions-fade/App.svelte
similarity index 100%
rename from site/content/examples/transitions-fade/App.html
rename to site/content/examples/transitions-fade/App.svelte
diff --git a/site/content/examples/transitions-fly/App.html b/site/content/examples/transitions-fly/App.svelte
similarity index 100%
rename from site/content/examples/transitions-fly/App.html
rename to site/content/examples/transitions-fly/App.svelte
diff --git a/site/content/examples/transitions-in-out/App.html b/site/content/examples/transitions-in-out/App.svelte
similarity index 100%
rename from site/content/examples/transitions-in-out/App.html
rename to site/content/examples/transitions-in-out/App.svelte
diff --git a/site/package-lock.json b/site/package-lock.json
index 796100e415..03fc1502d1 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -4255,9 +4255,9 @@
       }
     },
     "sapper": {
-      "version": "0.26.0-alpha.5",
-      "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.5.tgz",
-      "integrity": "sha512-BpPfj4XzwHzRiY02haE0f/gxl7+p48CKrSsHYrsrkOgtVjjQ6VSuYIYZdgWlXHUeLEQQxxPVEQ+O+oPVtNJxGg==",
+      "version": "0.26.0-alpha.7",
+      "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.7.tgz",
+      "integrity": "sha512-r89JjBMGv5f5641yklK6qwwJ2ZMRUQiOX7EaWRpBEW66UHFHPXXygSvYsa+Se9LbLF626NDh2EDbCPyjIaMSvw==",
       "dev": true,
       "requires": {
         "html-minifier": "^3.5.21",
diff --git a/site/package.json b/site/package.json
index e636f0d88a..dfd0a85d3b 100644
--- a/site/package.json
+++ b/site/package.json
@@ -52,7 +52,7 @@
     "rollup-plugin-replace": "^2.1.0",
     "rollup-plugin-svelte": "^5.0.1",
     "rollup-plugin-terser": "^4.0.4",
-    "sapper": "^0.26.0-alpha.5",
+    "sapper": "^0.26.0-alpha.7",
     "svelte": "^3.0.0-beta.3"
   }
 }
diff --git a/site/src/components/Icon.html b/site/src/components/Icon.svelte
similarity index 100%
rename from site/src/components/Icon.html
rename to site/src/components/Icon.svelte
diff --git a/site/src/components/InlineSvg.html b/site/src/components/InlineSvg.svelte
similarity index 100%
rename from site/src/components/InlineSvg.html
rename to site/src/components/InlineSvg.svelte
diff --git a/site/src/components/Logo.html b/site/src/components/Logo.svelte
similarity index 100%
rename from site/src/components/Logo.html
rename to site/src/components/Logo.svelte
diff --git a/site/src/components/TopNav.html b/site/src/components/TopNav.svelte
similarity index 98%
rename from site/src/components/TopNav.html
rename to site/src/components/TopNav.svelte
index 831ca598fd..c9945b912b 100644
--- a/site/src/components/TopNav.html
+++ b/site/src/components/TopNav.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
-	import Icon from './Icon.html';
-	import Logo from './Logo.html';
+	import Icon from './Icon.svelte';
+	import Logo from './Logo.svelte';
 
 	export let segment;
 
diff --git a/site/src/routes/_error.html b/site/src/routes/_error.svelte
similarity index 100%
rename from site/src/routes/_error.html
rename to site/src/routes/_error.svelte
diff --git a/site/src/routes/_layout.html b/site/src/routes/_layout.svelte
similarity index 76%
rename from site/src/routes/_layout.html
rename to site/src/routes/_layout.svelte
index 4093237670..b9cc668e95 100644
--- a/site/src/routes/_layout.html
+++ b/site/src/routes/_layout.svelte
@@ -1,6 +1,6 @@
 <script>
-	import InlineSvg from '../components/InlineSvg.html';
-	import Nav from '../components/TopNav.html';
+	import InlineSvg from '../components/InlineSvg.svelte';
+	import Nav from '../components/TopNav.svelte';
 
 	export let child;
 	export let path;
diff --git a/site/src/routes/about.html b/site/src/routes/about.svelte
similarity index 100%
rename from site/src/routes/about.html
rename to site/src/routes/about.svelte
diff --git a/site/src/routes/api/examples/[slug].js b/site/src/routes/api/examples/[slug].js
index 221475b6b2..03bf723766 100644
--- a/site/src/routes/api/examples/[slug].js
+++ b/site/src/routes/api/examples/[slug].js
@@ -19,7 +19,7 @@ function createExample(slug) {
 	const components = files
 		.map(file => {
 			const ext = path.extname(file);
-			if (ext !== '.html' && ext !== '.js') return null;
+			if (ext !== '.svelte' && ext !== '.js') return null;
 
 			const source = fs.readFileSync(`content/examples/${slug}/${file}`, 'utf-8');
 
@@ -31,10 +31,10 @@ function createExample(slug) {
 		})
 		.filter(Boolean)
 		.sort((a, b) => {
-			if (a.name === 'App' && a.type === 'html') return -1;
-			if (b.name === 'App' && b.type === 'html') return 1;
+			if (a.name === 'App' && a.type === 'svelte') return -1;
+			if (b.name === 'App' && b.type === 'svelte') return 1;
 
-			if (a.type !== b.type) return a.type === 'html' ? -1 : 1;
+			if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
 
 			return a.name < b.name ? -1 : 1;
 		});
diff --git a/site/src/routes/blog/[slug].html b/site/src/routes/blog/[slug].svelte
similarity index 100%
rename from site/src/routes/blog/[slug].html
rename to site/src/routes/blog/[slug].svelte
diff --git a/site/src/routes/blog/index.html b/site/src/routes/blog/index.svelte
similarity index 100%
rename from site/src/routes/blog/index.html
rename to site/src/routes/blog/index.svelte
diff --git a/site/src/routes/gist/[id].js b/site/src/routes/gist/[id].js
index e20acac018..a03302fb8d 100644
--- a/site/src/routes/gist/[id].js
+++ b/site/src/routes/gist/[id].js
@@ -5,7 +5,7 @@ export async function get(req, res) {
 	const { id } = req.params;
 
 	const headers = {};
-	const user = req.session.passport && req.session.passport.user;
+	const user = req.session && req.session.passport && req.session.passport.user;
 	if (user) {
 		headers.Authorization = `token ${user.token}`;
 	}
@@ -34,7 +34,7 @@ export async function get(req, res) {
 }
 
 export async function patch(req, res) {
-	const user = req.session.passport && req.session.passport.user;
+	const user = req.session && req.session.passport && req.session.passport.user;
 
 	if (!user) {
 		res.writeHead(403, {
diff --git a/site/src/routes/guide/_GuideContents.html b/site/src/routes/guide/_GuideContents.svelte
similarity index 98%
rename from site/src/routes/guide/_GuideContents.html
rename to site/src/routes/guide/_GuideContents.svelte
index ff6fa60813..4c703f6af1 100644
--- a/site/src/routes/guide/_GuideContents.html
+++ b/site/src/routes/guide/_GuideContents.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount, afterUpdate } from 'svelte';
-	import Icon from '../../components/Icon.html';
+	import Icon from '../../components/Icon.svelte';
 
 	export let sections = [];
 	export let active_section = null;
diff --git a/site/src/routes/guide/_sections.js b/site/src/routes/guide/_sections.js
index 6b282115d3..59818bc464 100644
--- a/site/src/routes/guide/_sections.js
+++ b/site/src/routes/guide/_sections.js
@@ -113,7 +113,7 @@ export default function() {
 
 				if (meta) {
 					source = lines.slice(1).join('\n');
-					const filename = meta.filename || (lang === 'html' && 'App.html');
+					const filename = meta.filename || (lang === 'html' && 'App.svelte');
 					if (filename) {
 						prefix = `<span class='filename'>${prefix} ${filename}</span>`;
 						className += ' named';
diff --git a/site/src/routes/guide/index.html b/site/src/routes/guide/index.svelte
similarity index 98%
rename from site/src/routes/guide/index.html
rename to site/src/routes/guide/index.svelte
index f448be7c8b..3f4731cc11 100644
--- a/site/src/routes/guide/index.html
+++ b/site/src/routes/guide/index.svelte
@@ -7,8 +7,8 @@
 
 <script>
 	import { onMount, afterUpdate } from 'svelte';
-	import GuideContents from './_GuideContents.html';
-	import Icon from '../../components/Icon.html';
+	import GuideContents from './_GuideContents.svelte';
+	import Icon from '../../components/Icon.svelte';
 
 	export let sections;
 	let active_section;
diff --git a/site/src/routes/index.html b/site/src/routes/index.svelte
similarity index 98%
rename from site/src/routes/index.html
rename to site/src/routes/index.svelte
index 94f0f07147..75488610a6 100644
--- a/site/src/routes/index.html
+++ b/site/src/routes/index.svelte
@@ -1,6 +1,6 @@
 <script>
-	import Icon from '../components/Icon.html';
-	import Logo from '../components/Logo.html';
+	import Icon from '../components/Icon.svelte';
+	import Logo from '../components/Logo.svelte';
 	import contributors from './_contributors.js';
 
 	let sy = 0;
diff --git a/site/src/routes/repl/_components/AppControls/UserMenu.html b/site/src/routes/repl/_components/AppControls/UserMenu.svelte
similarity index 100%
rename from site/src/routes/repl/_components/AppControls/UserMenu.html
rename to site/src/routes/repl/_components/AppControls/UserMenu.svelte
diff --git a/site/src/routes/repl/_components/AppControls/index.html b/site/src/routes/repl/_components/AppControls/index.svelte
similarity index 96%
rename from site/src/routes/repl/_components/AppControls/index.html
rename to site/src/routes/repl/_components/AppControls/index.svelte
index 918dbd8e57..af4a0cf2e8 100644
--- a/site/src/routes/repl/_components/AppControls/index.html
+++ b/site/src/routes/repl/_components/AppControls/index.svelte
@@ -1,8 +1,8 @@
 <script>
 	import * as fleece from 'golden-fleece';
 	import { createEventDispatcher } from 'svelte';
-	import UserMenu from './UserMenu.html';
-	import Icon from '../../../../components/Icon.html';
+	import UserMenu from './UserMenu.svelte';
+	import Icon from '../../../../components/Icon.svelte';
 	import * as doNotZip from 'do-not-zip';
 	import downloadBlob from '../../_utils/downloadBlob.js';
 	import { user } from '../../../../user.js';
@@ -115,7 +115,7 @@
 			// null out any deleted files
 			const set = new Set(components.map(m => `${m.name}.${m.type}`));
 			Object.keys(gist.files).forEach(file => {
-				if (/\.(html|js)$/.test(file)) {
+				if (/\.(svelte|html|js)$/.test(file)) {
 					if (!set.has(file)) files[file] = null;
 				}
 			});
@@ -126,7 +126,7 @@
 					throw new Error(`GitHub does not allow saving gists with empty files - ${file}`);
 				}
 
-				if (!gist.files[files] || module.source !== gist.files[file].content) {
+				if (!gist.files[file] || module.source !== gist.files[file].content) {
 					files[file] = { content: module.source };
 				}
 			});
@@ -189,7 +189,7 @@
 
 		files.push(...components.map(component => ({ path: `src/${component.name}.${component.type}`, data: component.source })));
 		files.push({
-			path: `src/main.js`, data: `import App from './App.html';
+			path: `src/main.js`, data: `import App from './App.svelte';
 
 var app = new App({
 	target: document.body,
diff --git a/site/src/routes/repl/_components/CodeMirror.html b/site/src/routes/repl/_components/CodeMirror.svelte
similarity index 100%
rename from site/src/routes/repl/_components/CodeMirror.html
rename to site/src/routes/repl/_components/CodeMirror.svelte
diff --git a/site/src/routes/repl/_components/Input/ComponentSelector.html b/site/src/routes/repl/_components/Input/ComponentSelector.svelte
similarity index 96%
rename from site/src/routes/repl/_components/Input/ComponentSelector.html
rename to site/src/routes/repl/_components/Input/ComponentSelector.svelte
index e05c58e602..bde0a280e5 100644
--- a/site/src/routes/repl/_components/Input/ComponentSelector.html
+++ b/site/src/routes/repl/_components/Input/ComponentSelector.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import Icon from '../../../../components/Icon.html';
+	import Icon from '../../../../components/Icon.svelte';
 	import { enter } from '../events.js';
 
 	const dispatch = createEventDispatcher();
@@ -25,7 +25,7 @@
 	}
 
 	function closeEdit() {
-		const match = /(.+)\.(html|js)$/.exec($selected_store.name);
+		const match = /(.+)\.(svelte|js)$/.exec($selected_store.name);
 		$selected_store.name = match ? match[1] : $selected_store.name;
 		if (match && match[2]) $selected_store.type = match[2];
 		editing = null;
@@ -49,7 +49,7 @@
 	function addNew() {
 		const component = {
 			name: uid++ ? `Component${uid}` : 'Component1',
-			type: 'html',
+			type: 'svelte',
 			source: ''
 		};
 
@@ -181,7 +181,7 @@
 			>
 				{#if component.name == 'App'}
 					<div class="uneditable">
-						App.html
+						App.svelte
 					</div>
 				{:else}
 					{#if component === editing}
diff --git a/site/src/routes/repl/_components/Input/ModuleEditor.html b/site/src/routes/repl/_components/Input/ModuleEditor.svelte
similarity index 91%
rename from site/src/routes/repl/_components/Input/ModuleEditor.html
rename to site/src/routes/repl/_components/Input/ModuleEditor.svelte
index c45c86202b..1b72f3aa31 100644
--- a/site/src/routes/repl/_components/Input/ModuleEditor.html
+++ b/site/src/routes/repl/_components/Input/ModuleEditor.svelte
@@ -1,5 +1,5 @@
 <script>
-	import CodeMirror from '../CodeMirror.html';
+	import CodeMirror from '../CodeMirror.svelte';
 
 	export let component;
 	export let error;
diff --git a/site/src/routes/repl/_components/Input/index.html b/site/src/routes/repl/_components/Input/index.svelte
similarity index 77%
rename from site/src/routes/repl/_components/Input/index.html
rename to site/src/routes/repl/_components/Input/index.svelte
index 50460af098..d858257b3d 100644
--- a/site/src/routes/repl/_components/Input/index.html
+++ b/site/src/routes/repl/_components/Input/index.svelte
@@ -1,6 +1,6 @@
 <script>
-	import ComponentSelector from './ComponentSelector.html';
-	import ModuleEditor from './ModuleEditor.html';
+	import ComponentSelector from './ComponentSelector.svelte';
+	import ModuleEditor from './ModuleEditor.svelte';
 
 	export let component_store;
 	export let selected_store;
diff --git a/site/src/routes/repl/_components/InputOutputToggle.html b/site/src/routes/repl/_components/InputOutputToggle.svelte
similarity index 100%
rename from site/src/routes/repl/_components/InputOutputToggle.html
rename to site/src/routes/repl/_components/InputOutputToggle.svelte
diff --git a/site/src/routes/repl/_components/Output/CompilerOptions.html b/site/src/routes/repl/_components/Output/CompilerOptions.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Output/CompilerOptions.html
rename to site/src/routes/repl/_components/Output/CompilerOptions.svelte
diff --git a/site/src/routes/repl/_components/Output/PropEditor.html b/site/src/routes/repl/_components/Output/PropEditor.svelte
similarity index 95%
rename from site/src/routes/repl/_components/Output/PropEditor.html
rename to site/src/routes/repl/_components/Output/PropEditor.svelte
index a14fb0b94f..3fdbf26390 100644
--- a/site/src/routes/repl/_components/Output/PropEditor.html
+++ b/site/src/routes/repl/_components/Output/PropEditor.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
 	import * as fleece from 'golden-fleece';
-	import CodeMirror from '../CodeMirror.html';
+	import CodeMirror from '../CodeMirror.svelte';
 
 	const dispatch = createEventDispatcher();
 
diff --git a/site/src/routes/repl/_components/Output/Viewer.html b/site/src/routes/repl/_components/Output/Viewer.svelte
similarity index 100%
rename from site/src/routes/repl/_components/Output/Viewer.html
rename to site/src/routes/repl/_components/Output/Viewer.svelte
diff --git a/site/src/routes/repl/_components/Output/index.html b/site/src/routes/repl/_components/Output/index.svelte
similarity index 94%
rename from site/src/routes/repl/_components/Output/index.html
rename to site/src/routes/repl/_components/Output/index.svelte
index 467cc439b4..b97ec17aa6 100644
--- a/site/src/routes/repl/_components/Output/index.html
+++ b/site/src/routes/repl/_components/Output/index.svelte
@@ -1,9 +1,9 @@
 <script>
-	import SplitPane from '../SplitPane.html';
-	import Viewer from './Viewer.html';
-	import CompilerOptions from './CompilerOptions.html';
-	import PropEditor from './PropEditor.html';
-	import CodeMirror from '../CodeMirror.html';
+	import SplitPane from '../SplitPane.svelte';
+	import Viewer from './Viewer.svelte';
+	import CompilerOptions from './CompilerOptions.svelte';
+	import PropEditor from './PropEditor.svelte';
+	import CodeMirror from '../CodeMirror.svelte';
 
 	export let bundle;
 	export let js;
diff --git a/site/src/routes/repl/_components/Repl.html b/site/src/routes/repl/_components/Repl.svelte
similarity index 94%
rename from site/src/routes/repl/_components/Repl.html
rename to site/src/routes/repl/_components/Repl.svelte
index 53557a9170..bbe05a8847 100644
--- a/site/src/routes/repl/_components/Repl.html
+++ b/site/src/routes/repl/_components/Repl.svelte
@@ -2,11 +2,11 @@
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 	import * as fleece from 'golden-fleece';
-	import SplitPane from './SplitPane.html';
-	import CodeMirror from './CodeMirror.html';
-	import Input from './Input/index.html';
-	import Output from './Output/index.html';
-	import InputOutputToggle from './InputOutputToggle.html';
+	import SplitPane from './SplitPane.svelte';
+	import CodeMirror from './CodeMirror.svelte';
+	import Input from './Input/index.svelte';
+	import Output from './Output/index.svelte';
+	import InputOutputToggle from './InputOutputToggle.svelte';
 
 	export let version = 'beta'; // TODO change this to latest when the time comes
 	export let app;
@@ -100,7 +100,7 @@
 		const selected = $selected_store;
 
 		if (selected.name === 'App') {
-			// App.html can't be removed
+			// App.svelte can't be removed
 			selected.source = '';
 			// $selected_store.set(selected);
 		} else {
@@ -118,13 +118,13 @@
 	}
 
 	function compile(component, options) {
-		if (component.type === 'html') {
+		if (component.type === 'svelte') {
 			workers.compiler.postMessage({
 				type: 'compile',
 				source: component.source,
 				options: Object.assign({
 					name: component.name,
-					filename: `${component.name}.html`
+					filename: `${component.name}.svelte`
 				}, options),
 				entry: component === $component_store[0]
 			});
@@ -154,7 +154,7 @@
 	}
 
 	function navigate(filename) {
-		const name = filename.replace(/\.html$/, '');
+		const name = filename.replace(/\.svelte$/, '');
 
 		console.error(`TODO navigate`);
 
diff --git a/site/src/routes/repl/_components/SplitPane.html b/site/src/routes/repl/_components/SplitPane.svelte
similarity index 100%
rename from site/src/routes/repl/_components/SplitPane.html
rename to site/src/routes/repl/_components/SplitPane.svelte
diff --git a/site/src/routes/repl/embed.html b/site/src/routes/repl/embed.svelte
similarity index 87%
rename from site/src/routes/repl/embed.html
rename to site/src/routes/repl/embed.svelte
index dda614cb52..c9eb0a08ea 100644
--- a/site/src/routes/repl/embed.html
+++ b/site/src/routes/repl/embed.svelte
@@ -11,7 +11,7 @@
 <script>
 	import { onMount } from 'svelte';
 	import * as fleece from 'golden-fleece';
-	import Repl from './_components/Repl.html';
+	import Repl from './_components/Repl.svelte';
 
 	export let version, gist, demo;
 
@@ -57,12 +57,12 @@
 							source
 						};
 					})
-					.filter(x => x.type === 'html' || x.type === 'js')
+					.filter(x => x.type === 'svelte' || x.type === 'js')
 					.sort((a, b) => {
-						if (a.name === 'App' && a.type === 'html') return -1;
-						if (b.name === 'App' && b.type === 'html') return 1;
+						if (a.name === 'App' && a.type === 'svelte') return -1;
+						if (b.name === 'App' && b.type === 'svelte') return 1;
 
-						if (a.type !== b.type) return a.type === 'html' ? -1 : 1;
+						if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
 
 						return a.name < b.name ? -1 : 1;
 					});
diff --git a/site/src/routes/repl/index.html b/site/src/routes/repl/index.svelte
similarity index 89%
rename from site/src/routes/repl/index.html
rename to site/src/routes/repl/index.svelte
index e896b5ecd5..41ad39a739 100644
--- a/site/src/routes/repl/index.html
+++ b/site/src/routes/repl/index.svelte
@@ -12,8 +12,8 @@
 	import { onMount } from 'svelte';
 	import { locate } from 'locate-character';
 	import * as fleece from 'golden-fleece';
-	import AppControls from './_components/AppControls/index.html';
-	import Repl from './_components/Repl.html';
+	import AppControls from './_components/AppControls/index.svelte';
+	import Repl from './_components/Repl.svelte';
 	import examples from '../../../content/examples/manifest.json';
 
 	export let version, demo, gist_id;
@@ -80,18 +80,21 @@
 							values = tryParseData(source) || {};
 						}
 
+						let type = file.slice(dot + 1);
+						if (type === 'html') type = 'svelte';
+
 						return {
 							name: file.slice(0, dot),
-							type: file.slice(dot + 1),
+							type,
 							source
 						};
 					})
-					.filter(x => x.type === 'html' || x.type === 'js')
+					.filter(x => x.type === 'svelte' || x.type === 'js')
 					.sort((a, b) => {
-						if (a.name === 'App' && a.type === 'html') return -1;
-						if (b.name === 'App' && b.type === 'html') return 1;
+						if (a.name === 'App' && a.type === 'svelte') return -1;
+						if (b.name === 'App' && b.type === 'svelte') return 1;
 
-						if (a.type !== b.type) return a.type === 'html' ? -1 : 1;
+						if (a.type !== b.type) return a.type === 'svelte' ? -1 : 1;
 
 						return a.name < b.name ? -1 : 1;
 					});
diff --git a/site/static/workers/bundler.js b/site/static/workers/bundler.js
index 8d05f59d23..66179bc400 100644
--- a/site/static/workers/bundler.js
+++ b/site/static/workers/bundler.js
@@ -69,7 +69,7 @@ async function getBundle(mode, cache, lookup) {
 
 	try {
 		bundle = await rollup.rollup({
-			input: './App.html',
+			input: './App.svelte',
 			external: id => {
 				if (id[0] === '.') return false;
 				if (is_svelte_module(id)) return false;
@@ -86,6 +86,8 @@ async function getBundle(mode, cache, lookup) {
 						return new URL(`${importee}.mjs`, importer).href;
 					}
 
+					if (importee.endsWith('.html')) importee = importee.replace(/\.html$/, '.svelte');
+
 					if (importee in lookup) return importee;
 				},
 				load(id) {
@@ -93,15 +95,15 @@ async function getBundle(mode, cache, lookup) {
 					if (id in lookup) return lookup[id].source;
 				},
 				transform(code, id) {
-					if (!/\.html$/.test(id)) return null;
+					if (!/\.svelte$/.test(id)) return null;
 
-					const name = id.replace(/^\.\//, '').replace(/\.html$/, '');
+					const name = id.replace(/^\.\//, '').replace(/\.svelte$/, '');
 
 					const { js, css, stats } = svelte.compile(code, Object.assign({
 						generate: mode,
 						format: 'esm',
 						name: name,
-						filename: name + '.html',
+						filename: name + '.svelte',
 						onwarn: warning => {
 							console.warn(warning.message);
 							console.log(warning.frame);