diff --git a/website/contents/properties/absolute-layout.md b/website/contents/properties/absolute-layout.md
index 756da8fe..0e07e953 100644
--- a/website/contents/properties/absolute-layout.md
+++ b/website/contents/properties/absolute-layout.md
@@ -2,7 +2,10 @@
 path: "docs/absolute-layout"
 title: "Absolute Layout"
 hasPlayground: true
-editableProperties: ['positionType', 'position']
 ---
 
-## Absolute Layout
\ No newline at end of file
+## Absolute Layout
+
+<controls prop="positionType"></controls>
+
+<controls prop="position"></controls>
diff --git a/website/contents/properties/align-content.md b/website/contents/properties/align-content.md
index d4bee4e7..f1293eb0 100644
--- a/website/contents/properties/align-content.md
+++ b/website/contents/properties/align-content.md
@@ -2,7 +2,8 @@
 path: "docs/align-content"
 title: "Align Content"
 hasPlayground: true
-editableProperties: ['alignContent']
 ---
 
-## Align Content
\ No newline at end of file
+## Align Content
+
+<controls prop="alignContent"></controls>
diff --git a/website/contents/properties/align-items.md b/website/contents/properties/align-items.md
index df749a3c..2c0fb80a 100644
--- a/website/contents/properties/align-items.md
+++ b/website/contents/properties/align-items.md
@@ -2,7 +2,10 @@
 path: "docs/align-items"
 title: "Align Items / Self"
 hasPlayground: true
-editableProperties: ['alignItems', 'alignSelf']
 ---
 
-## Align Items / Self
\ No newline at end of file
+## Align Items / Self
+
+<controls prop="alignItems"></controls>
+
+<controls prop="alignSelf"></controls>
diff --git a/website/contents/properties/aspect-ratio.md b/website/contents/properties/aspect-ratio.md
index ecc2a6fc..02c795ec 100644
--- a/website/contents/properties/aspect-ratio.md
+++ b/website/contents/properties/aspect-ratio.md
@@ -2,7 +2,6 @@
 path: "docs/aspect-ratio"
 title: "Aspect Ratio"
 hasPlayground: true
-editableProperties: ['aspectRatio']
 ---
 
 ## Aspect Ratio
@@ -17,4 +16,6 @@ The aspect ratio property in Yoga has the following properties:
 - Defined as the ratio between the width and the height of a node e.g. if a node has an aspect ratio of 2 then its width is twice the size of its height.
 - Respects the Min and Max dimensions of an item.
 - Has higher priority than FlexGrow
-- If AspectRatio, Width, and Height are set then the cross dimension is overridden.
\ No newline at end of file
+- If AspectRatio, Width, and Height are set then the cross dimension is overridden.
+
+<controls prop="aspectRatio"></controls>
diff --git a/website/contents/properties/flex-direction.md b/website/contents/properties/flex-direction.md
index 701f0f59..2a97d147 100644
--- a/website/contents/properties/flex-direction.md
+++ b/website/contents/properties/flex-direction.md
@@ -2,7 +2,8 @@
 path: "docs/flex-direction"
 title: "Flex Direction"
 hasPlayground: true
-editableProperties: ['flexDirection']
 ---
 
-## Flex Direction
\ No newline at end of file
+## Flex Direction
+
+<controls prop="flexDirection"></controls>
diff --git a/website/contents/properties/flex-wrap.md b/website/contents/properties/flex-wrap.md
index 2ee1725f..a02b9855 100644
--- a/website/contents/properties/flex-wrap.md
+++ b/website/contents/properties/flex-wrap.md
@@ -2,7 +2,8 @@
 path: "docs/flex-wrap"
 title: "Flex Wrap"
 hasPlayground: true
-editableProperties: ['flexWrap']
 ---
 
-## Flex Wrap
\ No newline at end of file
+## Flex Wrap
+
+<controls prop="flexWrap"></controls>
diff --git a/website/contents/properties/flex.md b/website/contents/properties/flex.md
index 774c230c..db7a78e9 100644
--- a/website/contents/properties/flex.md
+++ b/website/contents/properties/flex.md
@@ -2,7 +2,6 @@
 path: "docs/flex"
 title: "Flex Basis, Grow, and Shrink"
 hasPlayground: true
-editableProperties: ['flexGrow', 'flexShrink', 'flexBasis']
 ---
 
 ## Flex Basis, Grow, and Shrink
@@ -16,6 +15,8 @@ distribute any remaining space according to the flex grow values specified by it
 flex grow accepts any floating point value >= 0, with 0 being the default value.
 A container will distribute any remaining space among its children weighted by the child’s flex grow value.
 
