diff --git a/site/content/examples/hacker-news/App.svelte b/site/content/examples/hacker-news/App.svelte
index 68ba61d6dc..19d1f29bc4 100644
--- a/site/content/examples/hacker-news/App.svelte
+++ b/site/content/examples/hacker-news/App.svelte
@@ -53,7 +53,7 @@
 <main>
 	{#if item}
 		<Item {item}/>
-	{:elseif page}
+	{:else if page}
 		<List {page}/>
 	{/if}
 </main>
\ No newline at end of file
diff --git a/site/content/guide/02-template-syntax.md b/site/content/guide/02-template-syntax.md
index 41418c474e..339739c060 100644
--- a/site/content/guide/02-template-syntax.md
+++ b/site/content/guide/02-template-syntax.md
@@ -87,13 +87,13 @@ You can combine the two blocks above with `{:else}`:
 {/if}
 ```
 
-You can also use `{:elseif ...}`:
+You can also use `{:else if ...}`:
 
 ```html
-<!--{ title: 'If, else and elseif' }-->
+<!--{ title: 'If, else and else if' }-->
 {#if x > 10}
 	<p>{x} is greater than 10</p>
-{:elseif 5 > x}
+{:else if 5 > x}
 	<p>{x} is less than 5</p>
 {:else}
 	<p>{x} is between 5 and 10</p>
diff --git a/site/package-lock.json b/site/package-lock.json
index a6ac3b7e58..fb0be60e3d 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -1579,7 +1579,7 @@
       "dev": true
     },
     "eslint-plugin-svelte3": {
-      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#651d7e3695b1731251ab3a501d1067b561ede09f",
+      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#5fc4861d4b191649b0badf4f9a4c2470f08b237e",
       "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
       "dev": true
     },
@@ -4759,9 +4759,9 @@
       }
     },
     "svelte": {
-      "version": "3.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.8.tgz",
-      "integrity": "sha512-9cJHYdEs5h/6TJPwY+vfzwrznCLDjfS1rlJQz8SzPKfUJHCPxnDCbIZ95iPzATkv8aLHGcn1a/nLthyG+xh2IQ==",
+      "version": "3.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.0.0-beta.9.tgz",
+      "integrity": "sha512-e6BKetUwiLFuUlh70MRUBNeaVm7EBi2Z4V6olAY8Xyt5N8aK3KrgrmNLFsmjSjs+b3X5RmY+7crRER+Eq64Vgg==",
       "dev": true
     },
     "tar": {
diff --git a/site/package.json b/site/package.json
index d5e5131e4b..95c87cc8fb 100644
--- a/site/package.json
+++ b/site/package.json
@@ -53,6 +53,6 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "sapper": "^0.26.0-alpha.10",
-    "svelte": "^3.0.0-beta.8"
+    "svelte": "^3.0.0-beta.9"
   }
 }
diff --git a/site/src/components/Repl/CodeMirror.svelte b/site/src/components/Repl/CodeMirror.svelte
index b8b3b18109..aebac42815 100644
--- a/site/src/components/Repl/CodeMirror.svelte
+++ b/site/src/components/Repl/CodeMirror.svelte
@@ -275,7 +275,7 @@
 
 			{error.message}
 		</p>
-	{:elseif warningCount > 0}
+	{:else if warningCount > 0}
 		<p class='warning message'>
 			Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details
 		</p>
diff --git a/site/src/components/Repl/Output/Viewer.svelte b/site/src/components/Repl/Output/Viewer.svelte
index 146104fedd..f146b9d6fc 100644
--- a/site/src/components/Repl/Output/Viewer.svelte
+++ b/site/src/components/Repl/Output/Viewer.svelte
@@ -314,11 +314,11 @@
 
 			{error.message}
 		</p>
-	{:elseif pending}
+	{:else if pending}
 		<div class="pending" on:click={run}>
 			<button class="bg-second white">Click to run</button>
 		</div>
-	{:elseif pendingImports}
+	{:else if pendingImports}
 		<p class="info message">loading {pendingImports} {pendingImports === 1 ? 'dependency' : 'dependencies'} from
 		https://bundle.run</p>
 	{/if}
diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
index ea8f2086ea..955793ca5c 100644
--- a/site/src/components/Repl/Output/index.svelte
+++ b/site/src/components/Repl/Output/index.svelte
@@ -171,7 +171,7 @@
 			{/if}
 		</section>
 	</SplitPane>
-{:elseif embedded}
+{:else if embedded}
 	<CodeMirror
 		mode="javascript"
 		code="{view === 'js' ? js : css}"
