diff --git a/site/src/components/Repl/Input/ComponentSelector.svelte b/site/src/components/Repl/Input/ComponentSelector.svelte
index 7933306b0a..6c30c34eba 100644
--- a/site/src/components/Repl/Input/ComponentSelector.svelte
+++ b/site/src/components/Repl/Input/ComponentSelector.svelte
@@ -5,7 +5,7 @@
 
 	export let handle_select;
 
-	const { components, selected, request_focus } = getContext('REPL');
+	const { components, selected, request_focus, rebundle } = getContext('REPL');
 
 	let editing = null;
 
@@ -35,6 +35,8 @@
 
 		// focus the editor, but wait a beat (so key events aren't misdirected)
 		setTimeout(request_focus);
+
+		rebundle();
 	}
 
 	function remove(component) {
diff --git a/site/src/components/Repl/Output/CompilerOptions.svelte b/site/src/components/Repl/Output/CompilerOptions.svelte
index 278f7aa275..75f7301aa7 100644
--- a/site/src/components/Repl/Output/CompilerOptions.svelte
+++ b/site/src/components/Repl/Output/CompilerOptions.svelte
@@ -1,5 +1,7 @@
 <script>
-	export let options;
+	import { getContext } from 'svelte';
+
+	const { compile_options } = getContext('REPL');
 </script>
 
 <style>
@@ -104,41 +106,41 @@
 	<div class="option">
 		<span class="key">generate:</span>
 
-		<input id="dom-input" type="radio" bind:group={options.generate} value="dom">
+		<input id="dom-input" type="radio" bind:group={$compile_options.generate} value="dom">
 		<label for="dom-input"><span class="string">"dom"</span></label>
 
-		<input id="ssr-input" type="radio" bind:group={options.generate} value="ssr">
+		<input id="ssr-input" type="radio" bind:group={$compile_options.generate} value="ssr">
 		<label for="ssr-input"><span class="string">"ssr"</span>,</label>
 	</div>
 
 	<label class="option">
 		<span class="key">dev:</span>
-		<input type="checkbox" bind:checked={options.dev}> <span class="boolean">{options.dev}</span>,
+		<input type="checkbox" bind:checked={$compile_options.dev}> <span class="boolean">{$compile_options.dev}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">css:</span>
-		<input type="checkbox" bind:checked={options.css}> <span class="boolean">{options.css}</span>,
+		<input type="checkbox" bind:checked={$compile_options.css}> <span class="boolean">{$compile_options.css}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">hydratable:</span>
-		<input type="checkbox" bind:checked={options.hydratable}> <span class="boolean">{options.hydratable}</span>,
+		<input type="checkbox" bind:checked={$compile_options.hydratable}> <span class="boolean">{$compile_options.hydratable}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">customElement:</span>
-		<input type="checkbox" bind:checked={options.customElement}> <span class="boolean">{options.customElement}</span>,
+		<input type="checkbox" bind:checked={$compile_options.customElement}> <span class="boolean">{$compile_options.customElement}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">immutable:</span>
-		<input type="checkbox" bind:checked={options.immutable}> <span class="boolean">{options.immutable}</span>,
+		<input type="checkbox" bind:checked={$compile_options.immutable}> <span class="boolean">{$compile_options.immutable}</span>,
 	</label>
 
 	<label class="option">
 		<span class="key">legacy:</span>
-		<input type="checkbox" bind:checked={options.legacy}> <span class="boolean">{options.legacy}</span>
+		<input type="checkbox" bind:checked={$compile_options.legacy}> <span class="boolean">{$compile_options.legacy}</span>
 	</label>
 	});
 </div>
\ No newline at end of file
diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
index ae648cde9d..59d67b5fcf 100644
--- a/site/src/components/Repl/Output/index.svelte
+++ b/site/src/components/Repl/Output/index.svelte
@@ -13,34 +13,26 @@
 	export let runtimeError;
 	export let embedded;
 
