diff --git a/astro.config.mjs b/astro.config.mjs
index 4db42eb596..36259e4377 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -33,6 +33,9 @@ export default defineConfig({
       ],
       host: true, // Allow access from non-localhost domains
       cors: true, // Allow CORS (optional)
+			headers: {
+				"Access-Control-Allow-Origin": "*"
+			}
     },
 		optimizeDeps: {
 			exclude: ['https']
diff --git a/engine/src/web/tune.ts b/engine/src/web/tune.ts
index c656e66b02..2ca0f054fe 100644
--- a/engine/src/web/tune.ts
+++ b/engine/src/web/tune.ts
@@ -51,6 +51,7 @@ export function playTune(tune: Tune, number = 1): PlayTuneRes {
 	const playingRef = { playing: true }
 
 	if (audioCtx === null) audioCtx = new AudioContext()
+	if (audioCtx.state === 'suspended') audioCtx.resume().catch(() => {})
 	playTuneHelper(tune, number, playingRef, audioCtx, audioCtx.destination)
 
 	return {
diff --git a/package.json b/package.json
index 5716434a18..56504c1ede 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
 	"scripts": {
 		"dev": "astro dev",
 		"start": "astro dev",
-		"build": "astro build",
+		"build": "astro build && node scripts/patch-vercel-config.mjs",
 		"test": "bun run test:unit",
 		"test:unit": "cross-env PUBLIC_MAX_ITERATIONS=2000 PUBLIC_MAX_LOOP_TIME_MS=1500 vitest run"
 	},
diff --git a/scripts/patch-vercel-config.mjs b/scripts/patch-vercel-config.mjs
new file mode 100644
index 0000000000..c0a90090f5
--- /dev/null
+++ b/scripts/patch-vercel-config.mjs
@@ -0,0 +1,29 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs'
+
+const configPath = new URL('../.vercel/output/config.json', import.meta.url)
+
+if (!existsSync(configPath)) process.exit(0)
+
+const config = JSON.parse(readFileSync(configPath, 'utf8'))
+const routes = Array.isArray(config.routes) ? config.routes : []
+const astroAssetsRouteIndex = routes.findIndex((route) => route.src === '^/_astro/(.*)$')
+const astroAssetsRoute = astroAssetsRouteIndex >= 0 ? routes[astroAssetsRouteIndex] : null
+
+if (astroAssetsRoute) {
+	astroAssetsRoute.headers = {
+		...astroAssetsRoute.headers,
+		'Access-Control-Allow-Origin': '*',
+		'Cross-Origin-Resource-Policy': 'cross-origin',
+	}
+
+	routes.splice(astroAssetsRouteIndex, 1)
+
+	const filesystemIndex = routes.findIndex((route) => route.handle === 'filesystem')
+	if (filesystemIndex >= 0) {
+		routes.splice(filesystemIndex, 0, astroAssetsRoute)
+	} else {
+		routes.unshift(astroAssetsRoute)
+	}
+}
+
+writeFileSync(configPath, `${JSON.stringify(config, null, 2)}\n`)
diff --git a/src/components/big-interactive-pages/desktop-player.tsx b/src/components/big-interactive-pages/desktop-player.tsx
index 3136e53fca..0dfc2f1aaa 100644
--- a/src/components/big-interactive-pages/desktop-player.tsx
+++ b/src/components/big-interactive-pages/desktop-player.tsx
@@ -1,5 +1,4 @@
 import {useEffect, useRef} from 'preact/hooks'
-import { runGame } from '../../lib/engine'
 import styles from './desktop-player.module.css'
 import {
 	IoExpandOutline,
@@ -22,6 +21,9 @@ import {exitFullscreen, fullscreenElement, requestFullscreen} from "../../lib/ut
 import Button from "../design-system/button";
 import {VscLoading} from "react-icons/vsc";
 import {upload, uploadState} from "../../lib/upload";
+import SandboxedGameFrame from "./sandboxed-game-frame";
+import type { SandboxedGameControllerHandle } from "../../lib/engine/sandbox-controller";
+import { logInfo } from "../popups-etc/help";
 
 interface DesktopPlayerProps {
 	code: string
@@ -33,17 +35,17 @@ interface DesktopPlayerProps {
 }
 
 export default function DesktopPlayer(props: DesktopPlayerProps) {
-	const screen = useRef<HTMLCanvasElement>(null)
+	const player = useRef<SandboxedGameControllerHandle | null>(null)
 	const outputArea = useRef<HTMLDivElement>(null);
 	const screenContainer = useRef<HTMLDivElement>(null);
 	const screenControls = useRef<HTMLDivElement>(null);
+	const playerVersion = useSignal(0);
 	
 	// acts a bit like a timer; if >0, shake game canvas
 	// activated when a game is run to show it's being run
 	const screenShake = useSignal(0);
 
 	const onStop = async () => {
-		if (!screen.current) return;
 		if (cleanupRef.value) cleanupRef.value?.();
 	};
 
@@ -53,14 +55,13 @@ export default function DesktopPlayer(props: DesktopPlayerProps) {
 	});
 
 	const onRun = async () => {
-		if (!screen.current) return;
+		if (!player.current) return;
 		if (cleanupRef.value) cleanupRef.value?.();
 		errorLog.value = [];
-		const res = runGame(props.code, screen.current!, (error) => {
-			errorLog.value = [...errorLog.value, error];
-		});
+		logInfo.value = [];
+		player.current.run(props.code);
 
-		screen.current!.focus();
+		player.current.focus();
 		if (screenShake) {
 			screenShake.value++;
 		}
@@ -70,16 +71,12 @@ export default function DesktopPlayer(props: DesktopPlayerProps) {
 			}
 		}, 200);
 
-		cleanupRef.value = res?.cleanup;
-		if (res && res.error) {
-			console.error(res.error.raw);
-			errorLog.value = [...errorLog.value, res.error];
-		}
+		cleanupRef.value = () => player.current?.stop();
 	};
 
 	useEffect(() => {
 		onRun()
-	}, [props.code])
+	}, [props.code, playerVersion.value])
 	
 	// mouse move timeout for auto-hiding fullscreen controls
 	const mouseMoveTimeout = useSignal(0);
@@ -166,8 +163,8 @@ export default function DesktopPlayer(props: DesktopPlayerProps) {
 				maxHeight: canvasScreenSize.value.maxHeight,
 			} : {}} className={styles.screenContainer}>
 				<div className={styles.canvasWrapper}>