diff --git a/site/src/routes/repl/_components/CodeMirror.svelte b/site/src/routes/repl/_components/CodeMirror.svelte
new file mode 100644
index 0000000000..aebac42815
--- /dev/null
+++ b/site/src/routes/repl/_components/CodeMirror.svelte
@@ -0,0 +1,290 @@
+<script context="module">
+	let codemirror_promise;
+	let _CodeMirror;
+
+	if (process.browser) {
+		codemirror_promise = import(/* webpackChunkName: "codemirror" */ './_codemirror.js');
+
+		codemirror_promise.then(mod => {
+			_CodeMirror = mod.default;
+		});
+	}
+</script>
+
+<script>
+	import { onMount, beforeUpdate, createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let mode;
+	export let code;
+	export let readonly = false;
+	export let error = null;
+	export let errorLoc = null;
+	export let warningCount = 0;
+	export let flex = false;
+	export let lineNumbers = true;
+	export let tab = true;
+
+	let w;
+	let h;
+
+	export function resize() {
+		editor.refresh();
+	}
+
+	const modes = {
+		json: {
+			name: 'javascript',
+			json: true
+		},
+		handlebars: {
+			name: 'handlebars',
+			base: 'text/html'
+		}
+	};
+
+	const refs = {};
+	let editor;
+	let updating = false;
+	let marker;
+	let error_line;
+	let destroyed = false;
+	let CodeMirror;
+
+	$: if (CodeMirror) {
+		createEditor(mode);
+	}
+
+	$: if (editor && !updating && code != null) {
+		updating = true;
+		editor.setValue(code);
+	}
+
+	$: if (editor && w && h) {
+		editor.refresh();
+	}
+
+	$: {
+		if (marker) marker.clear();
+
+		if (errorLoc) {
+			const line = errorLoc.line - 1;
+			const ch = errorLoc.column;
+
+			marker = editor.markText({ line, ch }, { line, ch: ch + 1 }, {
+				className: 'error-loc'
+			});
+
+			error_line = line;
+		} else {
+			error_line = null;
+		}
+	}
+
+	let previous_error_line;
+	$: if (editor) {
+		if (previous_error_line != null) {
+			editor.removeLineClass(previous_error_line, 'wrap', 'error-line')
+		}
+
+		if (error_line && (error_line !== previous_error_line)) {
+			editor.addLineClass(error_line, 'wrap', 'error-line');
+			previous_error_line = error_line;
+		}
+	}
+
+	onMount(() => {
+		if (_CodeMirror) {
+			CodeMirror = _CodeMirror;
+		} else {
+			codemirror_promise.then(mod => {
+				CodeMirror = mod.default;
+			});
+		}
+
+		return () => {
+			destroyed = true;
+			if (editor) editor.toTextArea();
+		}
+	});
+
+	beforeUpdate(() => {
+		updating = false;
+	});
+
+	function createEditor(mode) {
+		if (destroyed) return;
+
+		if (editor) {
+			editor.toTextArea();
+		}
+
+		const opts = {
+			lineNumbers,
+			lineWrapping: true,
+			indentWithTabs: true,
+			indentUnit: 2,
+			tabSize: 2,
+			value: code,
+			mode: modes[mode] || {
+				name: mode
+			},
+			readOnly: readonly
+		};
+
+		if (!tab) opts.extraKeys = {
+			Tab: tab,
+			'Shift-Tab': tab
+		};
+
+		editor = CodeMirror.fromTextArea(refs.editor, opts);
+
+		editor.on('change', instance => {
+			if (!updating) {
+				updating = true;
+				code = instance.getValue();
+				dispatch('change', { value: code });
+			}
+		});
+
+		editor.refresh();
+	}
+</script>
+
+<style>
+	.codemirror-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		border: none;
+		line-height: 1.5;
+	}
+
+	.codemirror-container :global(.CodeMirror) {
+		height: 100%;
+		/* background: var(--background); */
+		background: transparent;
+		font: 400 var(--code-fs)/1.7 var(--font-mono);
+		color: var(--base);
+	}
+
+	.codemirror-container.flex :global(.CodeMirror) {
+		height: auto;
+	}
+
+	.codemirror-container.flex :global(.CodeMirror-lines) {
+		padding: 0;
+	}
+
+	.codemirror-container :global(.CodeMirror-gutters) {
+		padding: 0 1.6rem 0 .8rem;
+		border: none;
+	}
+
+	.codemirror-container .message {
+		position: absolute;
+		bottom: 2.4rem;
+		left: 2.4rem;
+		z-index: 20;
+	}
+
+	.codemirror-container :global(.error-loc) {
+		position: relative;
+		border-bottom: 2px solid #da106e;
+	}
+
+	.codemirror-container :global(.error-line) {
+		background-color: rgba(200, 0, 0, .05);
+	}
+
+	.loading,
+	.error {
+		text-align: center;
+		color: #999;
+		font-weight: 400;
+		margin: 2.4rem 0 0 0;
+	}
+
+	.loading {
+		background-color: #666;
+	}
+
+	textarea {
+		visibility: hidden;
+	}
+
+	pre {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		border: none;
+		padding: 4px 4px 4px 57px;
+		resize: none;
+		font-family: var(--font-mono);
+		font-size: 1.3rem;
+		line-height: 1.7;
+		user-select: none;
+		pointer-events: none;
+		color: #ccc;
+		tab-size: 2;
+		-moz-tab-size: 2;
+	}
+
+	.flex pre {
+		padding: 0 0 0 4px;
+		height: auto;
+	}
+
+	.flex .loading {
+		display: none;
+	}
+</style>
+
+<!--
+-----------------------------------------------
+	syntax-highlighting [prism]
+	NOTE
+	- just started to transfer colors from prism to codemirror
+-----------------------------------------------
+-->
+<div class='codemirror-container' class:flex bind:offsetWidth={w} bind:offsetHeight={h}>
+	<textarea
+		tabindex='2'
+		bind:this={refs.editor}
+		readonly
+		value={code}
+	></textarea>
+
+	{#if error}
+		<p class='error message'>
+			{#if error.loc}
+				<strong>
+					{#if error.filename}
+						<span
+							class='filename'
+							on:click="{() => dispatch('navigate', { filename: error.filename })}"
+						>{error.filename}</span>
+					{/if}
+
+					({error.loc.line}:{error.loc.column})
+				</strong>
+			{/if}
+
+			{error.message}
+		</p>
+	{:else if warningCount > 0}
+		<p class='warning message'>
+			Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details
+		</p>
+	{/if}
+
+	{#if !CodeMirror}
+		<pre style="position: absolute; left: 0; top: 0"
+		>{code}</pre>
+
+		<p class='loading message'>loading editor...</p>
+	{/if}
+</div>
\ No newline at end of file