diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 8cb535ae6a..16b6c3e87d 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
-	import { reset } from './adapter.svelte';
+	import { adapter_state, reset } from './adapter.svelte';
 	import Editor from './Editor.svelte';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';
@@ -10,40 +10,39 @@
 	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import Sidebar from './Sidebar.svelte';
 	import {
-		create_directories,
 		creating,
 		files,
 		reset_files,
 		selected_file,
 		selected_name,
 		solution
-	} from './state.js';
+	} from './state.svelte';
+	import { create_directories } from './utils';
 	import { needs_webcontainers, text_files } from './shared';
 	import OutputRollup from './OutputRollup.svelte';
 	import { page } from '$app/stores';
 	import Controls from './Controls.svelte';
+	import type { Stub } from '$lib/tutorial';
+	import type { Snapshot } from './$types.js';
 
-	export let data;
+	interface Props {
+		data: any;
+	}
+
+	let { data }: Props = $props();
 
 	let path = data.exercise.path;
-	let show_editor = false;
-	let show_filetree = false;
-	let paused = false;
-	let w = 1000;
+	let show_editor = $state(false);
+	let show_filetree = $state(false);
+	let paused = $state(false);
+	let w = $state(1000);
 
-	/** @type {import('$lib/tutorial').Stub[]} */
-	let previous_files = [];
+	let previous_files: Stub[] = [];
 