+<controls prop="flexGrow"></controls>
+
 ### Flex Shrink
 
 Flex shrink describes how to shrink children along the main axis in the
@@ -27,11 +28,15 @@ These two properties also work well together by allowing children to grow and sh
 flex shrink accepts any floating point value >= 0, with 1 being the default value.
 A container will shrink its children weighted by the child’s flex shrink value.
 
+<controls prop="flexShrink"></controls>
+
 ### Flex Basis
 
 Flex basis is an axis-independent way of providing the default size of an item
 along the main axis. Setting the flex basis of a child is similar to setting the Width of that
 child if its parent is a container with FlexDirection = row or setting the Height of a child
-if its parent is a container with FlexDirection = column. The flex basis of an item is the 
+if its parent is a container with FlexDirection = column. The flex basis of an item is the
 efault size of that item, the size of the item before any flex grow and flex shrink
 calculations are performed.
+
+<controls prop="flexBasis"></controls>
diff --git a/website/contents/properties/justify-content.md b/website/contents/properties/justify-content.md
index da85ed12..a0995b04 100644
--- a/website/contents/properties/justify-content.md
+++ b/website/contents/properties/justify-content.md
@@ -2,7 +2,8 @@
 path: "docs/justify-content"
 title: "Justify Content"
 hasPlayground: true
-editableProperties: ['justifyContent']
 ---
 
-## Justify Content
\ No newline at end of file
+## Justify Content
+
+<controls prop="justifyContent"></controls>
diff --git a/website/contents/properties/layout-direction.md b/website/contents/properties/layout-direction.md
index 171d1cb8..52d7e2a9 100644
--- a/website/contents/properties/layout-direction.md
+++ b/website/contents/properties/layout-direction.md
@@ -2,7 +2,8 @@
 path: "docs/layout-direction"
 title: "Layout Direction"
 hasPlayground: true
-editableProperties: ['layoutDirection']
 ---
 
-## Layout Direction
\ No newline at end of file
+## Layout Direction
+
+<controls prop="layoutDirection"></controls>
diff --git a/website/contents/properties/margins-paddings-borders.md b/website/contents/properties/margins-paddings-borders.md
index 06f3f2fb..a5f1fea0 100644
--- a/website/contents/properties/margins-paddings-borders.md
+++ b/website/contents/properties/margins-paddings-borders.md
@@ -2,7 +2,6 @@
 path: "docs/margins-paddings-borders"
 title: "Margins, Paddings, and Borders"
 hasPlayground: true
-editableProperties: ['margin', 'padding', 'border']
 ---
 
 ## Margins, Paddings, and Borders
@@ -14,6 +13,8 @@ will offset itself from the bounds of its parent but also offset the
 location of any siblings. The margin of a node contributes to the total size
 of its parent if the parent is auto sized.
 
+<controls prop="margin"></controls>
+
 ### Padding
 
 Padding affect the size of the node it is applied to. Padding in Yoga acts as if
@@ -21,6 +22,8 @@ Padding affect the size of the node it is applied to. Padding in Yoga acts as if
 of an element if it has an explicit size set. For auto sized nodes padding will increase
 the size of the node as well as offset the location of any children.
 
+<controls prop="padding"></controls>
+
 ### Border
 
 Border in Yoga acts exactly like padding and only exists as a seperate property so
@@ -28,3 +31,4 @@ that higher level frameworks get a hint as to how thick to draw a border. Yoga h
 does not do any drawing so just uses this information during layout where border
 acts exactly like padding.
 
+<controls prop="border"></controls>
diff --git a/website/contents/properties/min-max.md b/website/contents/properties/min-max.md
index 16ba4cd2..d5c388d0 100644
--- a/website/contents/properties/min-max.md
+++ b/website/contents/properties/min-max.md
@@ -2,7 +2,14 @@
 path: "docs/min-max"
 title: "Max / Min Width and Height"
 hasPlayground: true
-editableProperties: ['minWidth', 'minHeight', 'maxWidth', 'maxHeight']
 ---
 
-## Max / Min Width and Height
\ No newline at end of file
+## Max / Min Width and Height
+
+<controls prop="minWidth"></controls>
+
+<controls prop="minHeight"></controls>
+
+<controls prop="maxWidth"></controls>
+
+<controls prop="maxHeight"></controls>
diff --git a/website/contents/properties/width-height.md b/website/contents/properties/width-height.md
index ad07a73b..cced2165 100644
--- a/website/contents/properties/width-height.md
+++ b/website/contents/properties/width-height.md
@@ -2,7 +2,11 @@
 path: "docs/width-height"
 title: "Width and Height"
 hasPlayground: true
-editableProperties: ['width', 'height']
 ---
 