-					<canvas
-						className={`${styles.screen} ${
+					<SandboxedGameFrame
+						class={`${styles.screen} ${
 							screenShake.value > 0 ? "shake" : ""
 						}`}
 						style={outputArea.current ? {
@@ -176,10 +173,14 @@ export default function DesktopPlayer(props: DesktopPlayerProps) {
 							width: (1.25 * canvasScreenSize.value.height),
 							maxWidth: "100%",
 						} : {}}
-						ref={screen}
-						tabIndex={0}
-						width="1000"
-						height="800"
+						onController={(controller) => {
+							player.current = controller;
+							playerVersion.value++;
+						}}
+						onError={(error) => {
+							console.error(error.raw);
+							errorLog.value = [...errorLog.value, error];
+						}}
 					/>
 				</div>
 				<div ref={screenControls} className={`${styles.screenControls} ${showFullscreenControls.value && styles.enabled}`}>
diff --git a/src/components/big-interactive-pages/editor.tsx b/src/components/big-interactive-pages/editor.tsx
index 4b3fdea24c..5234aef74d 100644
--- a/src/components/big-interactive-pages/editor.tsx
+++ b/src/components/big-interactive-pages/editor.tsx
@@ -14,12 +14,12 @@ import {
 	useSignalEffect,
 } from "@preact/signals";
 import { useEffect, useRef, useState} from "preact/hooks";
-import { codeMirror, errorLog, isNewSaveStrat, muted, type PersistenceState, type RoomState,  screenRef, cleanupRef, reviewState } from "../../lib/state";
+import { codeMirror, errorLog, gamePlayerRef, isNewSaveStrat, muted, type PersistenceState, type RoomState, cleanupRef, reviewState } from "../../lib/state";
 import EditorModal from "../popups-etc/editor-modal";
-import { runGame, _performSyntaxCheck } from "../../lib/engine";
+import { _performSyntaxCheck } from "../../lib/engine";
 import DraftWarningModal from "../popups-etc/draft-warning";
 import { debounce } from "throttle-debounce";
-import Help from "../popups-etc/help";
+import Help, { logInfo } from "../popups-etc/help";
 import { collapseRanges } from "../../lib/codemirror/util";
 import { defaultExampleCode } from "../../lib/examples";
 import MigrateToast from "../popups-etc/migrate-toast";
@@ -33,6 +33,7 @@ import OutOfSpaceModal from "../popups-etc/out-of-space";
 import RoomPasswordPopup from "../popups-etc/room-password";
 import KeyBindingsModal from '../popups-etc/KeyBindingsModal'
 import { PersistenceStateKind } from "../../lib/state";
+import SandboxedGameFrame from "./sandboxed-game-frame";
 
 let screenShakeSignal: Signal<number> | null = null;
 
@@ -47,16 +48,15 @@ const performSyntaxCheck = () => {
 
 export const onRun = async () => {
 	foldAllTemplateLiterals();
-	if (!screenRef.value) return;
+	if (!gamePlayerRef.value) return;
 
 	if (cleanupRef.value) cleanupRef.value();
 	errorLog.value = [];
+	logInfo.value = [];
 	const code = codeMirror.value?.state.doc.toString() ?? "";
-	const res = runGame(code, screenRef.value, (error) => {
-		errorLog.value = [...errorLog.value, error];
-	});
+	gamePlayerRef.value.run(code);
 
-	screenRef.value.focus();
+	gamePlayerRef.value.focus();
 	if (screenShakeSignal) {
 		screenShakeSignal.value++;
 	}
@@ -66,11 +66,7 @@ export const onRun = async () => {
 		}
 	}, 200);
 
-	cleanupRef.value = res?.cleanup;
-	if (res && res.error) {
-		console.error(res.error.raw);
-		errorLog.value = [...errorLog.value, res.error];
-	}
+	cleanupRef.value = () => gamePlayerRef.value?.stop();
 };
 
 interface EditorProps {
@@ -449,17 +445,24 @@ export default function Editor({ persistenceState, cookies, roomState, review }:
 	}, []);
 
 	useEffect(() => {
-		screenRef.value = screen.current;
-
 		screenShakeSignal = screenShake;
 	});
 	useEffect(() => () => cleanupRef.value?.(), []);
+	useEffect(() => {
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.defaultPrevented) return;
+			if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+				e.preventDefault();
+				onRun();
+			}
+		};
+		window.addEventListener('keydown', onKeyDown);
+		return () => window.removeEventListener('keydown', onKeyDown);
+	}, []);
 	// We like running games!
-	const screen = useRef<HTMLCanvasElement>(null);
 	const screenShake = useSignal(0);
 
 	const onStop = async () => {
-		if (!screen.current) return;
 		if (cleanupRef.value) cleanupRef.value?.();
 	};
 
@@ -661,7 +664,7 @@ export default function Editor({ persistenceState, cookies, roomState, review }:
 						maxHeight: canvasScreenSize.value.maxHeight,
 					} : {} }>
 						<div class={styles.canvasWrapper}>
-							<canvas
+							<SandboxedGameFrame
 								class={`${styles.screen} ${
 									screenShake.value > 0 ? "shake" : ""
 								}`}
@@ -671,10 +674,13 @@ export default function Editor({ persistenceState, cookies, roomState, review }:
 									width: (1.25 * canvasScreenSize.value.height),
 									maxWidth: "100%",
 								}: { } }
-								ref={screen}
-								tabIndex={0}
-								width="1000"
-								height="800"
+								onController={(controller) => {
+									gamePlayerRef.value = controller;
+								}}
+								onError={(error) => {
+									console.error(error.raw);
+									errorLog.value = [...errorLog.value, error];
+								}}
 							/>
 						</div>
 						<div ref={screenControls} class={styles.screenControls}>
diff --git a/src/components/big-interactive-pages/mobile-player.tsx b/src/components/big-interactive-pages/mobile-player.tsx
index d01db865f1..f6922d6e87 100644
--- a/src/components/big-interactive-pages/mobile-player.tsx
+++ b/src/components/big-interactive-pages/mobile-player.tsx
@@ -1,8 +1,9 @@
 import { useSignal } from '@preact/signals'
 import { useEffect, useRef } from 'preact/hooks'
-import { runGame } from '../../lib/engine'
 import styles from './mobile-player.module.css'
 import {exitFullscreen, fullscreenElement, requestFullscreen} from "../../lib/utils/fullscreen";
+import SandboxedGameFrame from './sandboxed-game-frame'
+import type { SandboxedGameControllerHandle } from '../../lib/engine/sandbox-controller'
 
 interface MobilePlayerProps {
 	code: string
@@ -11,23 +12,23 @@ interface MobilePlayerProps {
 }
 
 export default function MobilePlayer(props: MobilePlayerProps) {
-	const screen = useRef<HTMLCanvasElement>(null)
+	const player = useRef<SandboxedGameControllerHandle | null>(null)
 	const cleanup = useRef<(() => void) | null>(null);
+	const playerVersion = useSignal(0);
 	
 	const run = () => {
 		if (cleanup.current) cleanup.current();
-		const res = runGame(props.code, screen.current!, (_) => { })
-		if (res?.error) console.error(res.error.raw)
-		cleanup.current = res!.cleanup;
-		return res?.cleanup
+		player.current?.run(props.code)
+		cleanup.current = () => player.current?.stop();
+		return cleanup.current
 	}
 
 	useEffect(() => {
 		return run()
-	}, [props.code])
+	}, [props.code, playerVersion.value])
 
 	const pressKey = (key: string) => {
-		screen.current!.dispatchEvent(new KeyboardEvent('keydown', { key }))
+		player.current?.sendKey(key)
 	}
 
 	const keyTouches = useSignal<Record<string, number>>({})
@@ -79,7 +80,14 @@ export default function MobilePlayer(props: MobilePlayerProps) {
 
 			<div class={styles.player} id="player">
 				<div class={styles.screenContainer}>
-					<canvas class={styles.screen} ref={screen} width='1000' height='800' />
+					<SandboxedGameFrame
+						class={styles.screen}
+						onController={(controller) => {
+							player.current = controller;
+							playerVersion.value++;
+						}}
+						onError={(error) => console.error(error.raw)}
+					/>
 				</div>
 
 
diff --git a/src/components/big-interactive-pages/sandboxed-game-frame.tsx b/src/components/big-interactive-pages/sandboxed-game-frame.tsx
new file mode 100644
index 0000000000..211a9b6b82
--- /dev/null
+++ b/src/components/big-interactive-pages/sandboxed-game-frame.tsx
@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'preact/hooks'
+import type { JSX } from 'preact'
+import { bitmaps, muted, type NormalizedError } from '../../lib/state'
+import { SandboxedGameController, type SandboxedGameControllerHandle } from '../../lib/engine/sandbox-controller'
+import { logInfo } from '../popups-etc/help'
+
+interface SandboxedGameFrameProps {
+	class?: string
+	style?: JSX.CSSProperties
+	title?: string
+	onController?: (controller: SandboxedGameControllerHandle | null) => void
+	onError?: (error: NormalizedError) => void
+}
+
+export default function SandboxedGameFrame(props: SandboxedGameFrameProps) {
+	const iframe = useRef<HTMLIFrameElement>(null)
+	const controller = useRef<SandboxedGameController | null>(null)
+	// ponytail: Vite HMR in dev requires allow-same-origin for websocket/client storage access; prod enforces strict opaque-origin sandbox.
+	const sandboxFlags = import.meta.env.DEV ? 'allow-scripts allow-same-origin' : 'allow-scripts'
+
+	useEffect(() => {
+		if (!iframe.current) return
+
+		controller.current = new SandboxedGameController(iframe.current, {
+			onError: props.onError,
+			onConsole: ({ args, nums, isErr }) => {
+				logInfo.value = [...logInfo.value, { args, nums, isErr }]
+			},
+			onBitmaps: (_bitmaps) => {
+				bitmaps.value = _bitmaps
+			},
+		})
+		props.onController?.(controller.current)
+
+		return () => {
+			controller.current?.destroy()
+			controller.current = null
+			props.onController?.(null)
+		}
+	}, [])
+
+	useEffect(() => {
+		controller.current?.setMuted(muted.value)
+	}, [muted.value])
+
+	return (
+		<iframe
+			ref={iframe}
+			class={props.class}
+			style={{ border: 'none', ...props.style }}
+			src="/game-sandbox"
+			title={props.title ?? 'Sprig game sandbox'}
+			sandbox={sandboxFlags}
+			allow="autoplay"
+			referrerPolicy="no-referrer"
+			onLoad={() => controller.current?.markReady()}
+		/>
+	)
+}
diff --git a/src/components/big-interactive-pages/standalone-sandbox-player.tsx b/src/components/big-interactive-pages/standalone-sandbox-player.tsx
new file mode 100644
index 0000000000..0ff9996900
--- /dev/null
+++ b/src/components/big-interactive-pages/standalone-sandbox-player.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useRef } from 'preact/hooks'
+import SandboxedGameFrame from './sandboxed-game-frame'
+import type { SandboxedGameControllerHandle } from '../../lib/engine/sandbox-controller'
+
+interface StandaloneSandboxPlayerProps {
+	code: string
+	watchFile?: string
+	watchMs?: number
+	class?: string
+}
+
+export default function StandaloneSandboxPlayer(props: StandaloneSandboxPlayerProps) {
+	const player = useRef<SandboxedGameControllerHandle | null>(null)
+	const lastCode = useRef(props.code)
+
+	const run = (code: string) => {
+		lastCode.current = code
+		player.current?.run(code)
+	}
+
+	useEffect(() => {
+		run(props.code)
+	}, [props.code])
+
+	useEffect(() => {
+		if (!props.watchFile) return
+
+		const interval = window.setInterval(async () => {
+			try {
+				const response = await fetch(props.watchFile!)
+				if (!response.ok) return
+				const code = await response.text()
+				if (lastCode.current === code) return
+				run(code)
+			} catch (error) {
+				console.error(error)
+			}
+		}, props.watchMs ?? 1000)
+
+		return () => window.clearInterval(interval)
+	}, [props.watchFile, props.watchMs])
+
+	return (
+		<SandboxedGameFrame
+			class={props.class}
+			onController={(controller) => {
+				player.current = controller
+				if (controller) run(lastCode.current)
+			}}
+			onError={(error) => console.error(error.raw)}
+		/>
+	)
+}
diff --git a/src/components/codemirror-widgets/open-button.tsx b/src/components/codemirror-widgets/open-button.tsx
index f31d46135d..f86f70622d 100644
--- a/src/components/codemirror-widgets/open-button.tsx
+++ b/src/components/codemirror-widgets/open-button.tsx
@@ -1,7 +1,7 @@
-import { codeMirror, editors, openEditor, type EditorKind } from '../../lib/state'
+import { bitmaps, codeMirror, editors, gamePlayerRef, openEditor, type EditorKind } from '../../lib/state'
 import BitmapPreview from '../design-system/bitmap-preview'
 import styles from './open-button.module.css'
-import { runGameHeadless } from '../../lib/engine'
+import { extractLegendBitmaps } from '../../lib/engine/legend-extractor'
 
 interface OpenButtonProps {
 	kind: EditorKind
@@ -19,9 +19,14 @@ export default function OpenButton(props: OpenButtonProps) {
 
 
 				if (editors[props.kind].needsBitmaps) {
-					// Run the game headless to update bitmaps
 					const code = codeMirror.value?.state.doc.toString() ?? ''
-					runGameHeadless(code)
+					const extracted = extractLegendBitmaps(code)
+					if (extracted.length > 0) {
+						bitmaps.value = extracted
+					}
+					if (gamePlayerRef.value) {
+						gamePlayerRef.value.extractBitmaps(code)
+					}
 				}
 
 				openEditor.value = {
diff --git a/src/components/navbar-editor.tsx b/src/components/navbar-editor.tsx
index e9a741645a..0931887039 100644
--- a/src/components/navbar-editor.tsx
+++ b/src/components/navbar-editor.tsx
@@ -8,7 +8,7 @@ import {
 	theme,
 	switchTheme,
 	isNewSaveStrat,
-	screenRef, type GithubState,
+	gamePlayerRef, type GithubState,
 } from "../lib/state";
 import type { RoomState, ThemeType } from "../lib/state";
 import Button from "./design-system/button";
@@ -383,10 +383,8 @@ export default function EditorNavbar(props: EditorNavbarProps) {
 			resetState.value = "idle";
 	});
 
-	// We're listening to changes in screenRef because the game will only run if the screenRef is defined
-	// So we want to re-render the editor navbar when the screenRef changes so the game can actually run when it's defined
   useSignalEffect(() => {
-    screenRef.value;
+    gamePlayerRef.value;
   });
 
 	// usePopupCloseClick closes a popup when you click outside of its area
diff --git a/src/components/popups-etc/editor-modal.tsx b/src/components/popups-etc/editor-modal.tsx
index 19b8eb302a..b2638fa2f2 100644
--- a/src/components/popups-etc/editor-modal.tsx
+++ b/src/components/popups-etc/editor-modal.tsx
@@ -3,10 +3,10 @@ import { useEffect, useState } from 'preact/hooks'
 import { IoClose } from 'react-icons/io5'
 import { tinykeys } from 'tinykeys'
 import { usePopupCloseClick } from '../../lib/utils/popup-close-click'
-import { codeMirror, editors, openEditor, codeMirrorEditorText, _foldRanges, _widgets, type OpenEditor } from '../../lib/state'
+import { bitmaps, codeMirror, editors, gamePlayerRef, openEditor, codeMirrorEditorText, _foldRanges, _widgets, type OpenEditor } from '../../lib/state'
 import styles from './editor-modal.module.css'
 import levenshtein from 'js-levenshtein'
-import { runGameHeadless } from '../../lib/engine'
+import { extractLegendBitmaps } from '../../lib/engine/legend-extractor'
 
 const enum LastUpdater {
 	RESET,
@@ -115,8 +115,15 @@ export default function EditorModal() {
 			const editRange = _foldRanges.value[indexOfMinDistance]
 			const openEditorCode = code.slice(editRange?.from, editRange?.to)
 
-			// the map editor needs to get the bitmaps after running the code
-			if (openEditor.value?.kind === 'map') runGameHeadless(code ?? '');
+			if (openEditor.value?.kind === 'map') {
+				const extracted = extractLegendBitmaps(code ?? '')
+				if (extracted.length > 0) {
+					bitmaps.value = extracted
+				}
+				if (gamePlayerRef.value) {
+					gamePlayerRef.value.extractBitmaps(code ?? '')
+				}
+			}
 
 				text.value = openEditorCode;
 
diff --git a/src/lib/engine/index.ts b/src/lib/engine/index.ts
index 163d64eab2..96911edda1 100644
--- a/src/lib/engine/index.ts
+++ b/src/lib/engine/index.ts
@@ -1,16 +1,23 @@
-import { playTune } from './tune'
 import { normalizeGameError } from './error'
-import { bitmaps, type NormalizedError } from '../state'
+import type { NormalizedError } from '../state'
 import type { PlayTuneRes } from '../../../engine/src/api'
 import { baseEngine, textToTune } from '../../../engine/src/base'
 import { webEngine } from '../../../engine/src/web'
+import { playTune } from '../../../engine/src/web/tune'
 import * as Babel from "@babel/standalone"
 import TransformDetectInfiniteLoop, { BuildDuplicateFunctionDetector, dissallowBackticksInDoubleQuotes } from '../custom-babel-transforms'
-import {logInfo} from "../../components/popups-etc/help";
+import { extractLegendBitmaps } from './legend-extractor'
 
 interface RunResult {
 	error: NormalizedError | null
 	cleanup: () => void
+	stopTunes?: () => void
+}
+
+interface RunGameOptions {
+	onConsole?: (entry: { args: any[], nums: number[], isErr: boolean }) => void
+	onBitmaps?: (bitmaps: [string, string][]) => void
+	isMuted?: () => boolean
 }
 
 function getErrorObject(): Error {
@@ -57,20 +64,25 @@ export function _performSyntaxCheck(code: string): { error: NormalizedError | nu
 	return { error: transformAndThrowErrors(code, engineAPIKeys, () => {}), cleanup: () => void 0 };
 }
 
-export function runGame(code: string, canvas: HTMLCanvasElement, onPageError: (error: NormalizedError) => void): RunResult | undefined {
+export function runGame(code: string, canvas: HTMLCanvasElement, onPageError: (error: NormalizedError) => void, options: RunGameOptions = {}): RunResult | undefined {
 	const game = webEngine(canvas)
 	const tunes: PlayTuneRes[] = []
 	const timeouts: number[] = []
 	const intervals: number[] = []
+	let currentBitmaps: [string, string][] = []
 
 	const errorListener = (event: ErrorEvent) => {
 		onPageError(normalizeGameError({ kind: 'page', error: event.error }))
 	}
 	window.addEventListener('error', errorListener)
 
+	const stopTunes = () => {
+		tunes.forEach(tune => tune.end())
+	}
+
 	const cleanup = () => {
 		game.cleanup()
-		tunes.forEach(tune => tune.end())
+		stopTunes()
 		timeouts.forEach(clearTimeout)
 		intervals.forEach(clearInterval)
 		window.removeEventListener('error', errorListener)
@@ -93,14 +105,21 @@ export function runGame(code: string, canvas: HTMLCanvasElement, onPageError: (e
 			// @ts-ignore
 			if(JSON.stringify(_bitmaps) === "[null]") {
 				// @ts-ignore
-				bitmaps.value = [[]];
+				currentBitmaps = [[]];
 				throw new Error('The sprites passed into setLegend each need to be in square brackets, like setLegend([player, bitmap`...`]).')
 			} else {
-				bitmaps.value = _bitmaps;
+				currentBitmaps = _bitmaps;
 			}
-			return game.api.setLegend(...bitmaps.value)
+			options.onBitmaps?.(currentBitmaps)
+			return game.api.setLegend(...currentBitmaps)
 		},
 		playTune: (text: string, n: number) => {
+			if (options.isMuted?.()) {
+				return {
+					end() {},
+					isPlaying() { return false }
+				}
+			}
 			const tune = textToTune(text)
 			const playTuneRes = playTune(tune, n)
 			tunes.push(playTuneRes)
@@ -112,34 +131,39 @@ export function runGame(code: string, canvas: HTMLCanvasElement, onPageError: (e
 				console.log(...args)
 				const err = getErrorObject();
 				const nums = parseErrorStack(err);
-				logInfo.value = [...logInfo.value, {
+				const entry = {
 					args: args,
 					nums: nums as number[],
 					isErr: false
-				}]
+				}
+				options.onConsole?.(entry)
 			},
 			error: (...args: any[]) => {
 				console.error(...args)
 				const err = getErrorObject();
 				const nums = parseErrorStack(err);
-				logInfo.value = [...logInfo.value, {
+				const entry = {
 					args: args,
 					nums: nums as number[],
 					isErr: true
-				}]
+				}
+				options.onConsole?.(entry)
 			}
 		}
 	}
 
     const engineAPIKeys = Object.keys(api);
-	return { error: transformAndThrowErrors(code, engineAPIKeys, (transformedCode) => {
-		logInfo.value = [];
-		const fn = new Function(...engineAPIKeys, transformedCode.code!)
-		fn(...Object.values(api))
-	}), cleanup };
+	return {
+		error: transformAndThrowErrors(code, engineAPIKeys, (transformedCode) => {
+			const fn = new Function(...engineAPIKeys, transformedCode.code!)
+			fn(...Object.values(api))
+		}),
+		cleanup,
+		stopTunes,
+	};
 }
 
-export function runGameHeadless(code: string): void {
+export function runGameHeadless(code: string, onBitmaps?: (bitmaps: [string, string][]) => void): void {
 	const game = webEngine(document.createElement('canvas'))
 
 	const api = {
@@ -147,25 +171,27 @@ export function runGameHeadless(code: string): void {
 		setTimeout: () => {},
 		setInterval: () => {},
 		setLegend: (..._bitmaps: [string, string][]) => {
-			// this is bad; but for some reason i could not do _bitmaps === [undefined]
-			if(JSON.stringify(_bitmaps) === "[null]") {
-				// @ts-ignore
-				bitmaps.value = [[]];
-				throw new Error('The sprites passed into setLegend each need to be in square brackets, like setLegend([player, bitmap`...`]).');
-			} else
-				bitmaps.value = _bitmaps
+			if (JSON.stringify(_bitmaps) === "[null]") {
+				throw new Error('The sprites passed into setLegend each need to be in square brackets, like setLegend([player, bitmap`...`]).')
+			}
+			onBitmaps?.(_bitmaps)
 			return game.api.setLegend(..._bitmaps)
 		},
-		playTune: () => {}
+		playTune: () => ({
+			end() {},
+			isPlaying() { return false }
+		})
 	}
 
-	code = `"use strict";\n${code}`
-	try {
-		const fn = new Function(...Object.keys(api), code)
-		fn(...Object.values(api))
-	} catch (error: any) {
-		normalizeGameError({ kind: 'runtime', error })
-	}
+	const engineAPIKeys = Object.keys(api)
+	transformAndThrowErrors(code, engineAPIKeys, (transformedCode) => {
+		try {
+			const fn = new Function(...engineAPIKeys, transformedCode.code!)
+			fn(...Object.values(api))
+		} catch (error: any) {
+			normalizeGameError({ kind: 'runtime', error })
+		}
+	})
 
 	game.cleanup()
 }
diff --git a/src/lib/engine/legend-extractor.test.ts b/src/lib/engine/legend-extractor.test.ts
new file mode 100644
index 0000000000..6fc56a1fc5
--- /dev/null
+++ b/src/lib/engine/legend-extractor.test.ts
@@ -0,0 +1,87 @@
+import { expect, test } from 'vitest'
+import { extractLegendBitmaps } from './legend-extractor'
+
+test('extracts setLegend bitmap data without executing game code', () => {
+	const code = `
+		const player = "p"
+		const wall = "w"
+		setLegend(
+			[player, bitmap\`
+................
+................
+................
+................
+................
+................
+................
+................
+................
+................
+................
+................
+................
+................
+................
+................\`],
+			[wall, bitmap\`
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL
+LLLLLLLLLLLLLLLL\`]
+		)
+		throw new Error("must not execute")
+	`
+
+	expect(extractLegendBitmaps(code)).toEqual([
+		['p', '\n................\n................\n................\n................\n................\n................\n................\n................\n................\n................\n................\n................\n................\n................\n................\n................'],
+		['w', '\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL\nLLLLLLLLLLLLLLLL'],
+	])
+})
+
+test('extracts bitmaps defined in variables and object property keys', () => {
+	const code = `
+		const SPRITES = {
+			PLAYER: "p",
+			WALL: "w"
+		}
+		const playerSprite = bitmap \`0000\`
+		function resetLegend() {}
+		setLegend(
+			[SPRITES.PLAYER, playerSprite],
+			[SPRITES.WALL, bitmap \`1111\`]
+		)
+	`
+	expect(extractLegendBitmaps(code)).toEqual([
+		['p', '0000'],
+		['w', '1111'],
+	])
+})
+
+test('extracts bitmaps when setLegend contains comments with quotes or parens', () => {
+	const code = `
+		const p = "p"
+		const w = "w"
+		setLegend(
+			// don't break on player's apostrophe or paren :)
+			[p, bitmap\`0000\`],
+			/* block comment with "quotes" and (parens) */
+			[w, bitmap\`1111\`]
+		)
+	`
+	expect(extractLegendBitmaps(code)).toEqual([
+		['p', '0000'],
+		['w', '1111'],
+	])
+})
diff --git a/src/lib/engine/legend-extractor.ts b/src/lib/engine/legend-extractor.ts
new file mode 100644
index 0000000000..5fc92868c1
--- /dev/null
+++ b/src/lib/engine/legend-extractor.ts
@@ -0,0 +1,139 @@
+const getStringConstants = (code: string): Record<string, string> => {
+	const constants: Record<string, string> = {}
+	const stringAssignment = /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*(['"`])([\s\S]*?)\2/g
+	let match: RegExpExecArray | null
+
+	while ((match = stringAssignment.exec(code))) {
+		const [, name, , value] = match
+		if (name && value && value.length === 1) constants[name] = value
+	}
+
+	const objectAssignment = /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*\{([\s\S]*?)\}/g
+	while ((match = objectAssignment.exec(code))) {
+		const [, objName, body] = match
+		const propPattern = /([A-Za-z_$][\w$]*)\s*:\s*(['"`])([\s\S]*?)\2/g
+		let propMatch: RegExpExecArray | null
+		while ((propMatch = propPattern.exec(body!))) {
+			const [, propName, , val] = propMatch
+			if (propName && val && val.length === 1) {
+				constants[`${objName}.${propName}`] = val
+			}
+		}
+	}
+
+	return constants
+}
+
+const getBitmapConstants = (code: string): Record<string, string> => {
+	const bitmaps: Record<string, string> = {}
+	const bitmapAssignment = /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*bitmap\s*`([\s\S]*?)`/g
+	let match: RegExpExecArray | null
+	while ((match = bitmapAssignment.exec(code))) {
+		const [, name, content] = match
+		if (name && content) bitmaps[name] = content
+	}
+	return bitmaps
+}
+
+const readCallBody = (code: string, start: number): string | null => {
+	let depth = 1
+	let quote: string | null = null
+	let escaping = false
+	let inLineComment = false
+	let inBlockComment = false
+
+	for (let i = start; i < code.length; i++) {
+		const char = code[i]!
+		const nextChar = code[i + 1]
+
+		if (inLineComment) {
+			if (char === '\n') inLineComment = false
+			continue
+		}
+
+		if (inBlockComment) {
+			if (char === '*' && nextChar === '/') {
+				inBlockComment = false
+				i++
+			}
+			continue
+		}
+
+		if (quote) {
+			if (escaping) {
+				escaping = false
+				continue
+			}
+			if (char === '\\') {
+				escaping = true
+				continue
+			}
+			if (char === quote) quote = null
+			continue
+		}
+
+		if (char === '/' && nextChar === '/') {
+			inLineComment = true
+			i++
+			continue
+		}
+
+		if (char === '/' && nextChar === '*') {
+			inBlockComment = true
+			i++
+			continue
+		}
+
+		if (char === '"' || char === "'" || char === '`') {
+			quote = char
+			continue
+		}
+
+		if (char === '(') depth++
+		if (char === ')') depth--
+		if (depth === 0) return code.slice(start, i)
+	}
+
+	return null
+}
+
+const resolveSpriteKey = (expression: string, constants: Record<string, string>): string | null => {
+	const value = expression.trim()
+	const quoted = value.match(/^(['"`])(.+)\1$/)
+	if (quoted?.[2]?.length === 1) return quoted[2]
+	if (constants[value]) return constants[value]
+	return null
+}
+
+export const extractLegendBitmaps = (code: string): [string, string][] => {
+	const constants = getStringConstants(code)
+	const bitmapVars = getBitmapConstants(code)
+	const bitmaps: [string, string][] = []
+	const seenKeys = new Set<string>()
+
+	const setLegendRegex = /\bsetLegend\s*\(/g
+	let match: RegExpExecArray | null
+
+	while ((match = setLegendRegex.exec(code))) {
+		const bodyStart = match.index + match[0].length
+		const body = readCallBody(code, bodyStart)
+		setLegendRegex.lastIndex = bodyStart + (body?.length ?? 0) + 1
+		if (!body) continue
+
+		const entryPattern = /\[\s*([^,\]]+)\s*,\s*(?:bitmap\s*`([\s\S]*?)`|([A-Za-z_$][\w$]*))\s*\]/g
+		let entry: RegExpExecArray | null
+		while ((entry = entryPattern.exec(body))) {
+			const key = resolveSpriteKey(entry[1]!, constants)
+			const inlineContent = entry[2]
+			const varName = entry[3]?.trim()
+			const content = inlineContent !== undefined ? inlineContent : (varName ? bitmapVars[varName] : undefined)
+
+			if (key && content !== undefined && !seenKeys.has(key)) {
+				seenKeys.add(key)
+				bitmaps.push([key, content])
+			}
+		}
+	}
+
+	return bitmaps
+}
diff --git a/src/lib/engine/sandbox-controller.ts b/src/lib/engine/sandbox-controller.ts
new file mode 100644
index 0000000000..4984e259fd
--- /dev/null
+++ b/src/lib/engine/sandbox-controller.ts
@@ -0,0 +1,147 @@
+import type { NormalizedError } from '../state'
+import {
+	type ParentToSandboxMessage,
+	type SandboxToParentMessage,
+	isSandboxToParentMessage,
+} from './sandbox-protocol'
+
+interface SandboxedGameControllerOptions {
+	onError?: (error: NormalizedError) => void
+	onConsole?: (message: Extract<SandboxToParentMessage, { type: 'CONSOLE_LOG' | 'CONSOLE_ERROR' }>) => void
+	onBitmaps?: (bitmaps: [string, string][]) => void
+	onStopped?: () => void
+	onReady?: () => void
+}
+
+export interface SandboxedGameControllerHandle {
+	run(code: string): void
+	stop(): void
+	sendKey(key: string): void
+	setMuted(muted: boolean): void
+	focus(): void
+	extractBitmaps(code: string): void
+	destroy(): void
+}
+
+const makeChannelId = (): string => {
+	if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') return crypto.randomUUID()
+
+	const bytes = new Uint8Array(16)
+	crypto.getRandomValues(bytes)
+	return Array.from(bytes, byte => byte.toString(16).padStart(2, '0')).join('')
+}
+
+export class SandboxedGameController implements SandboxedGameControllerHandle {
+	private readonly channelId = makeChannelId()
+	private readonly frameWindow: Window
+	private readonly queuedMessages: ParentToSandboxMessage[] = []
+	private ready = false
+	private muted = false
+
+	constructor(
+		private readonly iframe: HTMLIFrameElement,
+		private readonly options: SandboxedGameControllerOptions = {}
+	) {
+		const frameWindow = iframe.contentWindow
+		if (!frameWindow) throw new Error('Sandbox iframe is not ready')
+		this.frameWindow = frameWindow
+		window.addEventListener('message', this.handleMessage)
+	}
+
+	markReady(): void {
+		if (this.ready) return
+		this.ready = true
+		this.post({ type: 'INIT', channelId: this.channelId })
+		while (this.queuedMessages.length > 0) this.post(this.queuedMessages.shift()!)
+		this.options.onReady?.()
+	}
+
+	run(code: string): void {
+		this.send({ type: 'RUN_GAME', channelId: this.channelId, code, muted: this.muted })
+		this.focus()
+	}
+
+	stop(): void {
+		this.send({ type: 'STOP_GAME', channelId: this.channelId })
+	}
+
+	sendKey(key: string): void {
+		this.send({ type: 'KEY_DOWN', channelId: this.channelId, key })
+	}
+
+	setMuted(muted: boolean): void {
+		this.muted = muted
+		this.send({ type: 'MUTE_CHANGED', channelId: this.channelId, muted })
+	}
+
+	focus(): void {
+		this.iframe.focus()
+	}
+
+	extractBitmaps(code: string): void {
+		this.send({ type: 'EXTRACT_BITMAPS', channelId: this.channelId, code })
+	}
+
+	destroy(): void {
+		this.stop()
+		window.removeEventListener('message', this.handleMessage)
+		this.queuedMessages.length = 0
+	}
+
+	private send(message: ParentToSandboxMessage): void {
+		if (!this.ready) {
+			this.queuedMessages.push(message)
+			return
+		}
+		this.post(message)
+	}
+
+	private post(message: ParentToSandboxMessage): void {
+		// Sandboxed iframes without allow-same-origin have an opaque origin, so
+		// targetOrigin must be '*'. The receiving window and channel id are still
+		// validated on both sides.
+		this.frameWindow.postMessage(message, '*')
+	}
+
+	private handleMessage = (event: MessageEvent): void => {
+		if (event.source !== this.frameWindow) return
+		if (!isSandboxToParentMessage(event.data)) return
+
+		if (event.data.type === 'READY') {
+			this.markReady()
+			return
+		}
+
+		if (event.data.channelId !== this.channelId) return
+
+		switch (event.data.type) {
+			case 'GAME_ERROR':
+				this.options.onError?.(event.data.error)
+				break
+			case 'CONSOLE_LOG':
+			case 'CONSOLE_ERROR':
+				this.options.onConsole?.(event.data)
+				break
+			case 'BITMAPS_CHANGED':
+				this.options.onBitmaps?.(event.data.bitmaps)
+				break
+			case 'SHORTCUT_KEY': {
+				const syntheticEvent = new KeyboardEvent('keydown', {
+					key: event.data.key,
+					code: event.data.code,
+					ctrlKey: event.data.ctrlKey,
+					metaKey: event.data.metaKey,
+					shiftKey: event.data.shiftKey,
+					altKey: event.data.altKey,
+					bubbles: true,
+					cancelable: true,
+				})
+				window.dispatchEvent(syntheticEvent)
+				break
+			}
+			case 'STOPPED':
+				this.options.onStopped?.()
+				break
+		}
+	}
+}
diff --git a/src/lib/engine/sandbox-protocol.test.ts b/src/lib/engine/sandbox-protocol.test.ts
new file mode 100644
index 0000000000..34a0c2a9c4
--- /dev/null
+++ b/src/lib/engine/sandbox-protocol.test.ts
@@ -0,0 +1,34 @@
+import { expect, test } from 'vitest'
+import { isParentToSandboxMessage, isSandboxToParentMessage, serializeLogArg } from './sandbox-protocol'
+
+test('validates parent to sandbox messages', () => {
+	expect(isParentToSandboxMessage({ type: 'RUN_GAME', channelId: 'abc', code: 'setMap(map``)', muted: false })).toBe(true)
+	expect(isParentToSandboxMessage({ type: 'KEY_DOWN', channelId: 'abc', key: 'w' })).toBe(true)
+	expect(isParentToSandboxMessage({ type: 'EXTRACT_BITMAPS', channelId: 'abc', code: 'setLegend([p, bitmap``])' })).toBe(true)
+	expect(isParentToSandboxMessage({ type: 'RUN_GAME', channelId: 'abc', muted: false })).toBe(false)
+	expect(isParentToSandboxMessage({ type: 'MUTE_CHANGED', channelId: 'abc', muted: 'false' })).toBe(false)
+	expect(isParentToSandboxMessage({ type: 'NAVIGATE_TOP', channelId: 'abc' })).toBe(false)
+})
+
+test('validates sandbox to parent messages', () => {
+	expect(isSandboxToParentMessage({ type: 'READY' })).toBe(true)
+	expect(isSandboxToParentMessage({
+		type: 'GAME_ERROR',
+		channelId: 'abc',
+		error: { raw: 'Error: no', description: 'Error: no' },
+	})).toBe(true)
+	expect(isSandboxToParentMessage({ type: 'CONSOLE_LOG', channelId: 'abc', args: ['hi'], nums: [1, 2], isErr: false })).toBe(true)
+	expect(isSandboxToParentMessage({ type: 'CONSOLE_LOG', channelId: 'abc', args: ['hi'], nums: [1, 2], isErr: true })).toBe(false)
+	expect(isSandboxToParentMessage({ type: 'SHORTCUT_KEY', channelId: 'abc', key: 'Enter', ctrlKey: false, metaKey: true, shiftKey: false, altKey: false })).toBe(true)
+	expect(isSandboxToParentMessage({ type: 'OPEN_POPUP', channelId: 'abc' })).toBe(false)
+})
+
+test('serializes console log arguments safely', () => {
+	expect(serializeLogArg('hello')).toBe('hello')
+	expect(serializeLogArg(42)).toBe(42)
+	expect(serializeLogArg(true)).toBe(true)
+	expect(serializeLogArg(null)).toBe(null)
+	expect(serializeLogArg(undefined)).toBe('undefined')
+	expect(serializeLogArg({ a: 1 })).toBe('{"a":1}')
+	expect(serializeLogArg(() => {})).toContain('() =>')
+})
diff --git a/src/lib/engine/sandbox-protocol.ts b/src/lib/engine/sandbox-protocol.ts
new file mode 100644
index 0000000000..1ecc7b0343
--- /dev/null
+++ b/src/lib/engine/sandbox-protocol.ts
@@ -0,0 +1,83 @@
+import type { NormalizedError } from '../state'
+
+export type SerializableLogArg = string | number | boolean | null
+
+export const serializeLogArg = (arg: unknown): SerializableLogArg => {
+	if (arg === null) return null
+	if (arg === undefined) return 'undefined'
+	if (['string', 'number', 'boolean'].includes(typeof arg)) return arg as SerializableLogArg
+
+	try {
+		const json = JSON.stringify(arg)
+		return json !== undefined ? json : String(arg)
+	} catch {
+		return String(arg)
+	}
+}
+
+export type ParentToSandboxMessage =
+	| { type: 'INIT', channelId: string }
+	| { type: 'RUN_GAME', channelId: string, code: string, muted: boolean }
+	| { type: 'STOP_GAME', channelId: string }
+	| { type: 'KEY_DOWN', channelId: string, key: string }
+	| { type: 'MUTE_CHANGED', channelId: string, muted: boolean }
+	| { type: 'EXTRACT_BITMAPS', channelId: string, code: string }
+
+export type SandboxToParentMessage =
+	| { type: 'READY' }
+	| { type: 'STOPPED', channelId: string }
+	| { type: 'GAME_ERROR', channelId: string, error: NormalizedError }
+	| { type: 'CONSOLE_LOG', channelId: string, args: SerializableLogArg[], nums: number[], isErr: false }
+	| { type: 'CONSOLE_ERROR', channelId: string, args: SerializableLogArg[], nums: number[], isErr: true }
+	| { type: 'BITMAPS_CHANGED', channelId: string, bitmaps: [string, string][] }
+	| { type: 'SHORTCUT_KEY', channelId: string, key: string, code?: string, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean, altKey: boolean }
+
+export const isParentToSandboxMessage = (value: unknown): value is ParentToSandboxMessage => {
+	if (!value || typeof value !== 'object') return false
+
+	const message = value as Record<string, unknown>
+	if (typeof message.type !== 'string') return false
+
+	if (message.type === 'INIT') return typeof message.channelId === 'string'
+	if (typeof message.channelId !== 'string') return false
+
+	switch (message.type) {
+		case 'RUN_GAME':
+			return typeof message.code === 'string' && typeof message.muted === 'boolean'
+		case 'STOP_GAME':
+			return true
+		case 'KEY_DOWN':
+			return typeof message.key === 'string'
+		case 'MUTE_CHANGED':
+			return typeof message.muted === 'boolean'
+		case 'EXTRACT_BITMAPS':
+			return typeof message.code === 'string'
+		default:
+			return false
+	}
+}
+
+export const isSandboxToParentMessage = (value: unknown): value is SandboxToParentMessage => {
+	if (!value || typeof value !== 'object') return false
+
+	const message = value as Record<string, unknown>
+	if (message.type === 'READY') return true
+	if (typeof message.type !== 'string' || typeof message.channelId !== 'string') return false
+
+	switch (message.type) {
+		case 'STOPPED':
+			return true
+		case 'GAME_ERROR':
+			return !!message.error && typeof message.error === 'object'
+		case 'CONSOLE_LOG':
+			return Array.isArray(message.args) && Array.isArray(message.nums) && message.isErr === false
+		case 'CONSOLE_ERROR':
+			return Array.isArray(message.args) && Array.isArray(message.nums) && message.isErr === true
+		case 'BITMAPS_CHANGED':
+			return Array.isArray(message.bitmaps)
+		case 'SHORTCUT_KEY':
+			return typeof message.key === 'string' && typeof message.ctrlKey === 'boolean' && typeof message.metaKey === 'boolean'
+		default:
+			return false
+	}
+}
diff --git a/src/lib/engine/sandbox-runner.ts b/src/lib/engine/sandbox-runner.ts
new file mode 100644
index 0000000000..18bff2b08d
--- /dev/null
+++ b/src/lib/engine/sandbox-runner.ts
@@ -0,0 +1,121 @@
+import type { NormalizedError } from '../state'
+import { runGame, runGameHeadless } from '.'
+import {
+	type ParentToSandboxMessage,
+	type SandboxToParentMessage,
+	isParentToSandboxMessage,
+	serializeLogArg,
+} from './sandbox-protocol'
+
+const canvas = document.getElementById('sprig-sandbox-screen') as HTMLCanvasElement | null
+
+if (!canvas) throw new Error('Missing Sprig sandbox canvas')
+
+let channelId: string | null = null
+let cleanup: (() => void) | undefined
+let stopActiveTunes: (() => void) | undefined
+let isMuted = false
+
+const serializeError = (error: NormalizedError): NormalizedError => ({
+	description: error.description,
+	line: error.line,
+	column: error.column,
+	raw: error.raw instanceof Error
+		? {
+			name: error.raw.name,
+			message: error.raw.message,
+			stack: error.raw.stack,
+		}
+		: String(error.raw),
+})
+
+const post = (message: SandboxToParentMessage): void => {
+	window.parent.postMessage(message, '*')
+}
+
+const stopGame = (): void => {
+	cleanup?.()
+	cleanup = undefined
+	stopActiveTunes = undefined
+	if (channelId) post({ type: 'STOPPED', channelId })
+}
+
+const run = (message: Extract<ParentToSandboxMessage, { type: 'RUN_GAME' }>): void => {
+	stopGame()
+	isMuted = message.muted
+
+	const result = runGame(
+		message.code,
+		canvas,
+		(error) => post({ type: 'GAME_ERROR', channelId: message.channelId, error: serializeError(error) }),
+		{
+			onConsole: ({ args, nums, isErr }) => post({
+				type: isErr ? 'CONSOLE_ERROR' : 'CONSOLE_LOG',
+				channelId: message.channelId,
+				args: args.map(serializeLogArg),
+				nums,
+				isErr,
+			}),
+			onBitmaps: (bitmaps) => post({ type: 'BITMAPS_CHANGED', channelId: message.channelId, bitmaps }),
+			isMuted: () => isMuted,
+		}
+	)
+
+	canvas.focus()
+	cleanup = result?.cleanup
+	stopActiveTunes = result?.stopTunes
+	if (result?.error) post({ type: 'GAME_ERROR', channelId: message.channelId, error: serializeError(result.error) })
+}
+
+window.addEventListener('message', (event) => {
+	if (event.source !== window.parent) return
+	if (!isParentToSandboxMessage(event.data)) return
+
+	const message = event.data
+	if (message.type === 'INIT') {
+		channelId = message.channelId
+		return
+	}
+
+	if (!channelId || message.channelId !== channelId) return
+
+	switch (message.type) {
+		case 'RUN_GAME':
+			run(message)
+			break
+		case 'STOP_GAME':
+			stopGame()
+			break
+		case 'KEY_DOWN':
+			canvas.dispatchEvent(new KeyboardEvent('keydown', { key: message.key }))
+			break
+		case 'MUTE_CHANGED':
+			isMuted = message.muted
+			if (isMuted) stopActiveTunes?.()
+			break
+		case 'EXTRACT_BITMAPS':
+			runGameHeadless(message.code, (bitmaps) => {
+				if (channelId) post({ type: 'BITMAPS_CHANGED', channelId, bitmaps })
+			})
+			break
+	}
+})
+
+window.addEventListener('keydown', (event) => {
+	if (event.ctrlKey || event.metaKey || event.key === 'Escape') {
+		if (channelId) {
+			post({
+				type: 'SHORTCUT_KEY',
+				channelId,
+				key: event.key,
+				code: event.code,
+				ctrlKey: event.ctrlKey,
+				metaKey: event.metaKey,
+				shiftKey: event.shiftKey,
+				altKey: event.altKey,
+			})
+		}
+	}
+})
+
+post({ type: 'READY' })
diff --git a/src/lib/state.ts b/src/lib/state.ts
index d5dcd34d47..be8de7e0e6 100644
--- a/src/lib/state.ts
+++ b/src/lib/state.ts
@@ -8,6 +8,7 @@ import BitmapEditor from '../components/subeditors/bitmap-editor'
 import ColorPickerEditor from '../components/subeditors/color-picker'
 import MapEditor from '../components/subeditors/map-editor'
 import SequencerEditor from '../components/subeditors/sequencer'
+import type { SandboxedGameControllerHandle } from './engine/sandbox-controller'
 import type { Game, SessionInfo, RoomParticipant } from './game-saving/account-types'
 export type { RoomParticipant } from './game-saving/account-types'
 
@@ -199,6 +200,7 @@ export const switchTheme = (themeType: ThemeType) => {
 }
 export const isNewSaveStrat = signal<boolean>(false)
 export const screenRef = signal<HTMLCanvasElement | null>(null);
+export const gamePlayerRef = signal<SandboxedGameControllerHandle | null>(null);
 export const cleanupRef = signal<(() => void) | undefined>(undefined);
 
 export interface ReviewState {
diff --git a/src/middleware.ts b/src/middleware.ts
index 1658c09f6b..75a7ecf4e8 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -2,7 +2,29 @@ import metrics from "../metrics";
 
 export async function onRequest({ request }: any, next: () => any) {
   const path = new URL(request.url).pathname.slice(1);
-  const response = await next();
+  let response = await next();
+
+  if (path === "game-sandbox" || path === "game-sandbox/") {
+	response.headers.set(
+		"Content-Security-Policy",
+		[
+			"default-src 'none'",
+			"script-src 'self' 'unsafe-eval'",
+			"style-src 'self' 'unsafe-inline'",
+			"img-src 'self' data:",
+			"media-src 'none'",
+			"font-src 'none'",
+			"connect-src 'none'",
+			"frame-src 'none'",
+			"object-src 'none'",
+			"base-uri 'none'",
+			"form-action 'none'",
+			"frame-ancestors 'self'",
+		].join("; ")
+	);
+	response.headers.set("Referrer-Policy", "no-referrer");
+	response.headers.set("X-Content-Type-Options", "nosniff");
+  }
 
   if(path.includes("~") || path.includes("editor")) {
 	response.headers.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0');
diff --git a/src/pages/deprecated-file-player.astro b/src/pages/deprecated-file-player.astro
index 88e941df0b..74c75a855a 100644
--- a/src/pages/deprecated-file-player.astro
+++ b/src/pages/deprecated-file-player.astro
@@ -1,10 +1,14 @@
 ---
 import '../global.css'
 import StandardHead from '../components/standard-head.astro'
+import StandaloneSandboxPlayer from '../components/big-interactive-pages/standalone-sandbox-player'
 
 const file = Astro.url.searchParams.get('file') ?? ''
 const codeRes = await fetch(file)
 const code = await codeRes.text()
+const watchMs = Astro.url.searchParams.has('watch')
+	? Number(Astro.url.searchParams.get('watch') || 1000)
+	: undefined
 ---
 
 <html lang='en'>
@@ -19,7 +23,7 @@ const code = await codeRes.text()
 				align-items: center;
 			}
 
-			#screen {
+			.screen {
 				max-width: 100%;
 				max-height: 100%;
 				background: black;
@@ -28,36 +32,13 @@ const code = await codeRes.text()
 	</head>
 	<body>
 		<div id='screen-container'>
-			<canvas id='screen' width='1000' height='800' tabindex='-1' />
+			<StandaloneSandboxPlayer
+				client:load
+				code={code}
+				watchFile={watchMs ? file : undefined}
+				watchMs={watchMs}
+				class="screen"
+			/>
 		</div>
-
-		<script define:vars={{ code }}>
-			window.__sprig_intitial_code__ = code
-		</script>
-		<script>
-			import { runGame } from '../lib/engine'
-
-			const screen = document.getElementById('screen') as HTMLCanvasElement
-			const { __sprig_intitial_code__ } = window as unknown as { __sprig_intitial_code__: string }
-			
-			let runRes = runGame(__sprig_intitial_code__, screen, (_) => {})
-			if (runRes.error) console.error(runRes.error.raw)
-			
-			const params = new URLSearchParams(window.location.search)
-			if (params.has('watch')) {
-				let oldCode = __sprig_intitial_code__
-				setInterval(async () => {
-					const codeRes = await fetch(params.get('file') || '')
-					const code = await codeRes.text()
-
-					if (oldCode !== code) {
-						oldCode = code
-						runRes.cleanup()
-						runRes = runGame(code, screen, (_) => {})
-						if (runRes.error) console.error(runRes.error.raw)
-					}
-				}, Number(params.get('watch') || 1000))
-			}
-		</script>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/pages/game-sandbox.astro b/src/pages/game-sandbox.astro
new file mode 100644
index 0000000000..21475975a9
--- /dev/null
+++ b/src/pages/game-sandbox.astro
@@ -0,0 +1,36 @@
+---
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Sprig Game Sandbox</title>
+		<style>
+			html,
+			body {
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				overflow: hidden;
+				background: #000000;
+			}
+
+			canvas {
+				display: block;
+				width: 100%;
+				height: 100%;
+				outline: none;
+				image-rendering: crisp-edges;
+				image-rendering: pixelated;
+			}
+		</style>
+	</head>
+	<body>
+		<canvas id="sprig-sandbox-screen" width="1000" height="800" tabindex="0"></canvas>
+		<script>
+			import '../lib/engine/sandbox-runner'
+		</script>
+	</body>
+</html>
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000000..c833a45ede
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,17 @@
+{
+	"headers": [
+		{
+			"source": "/_astro/(.*)",
+			"headers": [
+				{
+					"key": "Access-Control-Allow-Origin",
+					"value": "*"
+				},
+				{
+					"key": "Cross-Origin-Resource-Policy",
+					"value": "cross-origin"
+				}
+			]
+		}
+	]
+}