diff --git a/site/package-lock.json b/site/package-lock.json
index 3a1fabf102..b527a5feeb 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -1941,7 +1941,7 @@
       "dev": true
     },
     "eslint-plugin-svelte3": {
-      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#a9e7c167484ff7ea5da775ae21b133e0ab5ddc85",
+      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#651d7e3695b1731251ab3a501d1067b561ede09f",
       "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
       "dev": true
     },
@@ -4811,9 +4811,9 @@
       }
     },
     "sapper": {
-      "version": "0.26.0-alpha.10",
-      "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.10.tgz",
-      "integrity": "sha512-S1XdAA0gxEPT3Ikh3jsLKAAbV3EnDd80sppCeUJ5wHCfXTRiP6STxe5PLYZ4Ym8uYU7Iez+6cGLTkfP0ZLPRQw==",
+      "version": "0.26.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/sapper/-/sapper-0.26.0-alpha.12.tgz",
+      "integrity": "sha512-NEXr6Eu5jawY76N5IEQhKMKhcZW6+42E2alH4J8DxFMmOI7Gi2nlwCQ2jcZv7q/S+zMP+OSuqE44c94A5u1H8Q==",
       "dev": true,
       "requires": {
         "html-minifier": "^3.5.21",
@@ -5296,9 +5296,9 @@
       }
     },
     "svelte": {
-      "version": "3.0.0-beta.14",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.14.tgz",
-      "integrity": "sha512-naFCFs5JRYe5PGz3+Vg0LiFMqkQUc4bdiH4e7sd6jyDyia0fWd4CJrLxWiC5kHv5Qo5Iv+y26hBHnDoIGAw3zw==",
+      "version": "3.0.0-beta.20",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.20.tgz",
+      "integrity": "sha512-IEZrUseN2Hzpo1KFdyZf3Neqw7abbXLU7oRRkyBVm0iT1PQKHj8G75hR0wISvz7pOegYisiVFdi3C5Asz4ps9Q==",
       "dev": true
     },
     "tar": {
@@ -5426,15 +5426,21 @@
       }
     },
     "uglify-js": {
-      "version": "3.4.9",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
-      "integrity": "sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==",
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
+      "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==",
       "dev": true,
       "requires": {
-        "commander": "~2.17.1",
+        "commander": "~2.19.0",
         "source-map": "~0.6.1"
       },
       "dependencies": {
+        "commander": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
+          "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
diff --git a/site/package.json b/site/package.json
index de3edb8f64..664dd59e48 100644
--- a/site/package.json
+++ b/site/package.json
@@ -53,7 +53,7 @@
     "rollup-plugin-replace": "^2.1.0",
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
-    "sapper": "^0.26.0-alpha.10",
-    "svelte": "^3.0.0-beta.14"
+    "sapper": "^0.26.0-alpha.12",
+    "svelte": "^3.0.0-beta.20"
   }
 }
diff --git a/site/src/components/IntersectionObserver.svelte b/site/src/components/IntersectionObserver.svelte
new file mode 100644
index 0000000000..210fd524fd
--- /dev/null
+++ b/site/src/components/IntersectionObserver.svelte
@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let once = false;
+	export let top = 0;
+	export let bottom = 0;
+	export let left = 0;
+	export let right = 0;
+
+	let intersecting = false;
+	let container;
+
+	onMount(() => {
+		if (typeof IntersectionObserver !== 'undefined') {
+			const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+
+			const observer = new IntersectionObserver(entries => {
+				intersecting = entries[0].isIntersecting;
+				if (intersecting && once) {
+					observer.unobserve(container);
+				}
+			}, {
+				rootMargin
+			});
+
+			observer.observe(container);
+			return () => observer.unobserve(container);
+		}
+
+		function handler() {
+			const bcr = container.getBoundingClientRect();
+
+			intersecting = (
+				(bcr.bottom + bottom) > 0 &&
+				(bcr.right + right) > 0 &&
+				(bcr.top - top) < window.innerHeight &&
+				(bcr.left - left) < window.innerWidth
+			);
+
+			if (intersecting && once) {
+				window.removeEventListener('scroll', handler);
+			}
+		}
+
+		window.addEventListener('scroll', handler);
+		return () => window.removeEventListener('scroll', handler);
+	});
+</script>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+	}
+</style>
+
+<div bind:this={container}>
+	<slot {intersecting}></slot>
+</div>
\ No newline at end of file
diff --git a/site/src/components/Lazy.svelte b/site/src/components/Lazy.svelte
new file mode 100644
index 0000000000..ef81d68f00
--- /dev/null
+++ b/site/src/components/Lazy.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let constructor;
+
+	onMount(async () => {
+		constructor = await $$props.this();
+	});
+</script>
+
+<svelte:component this={constructor} {...$$props}/>
\ No newline at end of file
diff --git a/site/src/components/Repl/CodeMirror.svelte b/site/src/components/Repl/CodeMirror.svelte
index e9519e516e..a1a92fe344 100644
--- a/site/src/components/Repl/CodeMirror.svelte
+++ b/site/src/components/Repl/CodeMirror.svelte
@@ -33,9 +33,9 @@
 	// than making this state-driven through props,
 	// because it's difficult to update an editor
 	// without resetting scroll otherwise
