diff --git a/website/src/components/Playground/index.css b/website/src/components/Playground/index.css
index f492f54a..d051ba11 100644
--- a/website/src/components/Playground/index.css
+++ b/website/src/components/Playground/index.css
@@ -49,6 +49,10 @@
   align-self: center;
 }
 
+.Playground.standalone > .YogaNode {
+  transform: translateX(-175px);
+}
+
 .Playground .Actions {
   padding: 15px;
 }
diff --git a/website/src/components/Playground/index.js b/website/src/components/Playground/index.js
index 00f803c4..586d17e5 100644
--- a/website/src/components/Playground/index.js
+++ b/website/src/components/Playground/index.js
@@ -218,7 +218,7 @@ export default class Playground extends Component<Props, State> {
 
     const playground = (
       <div
-        className="Playground"
+        className={`Playground ${this.props.renderSidebar ? '' : 'standalone'}`}
         onMouseDown={this.onMouseDown}
         style={{height, maxHeight: height}}
         ref={ref => {
@@ -232,47 +232,49 @@ export default class Playground extends Component<Props, State> {
           direction={direction}
           showGuides={this.props.showGuides}
         />
-        <Sidebar>
-          <div className="Actions">
-            <Row gutter={15}>
-              <Col span={12}>
-                <CodeGenerators
-                  layoutDefinition={layoutDefinition}
-                  direction={direction}
-                />
-              </Col>
-              <Col span={12}>
-                <URLShortener />
-              </Col>
-            </Row>
-          </div>
-          {this.state.selectedNodePath ? (
-            <Editor
-              node={selectedNode}
-              selectedNodeIsRoot={
-                selectedNodePath ? selectedNodePath.length === 0 : false
-              }
-              onChangeLayout={this.onChangeLayout}
-              onChangeSetting={(key, value) => this.setState({[key]: value})}
-              direction={direction}
-              onRemove={
-                selectedNodePath && selectedNodePath.length > 0
-                  ? this.onRemove
-                  : undefined
-              }
-              onAdd={
-                selectedNodePath &&
-                selectedNodePath.length < this.props.maxDepth
-                  ? this.onAdd
-                  : undefined
-              }
-            />
-          ) : (
-            <div className="NoContent">
-              Select a node to edit its properties
+        {!this.props.renderSidebar && (
+          <Sidebar>
+            <div className="Actions">
+              <Row gutter={15}>
+                <Col span={12}>
+                  <CodeGenerators
+                    layoutDefinition={layoutDefinition}
+                    direction={direction}
+                  />
+                </Col>
+                <Col span={12}>
+                  <URLShortener />
+                </Col>
+              </Row>
             </div>
-          )}
-        </Sidebar>
+            {this.state.selectedNodePath ? (
+              <Editor
+                node={selectedNode}
+                selectedNodeIsRoot={
+                  selectedNodePath ? selectedNodePath.length === 0 : false
+                }
+                onChangeLayout={this.onChangeLayout}
+                onChangeSetting={(key, value) => this.setState({[key]: value})}
+                direction={direction}
+                onRemove={
+                  selectedNodePath && selectedNodePath.length > 0
+                    ? this.onRemove
+                    : undefined
+                }
+                onAdd={
+                  selectedNodePath &&
+                  selectedNodePath.length < this.props.maxDepth
+                    ? this.onAdd
+                    : undefined
+                }
+              />
+            ) : (
+              <div className="NoContent">
+                Select a node to edit its properties
+              </div>
+            )}
+          </Sidebar>
+        )}
       </div>
     );
 
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index e3a8d5be..1061eef1 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -58,7 +58,7 @@ const HeroSection = () => (
 const PlaygroundSection = () => (
   <Row>
     <Col xl={24} lg={0} md={0} sm={0} xs={0}>
-      <Playground selectedNodePath={[]} showGuides={false} height={600} />
+      <Playground selectedNodePath={[]} showGuides={false} height={601} />
     </Col>
   </Row>
 );