diff --git a/site/src/routes/repl/_components/AppControls/index.svelte b/site/src/routes/repl/_components/AppControls/index.svelte
index edc4c8e81f..368136bb6e 100644
--- a/site/src/routes/repl/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/_components/AppControls/index.svelte
@@ -291,6 +291,7 @@ export default app;` });
 		font-size: 1.6rem;
 		opacity: 0.7;
 		outline: none;
+		flex: 1;
 	}
 
 	input:focus {
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
index 6a58daca3b..97bf44acc1 100644
--- a/site/src/routes/repl/index.svelte
+++ b/site/src/routes/repl/index.svelte
@@ -111,6 +111,9 @@
 		`https://unpkg.com/svelte@${version}`;
 
 	const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
+
+	// needed for context API example
+	const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN;`;
 </script>
 
 <style>
@@ -171,6 +174,12 @@
 	/>
 
 	{#if process.browser}
-		<Repl bind:this={repl} {svelteUrl} {rollupUrl} {relaxed}/>
+		<Repl
+			bind:this={repl}
+			{svelteUrl}
+			{rollupUrl}
+			{relaxed}
+			setup={mapbox_setup}
+		/>
 	{/if}
 </div>
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index d64e3b9b21..2bb812e1f3 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -97,6 +97,9 @@
 
 	const svelteUrl = `https://unpkg.com/svelte@beta`;
 	const rollupUrl = `https://unpkg.com/rollup@1/dist/rollup.browser.js`;
+
+	// needed for context API tutorial
+	const mapbox_setup = `window.MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN;`;
 </script>
 
 <style>
@@ -242,6 +245,14 @@
 	</div>
 
 	<div class="tutorial-repl">
-		<Repl bind:this={repl} {svelteUrl} {rollupUrl} orientation="rows" on:change={handle_change} relaxed/>
+		<Repl
+			bind:this={repl}
+			{svelteUrl}
+			{rollupUrl}
+			orientation="rows"
+			on:change={handle_change}
+			setup={mapbox_setup}
+			relaxed
+		/>
 	</div>
 </div>