-	let compile_options = {
-		generate: 'dom',
-		dev: false,
-		css: false,
-		hydratable: false,
-		customElement: false,
-		immutable: false,
-		legacy: false
-	};
+	let foo; // TODO workaround for https://github.com/sveltejs/svelte/issues/2122
 
 	register_output({
-		set: async selected => {
+		set: async (selected, options) => {
 			if (selected.type === 'js') {
 				js_editor.set(`/* Select a component to see its compiled code */`);
 				css_editor.set(`/* Select a component to see its compiled code */`);
 				return;
 			}
 
-			const compiled = await compiler.compile(selected, compile_options);
+			const compiled = await compiler.compile(selected, options);
 
 			js_editor.set(compiled.js, 'js');
 			css_editor.set(compiled.css, 'css');
 		},
 
-		update: async selected => {
+		update: async (selected, options) => {
 			if (selected.type === 'js') return;
 
-			const compiled = await compiler.compile(selected, compile_options);
+			const compiled = await compiler.compile(selected, options);
 
 			js_editor.update(compiled.js);
 			css_editor.update(compiled.css);
@@ -160,7 +152,7 @@
 			<section slot="b">
 				<h3>Compiler options</h3>
 
-				<CompilerOptions bind:options={compile_options}/>
+				<CompilerOptions bind:foo={foo}/>
 			</section>
 		</SplitPane>
 	{/if}
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
index aa9a9fed93..aa9e423932 100644
--- a/site/src/components/Repl/index.svelte
+++ b/site/src/components/Repl/index.svelte
@@ -30,7 +30,7 @@
 		selected.set(data.components[0]);
 
 		module_editor.set($selected.source, $selected.type);
-		output.set($selected);
+		output.set($selected, $compile_options);
 	}
 
 	export function update(data) {
@@ -43,10 +43,10 @@
 
 		if (matched_component) {
 			module_editor.update(matched_component.source);
-			output.update(matched_component);
+			output.update(matched_component, $compile_options);
 		} else {
 			module_editor.set(matched_component.source, matched_component.type);
-			output.set(matched_component);
+			output.set(matched_component, $compile_options);
 		}
 	}
 
@@ -56,13 +56,30 @@
 	const selected = writable(null);
 	const bundle = writable(null);
 
+	const compile_options = writable({
+		generate: 'dom',
+		dev: false,
+		css: false,
+		hydratable: false,
+		customElement: false,
+		immutable: false,
+		legacy: false
+	});
+
 	let module_editor;
 	let output;
 
+	function rebundle() {
+		workers.bundler.postMessage({ type: 'bundle', components: $components });
+	}
+
 	setContext('REPL', {
 		components,
 		selected,
 		bundle,
+		compile_options,
+
+		rebundle,
 
 		navigate: item => {
 			const match = /^(.+)\.(\w+)$/.exec(item.filename);
@@ -72,7 +89,7 @@
 			const component = $components.find(c => c.name === name && c.type === type);
 			selected.set(component);
 
-			output.set($selected);
+			output.set($selected, $compile_options);
 
 			// TODO select the line/column in question
 		},
@@ -91,10 +108,9 @@
 			components.update(c => c);
 
 			// recompile selected component
-			output.update($selected);
+			output.update($selected, $compile_options);
 
-			// regenerate bundle (TODO do this in a separate worker?)
-			workers.bundler.postMessage({ type: 'bundle', components: $components });
+			rebundle();
 
 			dispatch('change', {
 				components: $components
@@ -117,7 +133,7 @@
 	function handle_select(component) {
 		selected.set(component);
 		module_editor.set(component.source, component.type);
-		output.set($selected);
+		output.set($selected, $compile_options);
 	}
 
 	let workers;
@@ -153,6 +169,10 @@
 	$: if (workers && $components) {
 		workers.bundler.postMessage({ type: 'bundle', components: $components });
 	}
+
+	$: if (output && $selected) {
+		output.update($selected, $compile_options);
+	}
 </script>
 
 <style>