-## Width and Height
\ No newline at end of file
+## Width and Height
+
+
+<controls prop="width"></controls>
+
+<controls prop="height"></controls>
diff --git a/website/gatsby-node.js b/website/gatsby-node.js
index 28d5fc66..20c54a85 100644
--- a/website/gatsby-node.js
+++ b/website/gatsby-node.js
@@ -25,7 +25,6 @@ exports.createPages = ({boundActionCreators, graphql}) => {
             frontmatter {
               path
               hasPlayground
-              editableProperties
             }
             html
           }
diff --git a/website/src/components/DocsSidebar.js b/website/src/components/DocsSidebar.js
index 1fad98fe..d64eab44 100644
--- a/website/src/components/DocsSidebar.js
+++ b/website/src/components/DocsSidebar.js
@@ -10,13 +10,67 @@
  * @format
  */
 
-import React from 'react';
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import EditValue from '../components/Playground/EditValue';
+import Link from 'gatsby-link';
 import './DocsSidebar.css';
+import type {LayoutRecordT} from './Playground/LayoutRecord';
+
+const TAG_PATTERN = /<controls prop="([A-Za-z]+)"><\/controls>/gi;
 
 type Props = {
-  children: any,
+  markdown: string,
+  onChange: (property: string, value: any) => void,
+  layout: LayoutRecordT,
 };
 
-export default (props: Props) => (
-  <div className="DocsSidebar">{props.children}</div>
-);
+export default class DocsSidebar extends Component<Props> {
+  componentDidMount() {
+    this.renderControls(this.props);
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    this.renderControls(nextProps);
+  }
+
+  renderControls = (props: Props) => {
+    let match;
+    while ((match = TAG_PATTERN.exec(props.markdown))) {
+      const prop = match[1];
+      const element = window.document.querySelector(
+        `controls[prop="${match[1]}"]`,
+      );
+
+      if (element) {
+        if (element.childNodes.length !== 0) {
+          console.warn(
+            `The element <controls type="${prop}"> is not empty. It's content will be replaced by the react-component mounted in this element.`,
+          );
+        }
+        ReactDOM.render(
+          <EditValue
+            property={prop}
+            value={props.layout[prop]}
+            onChange={props.onChange}
+          />,
+          element,
+        );
+      }
+    }
+  };
+
+  render() {
+    return (
+      <div className="DocsSidebar">
+        <div
+          className="markdown"
+          dangerouslySetInnerHTML={{__html: this.props.markdown}}
+        />
+        <Link to="/docs" className="overview">
+          BACK TO OVERVIEW
+        </Link>
+      </div>
+    );
+  }
+}
diff --git a/website/src/templates/withPlayground.js b/website/src/templates/withPlayground.js
index 1b40b87f..62cf9230 100644
--- a/website/src/templates/withPlayground.js
+++ b/website/src/templates/withPlayground.js
@@ -10,7 +10,7 @@
  * @format
  */
 
-import React from 'react';
+import React, {Component} from 'react';
 import Page from '../components/Page';
 import Playground from '../components/Playground';
 import DocsSidebar from '../components/DocsSidebar';
@@ -19,31 +19,30 @@ import Link from 'gatsby-link';
 import {Button, Icon, Row, Col} from 'antd';
 import './index.css';
 
-export default ({pathContext}) => (
-  <Page className="doc-block playground">
-    <Playground
-      selectedNodePath={[]}
-      showGuides={false}
-      renderSidebar={(layout, onChange) => (
-        <DocsSidebar>
-          <div className="markdown" dangerouslySetInnerHTML={{__html: pathContext.html}} />
-          
-          {(pathContext.frontmatter.editableProperties || []).map(prop => (
-            <div key={prop} className="prop">
-              <h4>{prop}</h4>
-              <EditValue
-                property={prop}
-                value={layout[prop]}
-                onChange={onChange}
-              />
-            </div>
-          ))}
-          
-          <Link to="/docs" className="overview">
-            BACK TO OVERVIEW
-          </Link>
-        </DocsSidebar>
-      )}
-    />
-  </Page>
-);
+type Props = {
+  pathContext: {
+    html: string,
+    frontmatter: {},
+  },
+};
+const REGEX = /<controls prop="([A-Za-z]+)"\s?\/>/gi;
+
+export default class withPlayground extends Component<Props> {
+  render() {
+    return (
+      <Page className="doc-block playground">
+        <Playground
+          selectedNodePath={[]}
+          showGuides={false}
+          renderSidebar={(layout, onChange) => (
+            <DocsSidebar
+              layout={layout}
+              onChange={onChange}
+              markdown={this.props.pathContext.html}
+            />
+          )}
+        />
+      </Page>
+    );
+  }
+}