diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index 4dd49ab64..3dc1b1472 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -24,6 +24,23 @@
 		{/each},
 	</div>
 
+	<div class="option">
+		<span class="key">templatingMode:</span>
+
+		{#each ['string', 'functional'] as const as templating_mode}
+			<input
+				id={templating_mode}
+				type="radio"
+				checked={workspace.compiler_options.templatingMode === templating_mode}
+				value={templating_mode}
+				onchange={() => {
+					workspace.update_compiler_options({ templatingMode: templating_mode });
+				}}
+			/>
+			<label for={templating_mode}><span class="string">"{templating_mode}"</span></label>
+		{/each},
+	</div>
+
 	<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
 	<label class="option">
 		<span class="key">dev:</span>
@@ -55,7 +72,7 @@
 
 	.key {
 		display: inline-block;
-		width: 6em;
+		width: 10em;
 	}
 
 	.string {
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 5843fedd6..34096e955 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -87,7 +87,9 @@
 
 	async function rebundle() {
 		bundler!.bundle(workspace.files as File[], {
-			tailwind: workspace.tailwind
+			tailwind: workspace.tailwind,
+			// @ts-ignore
+			templatingMode: workspace.compiler_options.templatingMode
 		});
 	}
 
diff --git a/packages/repl/src/lib/Workspace.svelte.ts b/packages/repl/src/lib/Workspace.svelte.ts
index f1af3a583..46e731035 100644
--- a/packages/repl/src/lib/Workspace.svelte.ts
+++ b/packages/repl/src/lib/Workspace.svelte.ts
@@ -94,6 +94,7 @@ export interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
 	modernAst: boolean;
+	templatingMode: 'string' | 'functional';
 }
 
 export class Workspace {
@@ -104,7 +105,8 @@ export class Workspace {
 	#compiler_options = $state.raw<ExposedCompilerOptions>({
 		generate: 'client',
 		dev: false,
-		modernAst: true
+		modernAst: true,
+		templatingMode: 'string'
 	});
 	compiled = $state<Record<string, Compiled>>({});
 
@@ -456,6 +458,11 @@ export class Workspace {
 	update_compiler_options(options: Partial<ExposedCompilerOptions>) {
 		this.#compiler_options = { ...this.#compiler_options, ...options };
 		this.#reset_diagnostics();
+		for (let file of this.#files) {
+			if (is_file(file)) {
+				this.#onupdate(file);
+			}
+		}
 	}
 
 	update_file(file: File) {
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
index 9c5d29b3e..b86ff86a7 100644
--- a/packages/repl/src/lib/workers/bundler/index.ts
+++ b/packages/repl/src/lib/workers/bundler/index.ts
@@ -290,7 +290,9 @@ async function get_bundle(
 				const compilerOptions: any = {
 					filename: name + '.svelte',
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
-					dev: true
+					dev: true,
+					// @ts-expect-error
+					templatingMode: options.templatingMode
 				};
 
 				if (can_use_experimental_async) {
diff --git a/packages/repl/src/lib/workers/compiler/index.ts b/packages/repl/src/lib/workers/compiler/index.ts
index e0cdc4e9b..7b2cabd4b 100644
--- a/packages/repl/src/lib/workers/compiler/index.ts
+++ b/packages/repl/src/lib/workers/compiler/index.ts
@@ -57,7 +57,8 @@ addEventListener('message', async (event) => {
 						: 'ssr'
 					: options.generate,
 				dev: options.dev,
-				filename: file.name
+				filename: file.name,
+				templatingMode: options.templatingMode
 			};
 
 			if (!is_svelte_3_or_4) {