diff --git a/website/.flowconfig b/website/.flowconfig
new file mode 100644
index 00000000..1fed4453
--- /dev/null
+++ b/website/.flowconfig
@@ -0,0 +1,11 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]
diff --git a/website/contents/getting-started/litho.md b/website/contents/getting-started/litho.md
new file mode 100644
index 00000000..0a972968
--- /dev/null
+++ b/website/contents/getting-started/litho.md
@@ -0,0 +1,24 @@
+---
+path: "getting-started/litho"
+title: "Litho"
+hasPlayground: false
+---
+
+## Litho
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec
+sodales libero, sit amet tempus diam. Vivamus finibus vestibulum
+est. Vestibulum feugiat pellentesque diam vel hendrerit. Nunc
+pretium sollicitudin magna sed pharetra.
+
+Duis bibendum dapibus quam ac rutrum. Suspendisse potenti. Aliquam
+est sapien, gravida ac turpis iaculis, convallis rutrum justo. Sed
+est augue, pellentesque eleifend mauris non, ultrices aliquam purus.
+Duis sed lorem a lectus feugiat fringilla eu non elit.
+
+```c
+enum {
+  Test
+  Test2
+}
+```
diff --git a/website/docs/flexDirection.md b/website/contents/properties/flexDirection.md
similarity index 89%
rename from website/docs/flexDirection.md
rename to website/contents/properties/flexDirection.md
index 3520967d..51e11a67 100644
--- a/website/docs/flexDirection.md
+++ b/website/contents/properties/flexDirection.md
@@ -2,6 +2,7 @@
 path: "docs/flexDirection"
 title: "Flex Direction"
 hasPlayground: true
+editableProperties: ['flexDirection']
 ---
 
 ## Flex Direction
@@ -15,3 +16,10 @@ Duis bibendum dapibus quam ac rutrum. Suspendisse potenti. Aliquam
 est sapien, gravida ac turpis iaculis, convallis rutrum justo. Sed
 est augue, pellentesque eleifend mauris non, ultrices aliquam purus.
 Duis sed lorem a lectus feugiat fringilla eu non elit.
+
+```c
+enum {
+  Test
+  Test2
+}
+```
diff --git a/website/gatsby-config.js b/website/gatsby-config.js
index d403e36a..5f5d2992 100644
--- a/website/gatsby-config.js
+++ b/website/gatsby-config.js
@@ -12,10 +12,12 @@
 
 module.exports = {
   siteMetadata: {
-    title: 'Gatsby Default Starter',
+    title: 'Yoga Layout',
   },
   plugins: [
+    // using latest react version
     'gatsby-plugin-react-next',
+    // setting head data like title from within components
     'gatsby-plugin-react-helmet',
     {
       resolve: `gatsby-plugin-less`,
@@ -25,19 +27,35 @@ module.exports = {
         },
       },
     },
+    // plugin for importing antd components
     {
       resolve: 'gatsby-plugin-antd',
       options: {
         style: true,
       },
     },
+    // reading files from the file-system (used for markdown files)
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        path: `${__dirname}/docs`,
+        path: `${__dirname}/contents`,
         name: 'markdown-pages',
       },
     },
-    'gatsby-transformer-remark',
+    // parse markdown files, used for content files
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        // code-highlighting in markdown files
+        plugins: [
+          {
+            resolve: `gatsby-remark-prismjs`,
+            options: {
+              classPrefix: 'language-',
+            },
+          },
+        ],
+      },
+    },
   ],
 };
diff --git a/website/gatsby-node.js b/website/gatsby-node.js
index 20c54a85..28d5fc66 100644
--- a/website/gatsby-node.js
+++ b/website/gatsby-node.js
@@ -25,6 +25,7 @@ exports.createPages = ({boundActionCreators, graphql}) => {
             frontmatter {
               path
               hasPlayground
+              editableProperties
             }
             html
           }
diff --git a/website/package.json b/website/package.json
index b0b63cb5..052cada2 100644
--- a/website/package.json
+++ b/website/package.json
@@ -11,6 +11,7 @@
     "gatsby-plugin-less": "^1.1.4",
     "gatsby-plugin-react-helmet": "^2.0.3",
     "gatsby-plugin-react-next": "^1.0.8",
+    "gatsby-remark-prismjs": "^1.2.14",
     "gatsby-source-filesystem": "^1.5.18",
     "gatsby-transformer-remark": "^1.7.31",
     "immutable": "^4.0.0-rc.9",