-	/**
-	 * @param {Record<string, string>} map
-	 * @returns {Record<string, import('$lib/tutorial').Stub>}
-	 */
-	function create_files(map) {
-		/** @type {Record<string, import('$lib/tutorial').Stub>} */
-		const files = {};
+	function create_files(map: Record<string, string>): Record<string, Stub> {
+		const files: Record<string, Stub> = {};
 
-		/** @type {string[]} */
-		const to_delete = [];
+		const to_delete: string[] = [];
 
 		for (const key in map) {
 			const contents = map[key];
@@ -53,7 +52,7 @@
 			}
 
 			const parts = key.split('/');
-			const basename = /** @type {string} */ (parts.pop());
+			const basename = parts.pop()!;
 			const ext = basename.slice(basename.lastIndexOf('.'));
 
 			if (basename === '__delete') {
@@ -63,7 +62,7 @@
 
 			while (parts.length > 0) {
 				const dir = `/${parts.join('/')}`;
-				const basename = /** @type {string} */ (parts.pop());
+				const basename = parts.pop()!;
 
 				files[dir] ??= {
 					type: 'directory',
@@ -94,14 +93,7 @@
 		return files;
 	}
 
-	$: a = create_files(data.exercise.a);
-	$: b = create_files({ ...data.exercise.a, ...data.exercise.b });
-
-	$: mobile = w < 800; // for the things we can't do with media queries
-	$: files.set(Object.values(a));
-	$: solution.set(b);
-	$: selected_name.set(data.exercise.focus);
-	$: completed = is_completed($files, b);
+	// for the things we can't do with media queries
 
 	beforeNavigate(() => {
 		previous_files = $files;
@@ -119,11 +111,7 @@
 		paused = false;
 	});
 
-	/**
-	 * @param {import('$lib/tutorial').Stub[]} files
-	 * @param {Record<string, import('$lib/tutorial').Stub> | null} solution
-	 */
-	function is_completed(files, solution) {
+	function is_completed(files: Stub[], solution: Record<string, Stub> | null) {
 		if (!solution) return true;
 
 		for (const file of files) {
@@ -143,14 +131,12 @@
 		return true;
 	}
 
-	/** @param {string} code */
-	function normalise(code) {
+	function normalise(code: string) {
 		// TODO think about more sophisticated normalisation (e.g. truncate multiple newlines)
 		return code.replace(/\s+/g, ' ').trim();
 	}
 
-	/** @param {string | null} name */
-	function select_file(name) {
+	function select_file(name: string | null) {
 		const file = name && $files.find((file) => file.name === name);
 
 		if (!file && name) {
@@ -178,8 +164,7 @@
 		show_editor = true;
 	}
 
-	/** @param {string} name */
-	function navigate_to_file(name) {
+	function navigate_to_file(name: string) {
 		if (name === $selected_name) return;
 
 		select_file(name);
@@ -190,11 +175,10 @@
 		}
 	}
 
-	/** @type {HTMLElement} */
-	let sidebar;
+	let sidebar = $state() as HTMLElement;
 
-	/** @type {import('./$types').Snapshot<number>} */
-	export const snapshot = {
+	// TODO this doesn't seem to work any more?
+	export const snapshot: Snapshot<number> = {
 		capture: () => {
 			const scroll = sidebar.scrollTop;
 			sidebar.scrollTop = 0;
@@ -204,6 +188,24 @@
 			sidebar.scrollTop = scroll;
 		}
 	};
+
+	let a = $derived(create_files(data.exercise.a));
+	let b = $derived(create_files({ ...data.exercise.a, ...data.exercise.b }));
+	let mobile = $derived(w < 800);
+
+	$effect(() => {
+		files.set(Object.values(a));
+	});
+
+	$effect(() => {
+		solution.set(b);
+	});
+
+	$effect(() => {
+		selected_name.set(data.exercise.focus);
+	});
+
+	let completed = $derived(is_completed($files, b));
 </script>
 
 <svelte:head>
@@ -225,7 +227,7 @@
 
 <svelte:window
 	bind:innerWidth={w}
-	on:popstate={(e) => {
+	onpopstate={(e) => {
 		const q = new URLSearchParams(location.search);
 		const file = q.get('file');
 
@@ -272,9 +274,9 @@
 							max="300px"
 							pos="200px"
 						>
-							<section class="navigator" slot="a">
+							<section slot="a" class="navigator">
 								{#if mobile}
-									<button class="file" on:click={() => (show_filetree = !show_filetree)}>
+									<button class="file" onclick={() => (show_filetree = !show_filetree)}>
 										{$selected_file?.name.replace(
 											data.exercise.scope.prefix,
 											data.exercise.scope.name + '/'
@@ -290,8 +292,8 @@
 								{/if}
 							</section>
 
-							<section class="editor-container" slot="b">
-								<Editor exercise={data.exercise} />
+							<section slot="b" class="editor-container">
+								<Editor exercise={data.exercise} warnings={adapter_state.warnings} />
 								<ImageViewer selected={$selected_file} />
 
 								{#if mobile && show_filetree}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
index a11fdd7d8e..eb8e5a0535 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
@@ -13,19 +13,19 @@
 	import { svelteTheme } from '@sveltejs/repl/theme';
 	import { basicSetup } from 'codemirror';
 	import { onMount, tick } from 'svelte';
-	import { adapter_state } from './adapter.svelte';
-	import './codemirror.css';
-	import { files, selected_file, selected_name, update_file } from './state.js';
-	import { toStore } from 'svelte/store';
+	import { files, selected_file, selected_name, update_file } from './state.svelte';
 	import { autocomplete_for_svelte } from '@sveltejs/site-kit/codemirror';
 	import type { Diagnostic } from '@codemirror/lint';
 	import type { Exercise, Stub } from '$lib/tutorial';
+	import type { Warning } from 'svelte/compiler';
+	import './codemirror.css';
 
 	interface Props {
 		exercise: Exercise;
+		warnings: Record<string, Warning[]>;
 	}
 
-	let { exercise }: Props = $props();
+	let { exercise, warnings }: Props = $props();
 
 	let container = $state() as HTMLDivElement;
 
@@ -38,8 +38,6 @@
 
 	let editor_view = $state() as EditorView;
 
-	const warnings = toStore(() => adapter_state.warnings);
-
 	const extensions = [
 		basicSetup,
 		EditorState.tabSize.of(2),
@@ -198,20 +196,20 @@
 	$effect(() => {
 		if (editor_view) {
 			if ($selected_name) {
-				const current_warnings = $warnings[$selected_name] || [];
+				const current_warnings = warnings[$selected_name] || [];
 				const diagnostics = current_warnings.map((warning) => {
 					/** @type {import('@codemirror/lint').Diagnostic} */
 					const diagnostic: Diagnostic = {
-						from: warning.start.character,
-						to: warning.end.character,
+						from: warning.start!.character,
+						to: warning.end!.character,
 						severity: 'warning',
 						message: warning.message
 					};
 
 					return diagnostic;
 				});
-				const transaction = setDiagnostics(editor_view.state, diagnostics);
 
+				const transaction = setDiagnostics(editor_view.state, diagnostics);
 				editor_view.dispatch(transaction);
 			}
 		}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
index 4db4a92639..52cdc2c6e0 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { load_webcontainer, reset } from './adapter.svelte';
-	import { files } from './state.js';
+	import { files } from './state.svelte';
 
 	interface Props {
 		initial: boolean;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
index a16790ac63..b1aa5038f6 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte
@@ -2,7 +2,7 @@
 	import * as context from './context.js';
 	import Item from './Item.svelte';
 	import file_icon from '$lib/icons/file.svg';
-	import { selected_name, solution } from '../state.js';
+	import { selected_name, solution } from '../state.svelte';
 
 	/** @type {import('$lib/tutorial').FileStub} */
 	export let file;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
index ceccbd0081..1cd9649978 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
@@ -4,7 +4,8 @@
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { files, solution, reset_files, create_directories, selected_name } from '../state.js';
+	import { files, solution, reset_files, selected_name } from '../state.svelte';
+	import { create_directories } from '../utils';
 	import { afterNavigate } from '$app/navigation';
 
 	/** @type {import('$lib/tutorial').Exercise} */
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
index cc36e8c55b..70e6b46916 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte
@@ -5,7 +5,7 @@
 	import Item from './Item.svelte';
 	import folder_closed from '$lib/icons/folder.svg';
 	import folder_open from '$lib/icons/folder-open.svg';
-	import { files, solution, creating } from '../state.js';
+	import { files, solution, creating } from '../state.svelte';
 
 	/** @type {import('$lib/tutorial').DirectoryStub} */
 	export let directory;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/state.js b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.js
deleted file mode 100644
index 650109e128..0000000000
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/state.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { derived, writable } from 'svelte/store';
-import * as adapter from './adapter.svelte';
-
-/**
- * @template T
- * @typedef {import('svelte/store').Writable<T>} Writable<T>
- */
-
-/** @type {Writable<import('$lib/tutorial').Stub[]>} */
-export const files = writable([]);
-
-/** @type {Writable<Record<string, import('$lib/tutorial').Stub>>} */
-export const solution = writable({});
-
-/** @type {Writable<{ parent: string, type: 'file' | 'directory' } | null>} */
-export const creating = writable(null);
-
-/** @type {Writable<string | null>} */
-export const selected_name = writable(null);
-
-export const selected_file = derived([files, selected_name], ([$files, $selected_name]) => {
-	return (
-		/** @type{import('$lib/tutorial').FileStub | undefined} */ (
-			$files.find((stub) => stub.name === $selected_name)
-		) ?? null
-	);
-});
-
-/** @param {import('$lib/tutorial').FileStub} file */
-export function update_file(file) {
-	files.update(($files) => {
-		return $files.map((old) => {
-			if (old.name === file.name) {
-				return file;
-			}
-			return old;
-		});
-	});
-
-	adapter.update(file);
-}
-
-/** @param {import('$lib/tutorial').Stub[]} new_files */
-export function reset_files(new_files) {
-	// if the selected file no longer exists, clear it
-	selected_name.update(($selected_name) => {
-		const file = new_files.find((file) => file.name === $selected_name);
-		return file?.name ?? null;
-	});
-
-	files.set(new_files);
-	adapter.reset(new_files);
-}
-
-/**
- * @param {string} name
- * @param {import('$lib/tutorial').Stub[]} files
- */
-export function create_directories(name, files) {
-	const existing = new Set();
-
-	for (const file of files) {
-		if (file.type === 'directory') {
-			existing.add(file.name);
-		}
-	}
-
-	/** @type {import('$lib/tutorial').DirectoryStub[]} */
-	const directories = [];
-
-	const parts = name.split('/');
-	while (parts.length) {
-		parts.pop();
-
-		const dir = parts.join('/');
-		if (existing.has(dir)) {
-			break;
-		}
-
-		directories.push({
-			type: 'directory',
-			name: dir,
-			basename: /** @type {string} */ (parts.at(-1))
-		});
-	}
-
-	return directories;
-}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
new file mode 100644
index 0000000000..c687eb45ad
--- /dev/null
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts
@@ -0,0 +1,42 @@
+import { derived, writable, type Writable } from 'svelte/store';
+import * as adapter from './adapter.svelte';
+import type { FileStub, Stub } from '$lib/tutorial';
+
+// TODO convert to state
+
+export const files = writable([] as Stub[]);
+
+export const solution = writable({} as Record<string, Stub>);
+
+export const creating: Writable<{ parent: string; type: 'file' | 'directory' } | null> =
+	writable(null);
+
+export const selected_name: Writable<string | null> = writable(null);
+
+export const selected_file = derived([files, selected_name], ([$files, $selected_name]) => {
+	return ($files.find((stub) => stub.name === $selected_name) as FileStub) ?? null;
+});
+
+export function update_file(file: FileStub) {
+	files.update(($files) => {
+		return $files.map((old) => {
+			if (old.name === file.name) {
+				return file;
+			}
+			return old;
+		});
+	});
+
+	adapter.update(file);
+}
+
+export function reset_files(new_files: Stub[]) {
+	// if the selected file no longer exists, clear it
+	selected_name.update(($selected_name) => {
+		const file = new_files.find((file) => file.name === $selected_name);
+		return file?.name ?? null;
+	});
+
+	files.set(new_files);
+	adapter.reset(new_files);
+}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/utils.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/utils.ts
new file mode 100644
index 0000000000..4bd257eaa9
--- /dev/null
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/utils.ts
@@ -0,0 +1,31 @@
+import type { DirectoryStub, Stub } from '$lib/tutorial';
+
+export function create_directories(name: string, files: Stub[]) {
+	const existing = new Set();
+
+	for (const file of files) {
+		if (file.type === 'directory') {
+			existing.add(file.name);
+		}
+	}
+
+	const directories: DirectoryStub[] = [];
+
+	const parts = name.split('/');
+	while (parts.length) {
+		parts.pop();
+
+		const dir = parts.join('/');
+		if (existing.has(dir)) {
+			break;
+		}
+
+		directories.push({
+			type: 'directory',
+			name: dir,
+			basename: parts.at(-1)!
+		});
+	}
+
+	return directories;
+}