diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
index aea23e51d1..ea8f2086ea 100644
--- a/site/src/components/Repl/Output/index.svelte
+++ b/site/src/components/Repl/Output/index.svelte
@@ -19,6 +19,7 @@
 	export let runtimeError;
 	export let compileOptions;
 	export let embedded;
+	export let show_props;
 
 	// refs
 	let viewer;
@@ -121,7 +122,7 @@
 </div>
 
 {#if view === 'result'}
-	<SplitPane type="vertical" pos={67}>
+	<SplitPane type="vertical" pos={67} fixed={!show_props} fixed_pos={100}>
 		<div slot="a">
 			{#if bundle}
 				<Viewer
@@ -143,27 +144,29 @@
 		</div>
 
 		<section slot="b">
-			<h3>Props editor</h3>
-
-			{#if props}
-				{#if props.length > 0}
-					<div class="props">
-						{#each props.sort() as prop (prop)}
-							<code style="display: block; whitespace: pre;">{prop}</code>
-
-							<!-- TODO `bind:this={propEditors[prop]}` — currently fails -->
-							<PropEditor
-								value={$values_store[prop]}
-								on:change="{e => setPropFromEditor(prop, e.detail.value)}"
-							/>
-						{/each}
-					</div>
-				{:else}
-					<div style="padding: 0.5em" class="linkify">
-						<!-- TODO explain distincion between logic-less and logic-ful components? -->
-						<!-- TODO style the <a> so it looks like a link -->
-						<p style="font-size: 1.3rem; color: var(--second)">This component has no props — <a href="guide#external-properties">declare props with the export keyword</a></p>
-					</div>
+			{#if show_props}
+				<h3>Props editor</h3>
+
+				{#if props}
+					{#if props.length > 0}
+						<div class="props">
+							{#each props.sort() as prop (prop)}
+								<code style="display: block; whitespace: pre;">{prop}</code>
+
+								<!-- TODO `bind:this={propEditors[prop]}` — currently fails -->
+								<PropEditor
+									value={$values_store[prop]}
+									on:change="{e => setPropFromEditor(prop, e.detail.value)}"
+								/>
+							{/each}
+						</div>
+					{:else}
+						<div style="padding: 0.5em" class="linkify">
+							<!-- TODO explain distincion between logic-less and logic-ful components? -->
+							<!-- TODO style the <a> so it looks like a link -->
+							<p style="font-size: 1.3rem; color: var(--second)">This component has no props — <a href="guide#external-properties">declare props with the export keyword</a></p>
+						</div>
+					{/if}
 				{/if}
 			{/if}
 		</section>
diff --git a/site/src/components/Repl/Output/replProxy.js b/site/src/components/Repl/Output/replProxy.js
index 4025dffe6b..3ed10593cf 100644
--- a/site/src/components/Repl/Output/replProxy.js
+++ b/site/src/components/Repl/Output/replProxy.js
@@ -1,90 +1,89 @@
 export default class ReplProxy {
-    constructor(iframe) {
-        this.iframe = iframe;
-        this.cmdId = 1;
-        this.pendingCmds = new Map();
-        this.onPropUpdate = null;
-        this.onFetchProgress = null;
-        this.handle_event = (ev) => this.handleReplMessage(ev);
-        window.addEventListener("message", this.handle_event, false);
-    }
+	constructor(iframe) {
+		this.iframe = iframe;
+		this.cmdId = 1;
+		this.pendingCmds = new Map();
+		this.onPropUpdate = null;
+		this.onFetchProgress = null;
+		this.handle_event = (ev) => this.handleReplMessage(ev);
+		window.addEventListener("message", this.handle_event, false);
+	}
 
-    destroy() {
-        window.removeEventListener("message", this.handle_event);
-    }
-  
-    iframeCommand(command, args) {
-        return new Promise( (resolve, reject) => {
-            this.cmdId = this.cmdId + 1; 
-            this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject });
-            this.iframe.contentWindow.postMessage({
-                action: command,
-                cmdId: this.cmdId,
-                args: args
-            }, '*')
-        });
-    }
+	destroy() {
+		window.removeEventListener("message", this.handle_event);
+	}
 
-    handleCommandMessage(cmdData) {
-        let action = cmdData.action;
-        let id = cmdData.cmdId;
-        let handler = this.pendingCmds.get(id);
-        if (handler) {
-           
-            this.pendingCmds.delete(id);
-            if (action == "cmdError") {
-                let { message, stack } = cmdData;
-                let e = new Error(message);
-                e.stack = stack;
-                console.log("repl cmd fail");
-                handler.reject(e)
-            }
+	iframeCommand(command, args) {
+		return new Promise( (resolve, reject) => {
+			this.cmdId = this.cmdId + 1;
+			this.pendingCmds.set(this.cmdId, { resolve: resolve, reject: reject });
+			this.iframe.contentWindow.postMessage({
+				action: command,
+				cmdId: this.cmdId,
+				args: args
+			}, '*')
+		});
+	}
 
-            if (action == "cmdOk") {
-                handler.resolve(cmdData.args)
-            }
-        } else {
-            console.error("command not found", id, cmdData, [...this.pendingCmds.keys()]);
-        } 
-    }
+	handleCommandMessage(cmdData) {
+		let action = cmdData.action;
+		let id = cmdData.cmdId;
+		let handler = this.pendingCmds.get(id);
+		if (handler) {
 
-    handleReplMessage(ev) {
-        
-        let action = ev.data.action;
-        if ( action == "cmdError" || action == "cmdOk" ) {
-           this.handleCommandMessage(ev.data);
-        }
+			this.pendingCmds.delete(id);
+			if (action == "cmdError") {
+				let { message, stack } = cmdData;
+				let e = new Error(message);
+				e.stack = stack;
+				console.log("repl cmd fail");
+				handler.reject(e)
+			}
 
-        if (action == "prop_update") {
-            let { prop, value } = ev.data.args;
-            if (this.onPropUpdate)
-                this.onPropUpdate(prop, value)
-        }
-        
-        if (action == "fetch_progress") {
-            if (this.onFetchProgress) 
-                this.onFetchProgress(ev.data.args.remaining)
-        }
-    }
+			if (action == "cmdOk") {
+				handler.resolve(cmdData.args)
+			}
+		} else {
+			console.error("command not found", id, cmdData, [...this.pendingCmds.keys()]);
+		}
+	}
 
-    eval(script) {
-        return this.iframeCommand("eval", { script: script });
-    }
+	handleReplMessage(ev) {
 
-    setProp(prop, value) {
-        return this.iframeCommand("set_prop", {prop, value})
-    }
+		let action = ev.data.action;
+		if ( action == "cmdError" || action == "cmdOk" ) {
+			this.handleCommandMessage(ev.data);
+		}
 
-    bindProps(props) {
-        return this.iframeCommand("bind_props", { props: props })
-    }
+		if (action == "prop_update") {
+			let { prop, value } = ev.data.args;
+			if (this.onPropUpdate)
+				this.onPropUpdate(prop, value)
+		}
 
-    handleLinks() {
-        return this.iframeCommand("catch_clicks", {});
-    }
+		if (action == "fetch_progress") {
+			if (this.onFetchProgress)
+				this.onFetchProgress(ev.data.args.remaining)
+		}
+	}
 
-    fetchImports(bundle) {
-       return this.iframeCommand("fetch_imports", { bundle })
-    }
+	eval(script) {
+		return this.iframeCommand("eval", { script: script });
+	}
 
+	setProp(prop, value) {
+		return this.iframeCommand("set_prop", {prop, value})
+	}
+
+	bindProps(props) {
+		return this.iframeCommand("bind_props", { props: props })
+	}
+
+	handleLinks() {
+		return this.iframeCommand("catch_clicks", {});
+	}
+
+	fetchImports(bundle) {
+		return this.iframeCommand("fetch_imports", { bundle })
+	}
 }
\ No newline at end of file
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
index 3466c13b26..4c87a43a60 100644
--- a/site/src/components/Repl/index.svelte
+++ b/site/src/components/Repl/index.svelte
@@ -11,6 +11,8 @@
 	export let version = 'beta'; // TODO change this to latest when the time comes
 	export let app;
 	export let embedded = false;
+	export let orientation = 'auto';
+	export let show_props = true;
 
 	export function toJSON() {
 		// TODO there's a bug here — Svelte hoists this function because
@@ -277,7 +279,12 @@
 
 <div class="container" bind:clientWidth={width}>
 	<div class="repl-inner" class:offset="{show_output}">
-		<SplitPane type="horizontal" fixed="{600 > width}" pos={60} fixed_pos={50}>
+		<SplitPane
+			type="{orientation === 'rows' ? 'vertical' : 'horizontal'}"
+			fixed="{600 > width}"
+			pos="{orientation === 'rows' ? 50 : 60}"
+			fixed_pos={50}
+		>
 			<section slot=a>
 				<Input
 					{component_store}
@@ -306,6 +313,7 @@
 					{sourceError}
 					{runtimeError}
 					{embedded}
+					{show_props}
 				/>
 			</section>
 		</SplitPane>
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index 6578a269de..5a96ca78f1 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -146,7 +146,7 @@
 	</div>
 
 	<div class="tutorial-repl">
-		<Repl {app}/>
+		<Repl {app} orientation="rows" show_props={false}/>
 	</div>
 
 </div>