@@ -25,9 +26,7 @@
   "main": "n/a",
   "scripts": {
     "build": "gatsby build",
-    "develop": "gatsby develop",
-    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "develop": "gatsby develop"
   },
   "devDependencies": {
     "prettier": "^1.10.2"
diff --git a/website/src/components/DocsSidebar.css b/website/src/components/DocsSidebar.css
index 451752ee..d8d1ff37 100644
--- a/website/src/components/DocsSidebar.css
+++ b/website/src/components/DocsSidebar.css
@@ -1,4 +1,15 @@
 .DocsSidebar {
+  height: 100%;
   width: 350px;
   padding: 20px;
+  border-right: 1px solid #dddfe2;
+}
+
+.DocsSidebar h3  {
+  margin-bottom: 0;
+}
+
+.DocsSidebar h4 {
+  margin-top: 10px;
+  margin-bottom: 5px;
 }
diff --git a/website/src/components/Page.css b/website/src/components/Page.css
index ec1b3bfc..70c80ebe 100644
--- a/website/src/components/Page.css
+++ b/website/src/components/Page.css
@@ -14,6 +14,13 @@ h2 {
   font-weight: 500;
 }
 
+.gatsby-highlight pre[class*="language-"] {
+  background: none;
+  padding: 0;
+  font-size: 14px;
+  margin-bottom: 15px;
+}
+
 .Page {
   display: flex;
   flex-direction: column;
@@ -25,3 +32,7 @@ h2 {
   flex-direction: column;
   flex-grow: 1;
 }
+
+.PageContent.withSpacing {
+  padding-top: 35px;
+}
diff --git a/website/src/components/Page.js b/website/src/components/Page.js
index 5a1680ea..0b010288 100644
--- a/website/src/components/Page.js
+++ b/website/src/components/Page.js
@@ -14,11 +14,13 @@ import React from 'react';
 import Toolbar from './Toolbar';
 import Footer from './Footer';
 import './Page.css';
+require('prismjs/themes/prism.css');
 
 type Props = {|
   children: any,
   title?: string,
   className?: string,
+  withSpacing?: boolean,
 |};
 
 export default (props: Props) => (
@@ -32,7 +34,9 @@ export default (props: Props) => (
       <title>Yoga Layout{props.title ? ` | ${props.title}` : ''}</title>
     </Head> */}
     <Toolbar />
-    <div className="PageContent">{props.children}</div>
+    <div className={`PageContent ${props.withSpacing ? 'withSpacing' : ''}`}>
+      {props.children}
+    </div>
     <Footer />
   </div>
 );
diff --git a/website/src/components/Playground/EditValue.js b/website/src/components/Playground/EditValue.js
new file mode 100644
index 00000000..89e3b15f
--- /dev/null
+++ b/website/src/components/Playground/EditValue.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2014-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ * @format
+ */
+
+import React, {Component} from 'react';
+import YogaEnumSelect from './YogaEnumSelect';
+import YogaPositionEditor from './YogaPositionEditor';
+import {Input} from 'antd';
+
+type Props<T, S> = {
+  property: string,
+  disabled?: boolean,
+  value: string | number,
+  onChange: (value: number) => void,
+};
+
+export default (props: Props<T, S>) => {
+  if (YogaEnumSelect.availableProperties.indexOf(props.property) > -1) {
+    return <YogaEnumSelect {...props} />;
+  } else if (
+    YogaPositionEditor.availableProperties.indexOf(props.property) > -1
+  ) {
+    return <YogaPositionEditor {...props} />;
+  } else {
+    return <Input type="text" {...props} />;
+  }
+};
diff --git a/website/src/components/Playground/Editor.js b/website/src/components/Playground/Editor.js
index 8e0f053a..a32429eb 100644
--- a/website/src/components/Playground/Editor.js
+++ b/website/src/components/Playground/Editor.js
@@ -11,12 +11,11 @@
  */
 
 import React, {Component} from 'react';
-import {Row, Col, Button, Tabs, Input} from 'antd';
-import YogaEnumSelect from './YogaEnumSelect';
+import {Row, Col, Button, Tabs} from 'antd';
+import EditValue from './EditValue';
 import type {LayoutRecordT} from './LayoutRecord';
 import type {Yoga$Direction} from 'yoga-layout';
 import InfoText from './InfoText';
-import YogaPositionEditor from './YogaPositionEditor';
 import './Editor.css';
 const TabPane = Tabs.TabPane;
 
@@ -64,8 +63,8 @@ export default class Editor extends Component<Props> {
                 direction
               </InfoText>
             </h2>
-            <YogaEnumSelect
-              property="DIRECTION"
+            <EditValue
+              property="direction"
               value={this.props.direction}
               onChange={e => this.props.onChangeSetting('direction', e)}
             />
@@ -73,9 +72,9 @@ export default class Editor extends Component<Props> {
               Flex direction
               <InfoText>Defining the direction of the main-axis</InfoText>
             </h2>
-            <YogaEnumSelect
+            <EditValue
               disabled={disabled}
-              property="FLEX_DIRECTION"
+              property="flexDirection"
               value={node ? node.flexDirection : ''}
               onChange={e => this.props.onChangeLayout('flexDirection', e)}
             />
@@ -89,7 +88,7 @@ export default class Editor extends Component<Props> {
                     up, relative to it's siblings
                   </InfoText>
                 </h2>
-                <Input
+                <EditValue
                   type="text"
                   disabled={disabled || selectedNodeIsRoot}
                   value={node ? node.flexGrow : ''}
@@ -106,7 +105,7 @@ export default class Editor extends Component<Props> {
                     anymore.
                   </InfoText>
                 </h2>
-                <Input
+                <EditValue
                   type="text"
                   disabled={disabled || selectedNodeIsRoot}
                   value={node ? node.flexShrink : ''}
@@ -123,9 +122,9 @@ export default class Editor extends Component<Props> {
                 Wrapping behaviour when child nodes don't fit into a single line
               </InfoText>
             </h2>
-            <YogaEnumSelect
+            <EditValue
               disabled={disabled}
-              property="WRAP"
+              property="flexWrap"
               value={node ? node.flexWrap : ''}
               onChange={e => this.props.onChangeLayout('flexWrap', e)}
             />
@@ -135,9 +134,9 @@ export default class Editor extends Component<Props> {
               Justify content
               <InfoText>Aligns child nodes along the main-axis</InfoText>
             </h2>
-            <YogaEnumSelect
+            <EditValue
               disabled={disabled}
-              property="JUSTIFY"
+              property="justifyContent"
               value={node ? node.justifyContent : ''}
               onChange={e => this.props.onChangeLayout('justifyContent', e)}
             />
@@ -146,9 +145,9 @@ export default class Editor extends Component<Props> {
               Align items
               <InfoText>Aligns child nodes along the cross-axis</InfoText>
             </h2>
-            <YogaEnumSelect
+            <EditValue
               disabled={disabled}
-              property="ALIGN"
+              property="alignItems"
               value={node ? node.alignItems : ''}
               onChange={e => this.props.onChangeLayout('alignItems', e)}
             />
@@ -159,9 +158,9 @@ export default class Editor extends Component<Props> {
                 Specifies alignment on the cross-axis for the node itself
               </InfoText>
             </h2>
-            <YogaEnumSelect
+            <EditValue
               disabled={disabled || selectedNodeIsRoot}
-              property="ALIGN"
+              property="alignSelf"
               value={node ? node.alignSelf : ''}
               onChange={e => this.props.onChangeLayout('alignSelf', e)}
             />
@@ -172,9 +171,9 @@ export default class Editor extends Component<Props> {
                 Alignment of lines along the cross-axis when wrapping
               </InfoText>
             </h2>
-            <YogaEnumSelect
+            <EditValue
               disabled={disabled}
-              property="ALIGN"
+              property="alignContent"
               value={node ? node.alignContent : ''}
               onChange={e => this.props.onChangeLayout('alignContent', e)}
             />
@@ -186,7 +185,7 @@ export default class Editor extends Component<Props> {
             </h2>
             <Row gutter={15}>
               <Col span={12}>
-                <Input
+                <EditValue
                   type="text"
                   placeholder="width"
                   disabled={disabled}
@@ -197,7 +196,7 @@ export default class Editor extends Component<Props> {
                 />
               </Col>
               <Col span={12}>
-                <Input
+                <EditValue
                   type="text"
                   placeholder="height"
                   disabled={disabled}
@@ -216,7 +215,7 @@ export default class Editor extends Component<Props> {
                 displaying videos
               </InfoText>
             </h2>
-            <Input
+            <EditValue
               type="text"
               placeholder="Aspect ratio"
               disabled={disabled}
@@ -228,7 +227,7 @@ export default class Editor extends Component<Props> {
 
             <h2>Box model</h2>
             {['padding', 'border', 'margin'].map(property => (
-              <YogaPositionEditor
+              <EditValue
                 property={property}
                 key={property}
                 value={node ? node[property] : undefined}
@@ -244,13 +243,13 @@ export default class Editor extends Component<Props> {
               </InfoText>
             </h2>
 
-            <YogaEnumSelect
+            <EditValue
               disabled={disabled}
-              property="POSITION_TYPE"
+              property="positionType"
               value={node ? node.positionType : ''}
               onChange={e => this.props.onChangeLayout('positionType', e)}
             />
-            <YogaPositionEditor
+            <EditValue
               property="position"
               value={node ? node.position : undefined}
               onChange={value => this.props.onChangeLayout('position', value)}
diff --git a/website/src/components/Playground/YogaEnumSelect.css b/website/src/components/Playground/YogaEnumSelect.css
index 7a434be1..57a4ec1b 100644
--- a/website/src/components/Playground/YogaEnumSelect.css
+++ b/website/src/components/Playground/YogaEnumSelect.css
@@ -1,4 +1,4 @@
-.YogaEnumSelect.ant-radio-group {
+.YogaEnumSelect {
   display: flex;
 }
 
@@ -7,3 +7,8 @@
   flex-basis: 0;
   text-align: center;
 }
+
+.YogaEnumSelect .ant-btn {
+  flex-grow: 1;
+  flex-basis: 0;
+}
diff --git a/website/src/components/Playground/YogaEnumSelect.js b/website/src/components/Playground/YogaEnumSelect.js
index afe51fb0..3da9e3e7 100644
--- a/website/src/components/Playground/YogaEnumSelect.js
+++ b/website/src/components/Playground/YogaEnumSelect.js
@@ -17,18 +17,32 @@ import './YogaEnumSelect.css';
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 
+const PROPERTY_LOOKUP = {
+  flexDirection: 'FLEX_DIRECTION',
+  direction: 'DIRECTION',
+  justifyContent: 'JUSTIFY',
+  alignSelf: 'ALIGN',
+  alignContent: 'ALIGN',
+  alignItems: 'ALIGN',
+  positionType: 'POSITION_TYPE',
+  flexWrap: 'WRAP',
+};
+
 type Props = {
-  property: string,
+  property: $Keys<typeof PROPERTY_LOOKUP>,
   disabled?: boolean,
   value: string | number,
   onChange: (value: number) => void,
 };
 
 export default class YogaEnumSelect extends Component<Props> {
+  static availableProperties = Object.keys(PROPERTY_LOOKUP);
+
   values: Array<{key: string, value: number}>;
 
   constructor({property}: Props) {
     super();
+    property = PROPERTY_LOOKUP[property];
     // $FlowFixMe
     this.values = Object.keys(yoga)
       .map(key => ({key, value: yoga[key]}))
@@ -42,29 +56,32 @@ export default class YogaEnumSelect extends Component<Props> {
   };
 
   render() {
-    const {property, ...props} = this.props;
+    let {property, ...props} = this.props;
+    property = PROPERTY_LOOKUP[property];
     const selected = this.values.find(
       ({key, value}) => value === this.props.value,
     );
     const replacer = new RegExp(`^${property}_`);
 
     return this.values.length > 3 ? (
-      <Dropdown
-        disabled={props.disabled}
-        overlay={
-          <Menu onClick={this.handleMenuClick}>
-            {this.values.map(({key, value}) => (
-              <Menu.Item key={key} value={value}>
-                {key.replace(replacer, '')}
-              </Menu.Item>
-            ))}
-          </Menu>
-        }>
-        <Button>
-          {selected ? selected.key.replace(replacer, '') : 'undefiend'}{' '}
-          <Icon type="down" />
-        </Button>
-      </Dropdown>
+      <div className="YogaEnumSelect">
+        <Dropdown
+          disabled={props.disabled}
+          overlay={
+            <Menu onClick={this.handleMenuClick}>
+              {this.values.map(({key, value}) => (
+                <Menu.Item key={key} value={value}>
+                  {key.replace(replacer, '')}
+                </Menu.Item>
+              ))}
+            </Menu>
+          }>
+          <Button>
+            {selected ? selected.key.replace(replacer, '') : ''}
+            <Icon type="down" />
+          </Button>
+        </Dropdown>
+      </div>
     ) : (
       <RadioGroup
         {...props}
diff --git a/website/src/components/Playground/YogaPositionEditor.js b/website/src/components/Playground/YogaPositionEditor.js
index cfcdf7a0..dbace9bf 100644
--- a/website/src/components/Playground/YogaPositionEditor.js
+++ b/website/src/components/Playground/YogaPositionEditor.js
@@ -18,11 +18,13 @@ import './YogaPositionEditor.css';
 
 type Props = {
   value: PositionRecordT,
-  property: string,
+  property: 'position' | 'margin' | 'padding' | 'border',
   onChange: (value: PositionRecordT) => void,
 };
 
 export default class YogaPositionEditor extends Component<Props> {
+  static availableProperties = ['position', 'margin', 'padding', 'border'];
+
   static defaultProps = {
     value: PositionRecord(),
   };
diff --git a/website/src/components/Playground/index.js b/website/src/components/Playground/index.js
index b30941fb..bae542c7 100644
--- a/website/src/components/Playground/index.js
+++ b/website/src/components/Playground/index.js
@@ -34,6 +34,7 @@ type Props = {
   showGuides: boolean,
   className?: string,
   height?: string | number,
+  persist?: boolean,
   renderSidebar?: (layoutDefinition: LayoutRecordT, onChange: Function) => any,
 };
 
@@ -53,7 +54,7 @@ export default class Playground extends Component<Props, State> {
 
   static defaultProps = {
     layoutDefinition: LayoutRecord({
-      width: 800,
+      width: 700,
       height: 400,
       justifyContent: yoga.JUSTIFY_SPACE_BETWEEN,
       alignItems: yoga.ALIGN_FLEX_START,
@@ -65,14 +66,15 @@ export default class Playground extends Component<Props, State> {
         bottom: '10',
       }),
       margin: PositionRecord({
-        left: '20',
-        top: '70',
+        left: '30',
+        top: '30',
       }),
     }),
     direction: yoga.DIRECTION_LTR,
     maxDepth: 3,
     showCode: false,
     showGuides: true,
+    persist: false,
   };
 
   state = {
@@ -144,8 +146,9 @@ export default class Playground extends Component<Props, State> {
     const {selectedNodePath, layoutDefinition} = this.state;
     if (selectedNodePath) {
       const index = selectedNodePath.pop();
-      const path = getPath(selectedNodePath).concat('children');
-      const updatedChildren = layoutDefinition.getIn(path).delete(index);
+      const updatedChildren = layoutDefinition
+        .getIn(getPath(selectedNodePath))
+        .delete(index);
       this.modifyAtPath(path, updatedChildren);
       this.setState({selectedNodePath: null});
     }
@@ -154,8 +157,9 @@ export default class Playground extends Component<Props, State> {
   onAdd = () => {
     const {selectedNodePath, layoutDefinition} = this.state;
     if (selectedNodePath) {
-      const path = getPath(selectedNodePath).concat('children');
-      const updatedChildren = layoutDefinition.getIn(path).push(LayoutRecord());
+      const updatedChildren = layoutDefinition
+        .getIn(getPath(selectedNodePath))
+        .push(LayoutRecord());
       this.modifyAtPath(
         path,
         updatedChildren,
@@ -177,9 +181,11 @@ export default class Playground extends Component<Props, State> {
       selectedNodePath,
     });
 
-    window.location.hash = btoa(
-      JSON.stringify(this.removeUnchangedProperties(layoutDefinition)),
-    );
+    if (this.props.persist) {
+      window.location.hash = btoa(
+        JSON.stringify(this.removeUnchangedProperties(layoutDefinition)),
+      );
+    }
   }
 
   removeUnchangedProperties = (node: LayoutRecordT): Object => {
@@ -306,7 +312,7 @@ export default class Playground extends Component<Props, State> {
         <div className={`PlaygroundContainer ${this.props.className || ''}`}>
           <div>
             {this.props.renderSidebar(
-              this.state.layoutDefinition,
+              layoutDefinition.getIn(getPath(selectedNodePath)),
               this.onChangeLayout,
             )}
           </div>
diff --git a/website/src/pages/docs/index.js b/website/src/pages/docs/index.js
index 851077ed..d195abd7 100644
--- a/website/src/pages/docs/index.js
+++ b/website/src/pages/docs/index.js
@@ -16,8 +16,15 @@ import Page from '../../components/Page';
 import Padded from '../../components/Padded';
 import {Row, Col} from 'antd';
 
-export default () => (
-  <Page>
+const CATEGORY_TITLE = {
+  'getting-started': 'Getting Started',
+  properties: 'Properties',
+  examples: 'Examples',
+  contributing: 'Contributing',
+};
+
+export default ({data}) => (
+  <Page withSpacing>
     <Padded>
       <h1>Documentation</h1>
       <p>
@@ -29,65 +36,41 @@ export default () => (
         nec leo pharetra fermentum.
       </p>
       <Row>
-        <Col md={6} sm={12} xs={24}>
-          <h2>Getting Started</h2>
-          <Link to="">Litho</Link>
-          <br />
-          <Link to="">ComponentKit</Link>
-          <br />
-          <Link to="">React Native</Link>
-          <br />
-          <Link to="">Addin Yoga to a project</Link>
-        </Col>
-        <Col md={6} sm={12} xs={24}>
-          <h2>Properties</h2>
-          <Link to="">Width and height</Link>
-          <br />
-          <Link to="">Max/min width and height</Link>
-          <br />
-          <Link to="docs/flexDirection">Flex direction</Link>
-          <br />
-          <Link to="">Justify content</Link>
-          <br />
-          <Link to="">Align items/self</Link>
-          <br />
-          <Link to="">Flex basis, grow and shrink</Link>
-          <br />
-          <Link to="">Margins, paddings, and borders</Link>
-          <br />
-          <Link to="">Flex wrap</Link>
-          <br />
-          <Link to="">Align content</Link>
-          <br />
-          <Link to="">Absolute layout</Link>
-          <br />
-          <Link to="">Aspect ratio</Link>
-          <br />
-          <Link to="">Layout direction</Link>
-        </Col>
-        <Col md={6} sm={12} xs={24}>
-          <h2>Examples</h2>
-          <Link to="">Overlays</Link>
-          <br />
-          <Link to="">Floating buttons</Link>
-          <br />
-          <Link to="">Flexible text</Link>
-        </Col>
-        <Col md={6} sm={12} xs={24}>
-          <h2>Contributing</h2>
-          <Link to="">Check out the code</Link>
-          <br />
-          <Link to="">Running the test suite</Link>
-          <br />
-          <Link to="">Making a change</Link>
-          <br />
-          <Link to="">Adding a test</Link>
-          <br />
-          <Link to="">Adding documentation</Link>
-          <br />
-          <Link to="">Opening a pull request</Link>
-        </Col>
+        {['getting-started', 'properties', 'examples', 'contributing'].map(
+          category => (
+            <Col md={6} sm={12} xs={24} key={category}>
+              <h2>{CATEGORY_TITLE[category]}</h2>
+              {data.allMarkdownRemark.edges
+                .filter(
+                  ({node}) =>
+                    node.fileAbsolutePath.indexOf(`/${category}/`) > -1,
+                )
+                .map(({node}) => (
+                  <Link key={node.id} to={node.frontmatter.path}>
+                    {node.frontmatter.title}
+                  </Link>
+                ))}
+            </Col>
+          ),
+        )}
       </Row>
     </Padded>
   </Page>
 );
+
+export const query = graphql`
+  query IndexQuery {
+    allMarkdownRemark {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+            path
+          }
+          fileAbsolutePath
+        }
+      }
+    }
+  }
+`;
diff --git a/website/src/pages/playground.js b/website/src/pages/playground.js
index 176ca788..cc86fc76 100644
--- a/website/src/pages/playground.js
+++ b/website/src/pages/playground.js
@@ -16,6 +16,6 @@ import Playground from '../components/Playground';
 
 export default () => (
   <Page title="Playground">
-    <Playground height="100%" />
+    <Playground height="100%" selectedNodePath={[]} persist />
   </Page>
 );
diff --git a/website/src/templates/withPlayground.js b/website/src/templates/withPlayground.js
index 78463fa5..090b59da 100644
--- a/website/src/templates/withPlayground.js
+++ b/website/src/templates/withPlayground.js
@@ -14,25 +14,45 @@ import React from 'react';
 import Page from '../components/Page';
 import Playground from '../components/Playground';
 import DocsSidebar from '../components/DocsSidebar';
-import YogaEnumSelect from '../components/Playground/YogaEnumSelect';
+import EditValue from '../components/Playground/EditValue';
+import Link from 'gatsby-link';
+import {Button, Icon, Row, Col} from 'antd';
 
-export default ({pathContext}) => {
-  return (
-    <Page>
-      <Playground
-        selectedNodePath={[]}
-        showGuides={false}
-        renderSidebar={(layout, onChange) => (
-          <DocsSidebar>
-            <div dangerouslySetInnerHTML={{__html: pathContext.html}} />
-            <YogaEnumSelect
-              property="FLEX_DIRECTION"
-              value={layout.flexDirection}
-              onChange={e => onChange('flexDirection', e)}
-            />
-          </DocsSidebar>
-        )}
-      />
-    </Page>
-  );
-};
+export default ({pathContext}) => (
+  <Page>
+    <Playground
+      selectedNodePath={[]}
+      showGuides={false}
+      renderSidebar={(layout, onChange) => (
+        <DocsSidebar>
+          <Link to="/docs">
+            <Icon type="left-circle-o" /> back to overview
+          </Link>
+          <div dangerouslySetInnerHTML={{__html: pathContext.html}} />
+          {pathContext.frontmatter.editableProperties && (
+            <Row type="flex" align="bottom">
+              <Col span={12}>
+                <h3>Try it out</h3>
+              </Col>
+              <Col span={12}>
+                <Link to="/playground">
+                  <Icon type="export" /> Open in playground
+                </Link>
+              </Col>
+            </Row>
+          )}
+          {(pathContext.frontmatter.editableProperties || []).map(prop => (
+            <div key={prop}>
+              <h4>{prop}</h4>
+              <EditValue
+                property={prop}
+                value={layout[prop]}
+                onChange={e => onChange(prop, e)}
+              />
+            </div>
+          ))}
+        </DocsSidebar>
+      )}
+    />
+  </Page>
+);
diff --git a/website/src/templates/withoutPlayground.js b/website/src/templates/withoutPlayground.js
index 7c1bc06c..5816775b 100644
--- a/website/src/templates/withoutPlayground.js
+++ b/website/src/templates/withoutPlayground.js
@@ -13,11 +13,16 @@
 import React from 'react';
 import Page from '../components/Page';
 import Padded from '../components/Padded';
+import {Icon} from 'antd';
+import Link from 'gatsby-link';
 
 export default ({pathContext}) => {
   return (
-    <Page>
+    <Page withSpacing>
       <Padded>
+        <Link to="/docs">
+          <Icon type="left-circle-o" /> back to overview
+        </Link>
         <div dangerouslySetInnerHTML={{__html: pathContext.html}} />
       </Padded>
     </Page>
diff --git a/website/yarn.lock b/website/yarn.lock
index 125669f3..0f722009 100644
--- a/website/yarn.lock
+++ b/website/yarn.lock
@@ -3423,6 +3423,15 @@ gatsby-react-router-scroll@^1.0.10:
     scroll-behavior "^0.9.9"
     warning "^3.0.0"
 
+gatsby-remark-prismjs@^1.2.14:
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-prismjs/-/gatsby-remark-prismjs-1.2.14.tgz#3f5fd2ac1d5a174673a6b6fa63b4e4fa526d36c0"
+  dependencies:
+    babel-runtime "^6.26.0"
+    parse-numeric-range "0.0.2"
+    prismjs "^1.11.0"
+    unist-util-visit "^1.3.0"
+
 gatsby-source-filesystem@^1.5.18:
   version "1.5.18"
   resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.18.tgz#e2cb96a2c248c304e58ba3d0142316a695d3ef35"
@@ -6144,6 +6153,10 @@ parse-latin@^4.0.0:
     unist-util-modify-children "^1.0.0"
     unist-util-visit-children "^1.0.0"
 
+parse-numeric-range@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz#b4f09d413c7adbcd987f6e9233c7b4b210c938e4"
+
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -6858,7 +6871,7 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-prismjs@^1.8.4:
+prismjs@^1.11.0, prismjs@^1.8.4:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.11.0.tgz#297aef33eb79421bfdb19273a5092ca515970d29"
   optionalDependencies:
@@ -9216,7 +9229,7 @@ unist-util-visit-children@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit-children/-/unist-util-visit-children-1.1.1.tgz#eba63b371116231181068837118b6e6e10ec8844"
 
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1:
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1, unist-util-visit@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.3.0.tgz#41ca7c82981fd1ce6c762aac397fc24e35711444"
   dependencies: