diff --git a/dist/components/Node.js b/dist/components/Node.js
index 081d2729afda..87fd0dc099ce 100644
--- a/dist/components/Node.js
+++ b/dist/components/Node.js
@@ -32,6 +32,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _Props = require('./Props');
+
+var _Props2 = _interopRequireDefault(_Props);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Node = function (_React$Component) {
@@ -75,6 +79,7 @@ var Node = function (_React$Component) {
       var text = _getData.text;
       var children = _getData.children;
 
+      // Just text
 
       if (!name) {
         return _react2.default.createElement(
@@ -97,7 +102,12 @@ var Node = function (_React$Component) {
             'span',
             { style: tagStyle },
             '<',
-            name,
+            name
+          ),
+          _react2.default.createElement(_Props2.default, { node: node }),
+          _react2.default.createElement(
+            'span',
+            { style: tagStyle },
             ' />'
           )
         );
@@ -114,7 +124,12 @@ var Node = function (_React$Component) {
             'span',
             { style: tagStyle },
             '<',
-            name,
+            name
+          ),
+          _react2.default.createElement(_Props2.default, { node: node }),
+          _react2.default.createElement(
+            'span',
+            { style: tagStyle },
             '>'
           )
         ),
@@ -127,9 +142,9 @@ var Node = function (_React$Component) {
           _react2.default.createElement(
             'span',
             { style: tagStyle },
-            '<',
+            '</',
             name,
-            ' />'
+            '>'
           )
         )
       );
diff --git a/dist/components/PropVal.js b/dist/components/PropVal.js
new file mode 100644
index 000000000000..24b618a9a541
--- /dev/null
+++ b/dist/components/PropVal.js
@@ -0,0 +1,195 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsCreateFragment = require('react-addons-create-fragment');
+
+var _reactAddonsCreateFragment2 = _interopRequireDefault(_reactAddonsCreateFragment);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var valueStyles = {
+  func: {
+    color: '#170'
+  },
+
+  attr: {
+    color: '#666'
+  },
+
+  object: {
+    color: '#666'
+  },
+
+  array: {
+    color: '#666'
+  },
+
+  number: {
+    color: '#a11'
+  },
+
+  string: {
+    color: '#22a',
+    wordBreak: 'break-word'
+  },
+
+  bool: {
+    color: '#a11'
+  },
+
+  empty: {
+    color: '#777'
+  }
+};
+
+function previewArray(val) {
+  var items = {};
+  val.slice(0, 3).forEach(function (item, i) {
+    items['n' + i] = _react2.default.createElement(PropVal, { val: item, nested: true });
+    items['c' + i] = ', ';
+  });
+  if (val.length > 3) {
+    items.last = '…';
+  } else {
+    delete items['c' + (val.length - 1)];
+  }
+  return _react2.default.createElement(
+    'span',
+    { style: valueStyles.array },
+    '[',
+    (0, _reactAddonsCreateFragment2.default)(items),
+    ']'
+  );
+}
+
+function previewObject(val) {
+  var names = (0, _keys2.default)(val);
+  var items = {};
+  names.slice(0, 3).forEach(function (name, i) {
+    items['k' + i] = _react2.default.createElement(
+      'span',
+      { style: valueStyles.attr },
+      name
+    );
+    items['c' + i] = ': ';
+    items['v' + i] = _react2.default.createElement(PropVal, { val: val[name], nested: true });
+    items['m' + i] = ', ';
+  });
+  if (names.length > 3) {
+    items.rest = '…';
+  } else {
+    delete items['m' + (names.length - 1)];
+  }
+  return _react2.default.createElement(
+    'span',
+    { style: valueStyles.object },
+    '{',
+    (0, _reactAddonsCreateFragment2.default)(items),
+    '}'
+  );
+}
+
+function previewProp(val) {
+  if (typeof val === 'number') {
+    return _react2.default.createElement(
+      'span',
+      { style: valueStyles.number },
+      val
+    );
+  }
+  if (typeof val === 'string') {
+    if (val.length > 50) {
+      val = val.slice(0, 50) + '…';
+    }
+    return _react2.default.createElement(
+      'span',
+      { style: valueStyles.string },
+      '"',
+      val,
+      '"'
+    );
+  }
+  if (typeof val === 'boolean') {
+    return _react2.default.createElement(
+      'span',
+      { style: valueStyles.bool },
+      '' + val
+    );
+  }
+  if (Array.isArray(val)) {
+    return previewArray(val);
+  }
+  if (!val) {
+    return _react2.default.createElement(
+      'span',
+      { style: valueStyles.empty },
+      '' + val
+    );
+  }
+  if ((typeof val === 'undefined' ? 'undefined' : (0, _typeof3.default)(val)) !== 'object') {
+    return _react2.default.createElement(
+      'span',
+      null,
+      '…'
+    );
+  }
+
+  return previewObject(val);
+}
+
+var PropVal = function (_React$Component) {
+  (0, _inherits3.default)(PropVal, _React$Component);
+
+  function PropVal() {
+    (0, _classCallCheck3.default)(this, PropVal);
+    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(PropVal).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(PropVal, [{
+    key: 'render',
+    value: function render() {
+      return previewProp(this.props.val);
+    }
+  }]);
+  return PropVal;
+}(_react2.default.Component);
+
+exports.default = PropVal;
+
+
+module.exports = PropVal;
\ No newline at end of file
diff --git a/dist/components/Props.js b/dist/components/Props.js
new file mode 100644
index 000000000000..362ac8ca80bf
--- /dev/null
+++ b/dist/components/Props.js
@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _PropVal = require('./PropVal');
+
+var _PropVal2 = _interopRequireDefault(_PropVal);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Props = function (_React$Component) {
+  (0, _inherits3.default)(Props, _React$Component);
+
+  function Props() {
+    var _Object$getPrototypeO;
+
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3.default)(this, Props);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(Props)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.stylesheet = {
+      propStyle: {
+        paddingLeft: 8
+      },
+      propNameStyle: {},
+      propValueStyle: {}
+    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+  }
+
+  (0, _createClass3.default)(Props, [{
+    key: 'render',
+    value: function render() {
+      var props = this.props.node.props;
+      var defaultProps = this.props.node.type.defaultProps;
+      if (!props || (typeof props === 'undefined' ? 'undefined' : (0, _typeof3.default)(props)) !== 'object') {
+        return _react2.default.createElement('span', null);
+      }
+
+      var _stylesheet = this.stylesheet;
+      var propStyle = _stylesheet.propStyle;
+      var propValueStyle = _stylesheet.propValueStyle;
+      var propNameStyle = _stylesheet.propNameStyle;
+
+
+      var names = (0, _keys2.default)(props).filter(function (name) {
+        return name[0] !== '_' && name !== 'children' && (!defaultProps || props[name] != defaultProps[name]);
+      });
+
+      var items = [];
+      names.slice(0, 3).forEach(function (name) {
+        items.push(_react2.default.createElement(
+          'span',
+          { style: propStyle },
+          _react2.default.createElement(
+            'span',
+            { style: propNameStyle },
+            name
+          ),
+          '=',
+          _react2.default.createElement(
+            'span',
+            { style: propValueStyle },
+            _react2.default.createElement(_PropVal2.default, { val: props[name] })
+          )
+        ));
+      });
+
+      return _react2.default.createElement(
+        'span',
+        null,
+        items
+      );
+    }
+  }]);
+  return Props;
+}(_react2.default.Component);
+
+exports.default = Props;
\ No newline at end of file
diff --git a/package.json b/package.json
index a812e74b3dd8..f7c80b6543b7 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
   "dependencies": {
     "babel-runtime": "^6.5.0",
     "markdown-modest": "github:markdowncss/modest",
+    "react-addons-create-fragment": "^15.1.0",
     "react-remarkable": "^1.1.1"
   },
   "main": "dist/index.js",
diff --git a/src/components/Node.js b/src/components/Node.js
index c19bd15ae4a7..1eb04dbcf934 100644
--- a/src/components/Node.js
+++ b/src/components/Node.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Props from './Props'
 
 export default class Node extends React.Component {
   constructor(props){
@@ -25,6 +26,7 @@ export default class Node extends React.Component {
 
     const {name, text, children} = getData(node);
 
+    // Just text
     if (!name) {
       return <div style={containerStyle}>
         <span style={tagStyle}>{text}</span>
@@ -34,18 +36,22 @@ export default class Node extends React.Component {
     // Single-line tag
     if (!children) {
       return <div style={containerStyle}>
-        <span style={tagStyle}>&lt;{name} /&gt;</span>
+        <span style={tagStyle}>&lt;{name}</span>
+          <Props node={node} />
+        <span style={tagStyle}> /&gt;</span>
       </div>;
     }
 
     // tag with children
     return <div>
       <div style={containerStyle}>
-        <span style={tagStyle}>&lt;{name}&gt;</span>
+        <span style={tagStyle}>&lt;{name}</span>
+          <Props node={node} />
+        <span style={tagStyle}>&gt;</span>
       </div>
       {React.Children.map(children, childElement => <Node node={childElement} depth={depth + 1}/>)}
       <div style={containerStyle}>
-        <span style={tagStyle}>&lt;{name} /&gt;</span>
+        <span style={tagStyle}>&lt;/{name}&gt;</span>
       </div>
     </div>
   }
diff --git a/src/components/PropVal.js b/src/components/PropVal.js
new file mode 100644
index 000000000000..e3a83d1469b5
--- /dev/null
+++ b/src/components/PropVal.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import createFragment from 'react-addons-create-fragment';
+
+const valueStyles = {
+  func: {
+    color: '#170',
+  },
+
+  attr: {
+    color: '#666',
+  },
+
+  object: {
+    color: '#666',
+  },
+
+  array: {
+    color: '#666',
+  },
+
+  number: {
+    color: '#a11',
+  },
+
+  string: {
+    color: '#22a',
+    wordBreak: 'break-word',
+  },
+
+  bool: {
+    color: '#a11',
+  },
+
+  empty: {
+    color: '#777',
+  },
+};
+
+function previewArray(val) {
+  const items = {};
+  val.slice(0, 3).forEach((item, i) => {
+    items[`n${i}`] = <PropVal val={item} nested />;
+    items[`c${i}`] = ', ';
+  });
+  if (val.length > 3) {
+    items.last = '…';
+  } else {
+    delete items[`c${val.length - 1}`];
+  }
+  return (
+    <span style={valueStyles.array}>
+      [{createFragment(items)}]
+    </span>
+  );
+}
+
+function previewObject(val) {
+  const names = Object.keys(val);
+  const items = {};
+  names.slice(0, 3).forEach((name, i) => {
+    items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>;
+    items[`c${i}`] = ': ';
+    items[`v${i}`] = <PropVal val={val[name]} nested />;
+    items[`m${i}`] = ', ';
+  });
+  if (names.length > 3) {
+    items.rest = '…';
+  } else {
+    delete items[`m${names.length - 1}`];
+  }
+  return (
+    <span style={valueStyles.object}>
+      {'{'}{createFragment(items)}{'}'}
+    </span>
+  );
+}
+
+function previewProp(val) {
+  if (typeof val === 'number') {
+    return <span style={valueStyles.number}>{val}</span>;
+  }
+  if (typeof val === 'string') {
+    if (val.length > 50) {
+      val = val.slice(0, 50) + '…';
+    }
+    return <span style={valueStyles.string}>"{val}"</span>;
+  }
+  if (typeof val === 'boolean') {
+    return <span style={valueStyles.bool}>{`${val}`}</span>;
+  }
+  if (Array.isArray(val)) {
+    return previewArray(val);
+  }
+  if (!val) {
+    return <span style={valueStyles.empty}>{`${val}`}</span>;
+  }
+  if (typeof val !== 'object') {
+    return <span>…</span>;
+  }
+
+  return previewObject(val);
+}
+
+export default class PropVal extends React.Component {
+  render() {
+    return previewProp(this.props.val);
+  }
+}
+
+module.exports = PropVal;
diff --git a/src/components/Props.js b/src/components/Props.js
new file mode 100644
index 000000000000..45287c4cc688
--- /dev/null
+++ b/src/components/Props.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropVal from './PropVal';
+
+export default class Props extends React.Component {
+  stylesheet = {
+    propStyle: {
+      paddingLeft: 8,
+    },
+    propNameStyle: {
+
+    },
+    propValueStyle: {
+
+    }
+  }
+
+  render() {
+    const props = this.props.node.props;
+    const defaultProps = this.props.node.type.defaultProps;
+    if (!props || typeof props !== 'object') {
+      return <span/>;
+    }
+
+    const {propStyle, propValueStyle, propNameStyle} = this.stylesheet;
+
+    const names = Object.keys(props).filter(name => {
+      return name[0] !== '_' && name !== 'children' && (!defaultProps || props[name] != defaultProps[name]);
+    });
+
+    const items = [];
+    names.slice(0, 3).forEach(name => {
+      items.push(
+        <span style={propStyle}>
+          <span style={propNameStyle}>{name}</span>
+          =
+          <span style={propValueStyle}><PropVal val={props[name]} /></span>
+        </span>
+      );
+    });
+
+    return <span>{items}</span>
+  }
+}
\ No newline at end of file