diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 42cb7c3bf8..db5c787d1b 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -30,6 +30,8 @@
 	let paused = $state(false);
 	let w = $state(1000);
 
+	let editor: any; // TODO
+
 	let previous_files: Item[] = [];
 
 	function create_files(map: Record<string, string>): Record<string, Item> {
@@ -301,9 +303,17 @@
 
 							<section slot="b" class="editor-container">
 								<Editor
-									exercise={data.exercise}
+									bind:this={editor}
 									warnings={adapter.adapter_state.warnings}
 									{workspace}
+									autocomplete_filter={(file) => {
+										return (
+											file.name.startsWith('/src') &&
+											file.name.startsWith(data.exercise.scope.prefix) &&
+											file.name !== '/src/__client.js' &&
+											file.name !== '/src/app.html'
+										);
+									}}
 								/>
 								<ImageViewer selected={workspace.selected_file} />
 
diff --git a/packages/editor/package.json b/packages/editor/package.json
index ca21c790d3..b9ab115090 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -60,5 +60,8 @@
 		"typescript": "^5.0.0",
 		"vite": "^5.0.11"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"esm-env": "^1.0.0"
+	}
 }
diff --git a/packages/editor/src/lib/Editor.svelte b/packages/editor/src/lib/Editor.svelte
index 1400d5daad..ecef58a561 100644
--- a/packages/editor/src/lib/Editor.svelte
+++ b/packages/editor/src/lib/Editor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER } from 'esm-env';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { acceptCompletion } from '@codemirror/autocomplete';
 	import { indentWithTab } from '@codemirror/commands';
@@ -12,22 +12,22 @@
 	import { svelte } from '@replit/codemirror-lang-svelte';
 	import { svelteTheme } from '@sveltejs/repl/theme';
 	import { basicSetup } from 'codemirror';
-	import { onMount, tick } from 'svelte';
+	import { tick } from 'svelte';
 	import { autocomplete_for_svelte } from '@sveltejs/site-kit/codemirror';
 	import type { Diagnostic } from '@codemirror/lint';
-	import { Workspace, type Item } from './Workspace.svelte.js';
+	import { Workspace, type Item, type File } from './Workspace.svelte.js';
 	import type { Warning } from 'svelte/compiler';
 	import './codemirror.css';
 
 	interface Props {
-		exercise: any; // TODO this needs to be decoupled
 		warnings: Record<string, Warning[]>; // TODO this should include errors as well
 		workspace: Workspace;
+		autocomplete_filter?: (file: File) => boolean;
 	}
 
-	let { exercise, warnings, workspace }: Props = $props();
+	let { warnings, workspace, autocomplete_filter = () => true }: Props = $props();
 
-	let container = $state() as HTMLDivElement;
+	let container: HTMLDivElement;
 
 	let preserve_editor_focus = $state(false);
 	let skip_reset = true;
@@ -103,14 +103,10 @@
 							() => workspace.selected_name!,
 							() =>
 								files
-									.filter(
-										(file) =>
-											file.type === 'file' &&
-											file.name.startsWith('/src') &&
-											file.name.startsWith(exercise.scope.prefix) &&
-											file.name !== '/src/__client.js' &&
-											file.name !== '/src/app.html'
-									)
+									.filter((file) => {
+										if (file.type !== 'file') return false;
+										return autocomplete_filter(file);
+									})
 									.map((file) => file.name)
 						)
 					];
@@ -139,7 +135,7 @@
 		editor_view.setState(state);
 	}
 
-	onMount(() => {
+	$effect(() => {
 		editor_view = new EditorView({
 			parent: container,
 			async dispatch(transaction) {
@@ -179,7 +175,7 @@
 		await reset(workspace.files);
 
 		if (editor_view) {
-			// could be false if onMount returned early
+			// TODO is it possible to get here?
 			select_state(workspace.selected_name);
 		}
 	});
@@ -244,7 +240,7 @@
 		}, 200);
 	}}
 >
-	{#if !browser && workspace.selected_file}
+	{#if !BROWSER && workspace.selected_file}
 		<div class="fake">
 			<div class="fake-gutter">
 				{#each workspace.selected_file.contents.split('\n') as _, i}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b98cd8c0d..4ba9930483 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -197,6 +197,10 @@ importers:
         version: 7.0.4(rollup@4.21.2)
 
   packages/editor:
+    dependencies:
+      esm-env:
+        specifier: ^1.0.0
+        version: 1.0.0
     devDependencies:
       '@codemirror/autocomplete':
         specifier: ^6.9.0