-	export function set(new_code, new_mode) {
+	export async function set(new_code, new_mode) {
 		if (new_mode !== mode) {
-			createEditor(mode = new_mode);
+			await createEditor(mode = new_mode);
 		}
 
 		code = new_code;
@@ -121,12 +121,13 @@
 	onMount(() => {
 		if (_CodeMirror) {
 			CodeMirror = _CodeMirror;
-			createEditor(mode || 'svelte');
-			editor.setValue(code || '');
+			createEditor(mode || 'svelte').then(() => {
+				editor.setValue(code || '');
+			});
 		} else {
-			codemirror_promise.then(mod => {
+			codemirror_promise.then(async mod => {
 				CodeMirror = mod.default;
-				createEditor(mode || 'svelte');
+				await createEditor(mode || 'svelte');
 				editor.setValue(code || '');
 			});
 		}
@@ -137,12 +138,10 @@
 		}
 	});
 
-	function createEditor(mode) {
+	async function createEditor(mode) {
 		if (destroyed || !CodeMirror) return;
 
-		if (editor) {
-			editor.toTextArea();
-		}
+		if (editor) editor.toTextArea();
 
 		const opts = {
 			lineNumbers,
@@ -162,6 +161,12 @@
 			'Shift-Tab': tab
 		};
 
+		// Creating a text editor is a lot of work, so we yield
+		// the main thread for a moment. This helps reduce jank
+		await sleep(50);
+
+		if (destroyed) return;
+
 		editor = CodeMirror.fromTextArea(refs.editor, opts);
 
 		editor.on('change', instance => {
@@ -171,8 +176,13 @@
 			}
 		});
 
+		await sleep(50);
 		editor.refresh();
 	}
+
+	function sleep(ms) {
+		return new Promise(fulfil => setTimeout(fulfil, ms));
+	}
 </script>
 
 <style>
diff --git a/site/src/components/Repl/InputOutputToggle.svelte b/site/src/components/Repl/InputOutputToggle.svelte
index 68660088b1..abafd90359 100644
--- a/site/src/components/Repl/InputOutputToggle.svelte
+++ b/site/src/components/Repl/InputOutputToggle.svelte
@@ -1,3 +1,7 @@
+<script>
+	export let checked;
+</script>
+
 <style>
 	.input-output-toggle {
 		display: grid;
diff --git a/site/src/components/Repl/ReplWidget.svelte b/site/src/components/Repl/ReplWidget.svelte
index 7211256884..d2bd809a41 100644
--- a/site/src/components/Repl/ReplWidget.svelte
+++ b/site/src/components/Repl/ReplWidget.svelte
@@ -78,10 +78,6 @@
 	}
 </style>
 
-<svelte:head>
-	<title>{name} • Svelte REPL</title>
-</svelte:head>
-
 <div class="repl-outer">
 	{#if process.browser}
 		<Repl bind:this={repl} {version} embedded={true}/>
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
index 5b8f798b32..489e0e49d7 100644
--- a/site/src/components/Repl/index.svelte
+++ b/site/src/components/Repl/index.svelte
@@ -32,6 +32,8 @@
 
 		module_editor.set($selected.source, $selected.type);
 		output.set($selected, $compile_options);
+
+		rebundle();
 	}
 
 	export function update(data) {
diff --git a/site/src/components/TopNav.svelte b/site/src/components/TopNav.svelte
index d1e4db6d31..d02ff58cec 100644
--- a/site/src/components/TopNav.svelte
+++ b/site/src/components/TopNav.svelte
@@ -52,7 +52,7 @@
 		background-color: white;
 		box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
 		font-family: var(--font);
-		z-index: 10;
+		z-index: 100;
 		user-select: none;
 		transform: translate(0,calc(-100% - 1rem));
 		transition: transform 0.2s;
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index 95b2dff8b6..d2f6a696a4 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -1,10 +1,18 @@
 <script>
 	import Icon from '../components/Icon.svelte';
 	import Logo from '../components/Logo.svelte';
-	import ReplWidget from '../components/Repl/ReplWidget.svelte'; // TODO lazyload?
+	import IntersectionObserver from '../components/IntersectionObserver.svelte';
+	import Lazy from '../components/Lazy.svelte';
+	import ReplWidget from '../components/Repl/ReplWidget.svelte';
 	import contributors from './_contributors.js';
 
 	let sy = 0;
+
+	// TODO this causes a Sapper CSS bug...
+	// function loadReplWidget() {
+	// 	console.log('lazy loading');
+	// 	return import('../components/Repl/ReplWidget.svelte').then(mod => mod.default);
+	// }
 </script>
 
 <style>
@@ -123,7 +131,13 @@
 		border-radius: var(--border-r); */
 		width: 100%;
 		height: 420px;
+	}
+
+	.repl-container {
+		width: 100%;
+		height: 100%;
 		border-radius: var(--border-r);
+		overflow: hidden;
 	}
 
 	.example > div:first-child {
@@ -244,7 +258,14 @@ npm run dev & open http://localhost:5000
 			<p>Svelte components are written in HTML files. Just add data.</p>
 		</div>
 
-		<ReplWidget example="hello-world"/>
+		<div class="repl-container">
+			<IntersectionObserver once let:intersecting top={400}>
+				{#if intersecting}
+					<!-- <Lazy this={loadReplWidget} example="hello-world"/> -->
+					<ReplWidget example="hello-world"/>
+				{/if}
+			</IntersectionObserver>
+		</div>
 	</section>
 
 	<section class="container example linkify">
@@ -252,7 +273,14 @@ npm run dev & open http://localhost:5000
 			<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p>
 		</div>
 
-		<ReplWidget example="nested-components"/>
+		<div class="repl-container">
+			<IntersectionObserver once let:intersecting top={400}>
+				{#if intersecting}
+					<!-- <Lazy this={loadReplWidget} example="nested-components"/> -->
+					<ReplWidget example="nested-components"/>
+				{/if}
+			</IntersectionObserver>
+		</div>
 	</section>
 
 	<section class="container example linkify">
@@ -260,7 +288,14 @@ npm run dev & open http://localhost:5000
 			<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
 		</div>
 
-		<ReplWidget example="reactive-assignments"/>
+		<div class="repl-container">
+			<IntersectionObserver once let:intersecting top={400}>
+				{#if intersecting}
+					<!-- <Lazy this={loadReplWidget} example="reactive-assignments"/> -->
+					<ReplWidget example="reactive-assignments"/>
+				{/if}
+			</IntersectionObserver>
+		</div>
 	</section>
 
 	<section class="container example linkify">
@@ -268,7 +303,14 @@ npm run dev & open http://localhost:5000
 			<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
 		</div>
 
-		<ReplWidget example="svg-transitions"/>
+		<div class="repl-container">
+			<IntersectionObserver once let:intersecting top={400}>
+				{#if intersecting}
+					<!-- <Lazy this={loadReplWidget} example="svg-transitions"/> -->
+					<ReplWidget example="svg-transitions"/>
+				{/if}
+			</IntersectionObserver>
+		</div>
 	</section>
 </div>