diff --git a/backend/getData.js b/backend/getData.js
index 7980cedc94..cde521b01d 100644
--- a/backend/getData.js
+++ b/backend/getData.js
@@ -24,6 +24,8 @@ function getData(element: Object): DataType {
   var updater = null;
   var name = null;
   var type = null;
+  var key = null;
+  var ref = null;
   var text = null;
   var publicInstance = null;
   var nodeType = 'Native';
@@ -52,6 +54,10 @@ function getData(element: Object): DataType {
 
   if (element._currentElement) {
     type = element._currentElement.type;
+    if (element._currentElement.key) {
+      key = String(element._currentElement.key);
+    }
+    ref = element._currentElement.ref;
     if (typeof type === 'string') {
       name = type;
     } else if (element.getName) {
@@ -95,6 +101,8 @@ function getData(element: Object): DataType {
   return {
     nodeType,
     type,
+    key,
+    ref,
     name,
     props,
     state,
diff --git a/backend/getData012.js b/backend/getData012.js
index 4fa7146312..3e9852abd8 100644
--- a/backend/getData012.js
+++ b/backend/getData012.js
@@ -21,6 +21,8 @@ function getData012(element: Object): DataType {
   var updater = null;
   var name = null;
   var type = null;
+  var key = null;
+  var ref = null;
   var text = null;
   var publicInstance = null;
   var nodeType = 'Native';
@@ -46,6 +48,10 @@ function getData012(element: Object): DataType {
 
   if (element._currentElement) {
     type = element._currentElement.type;
+    if (element._currentElement.key) {
+      key = String(element._currentElement.key);
+    }
+    ref = element._currentElement.ref;
     if (typeof type === 'string') {
       name = type;
     } else {
@@ -83,6 +89,8 @@ function getData012(element: Object): DataType {
   return {
     nodeType,
     type,
+    key,
+    ref,
     name,
     props,
     state,
diff --git a/backend/types.js b/backend/types.js
index 0182fae8b4..2c0a33ac83 100644
--- a/backend/types.js
+++ b/backend/types.js
@@ -13,6 +13,8 @@
 export type DataType = {
   nodeType: 'Native' | 'Wrapper' | 'NativeWrapper' | 'Composite' | 'Text' | 'Empty',
   type: ?(string | AnyFn),
+  key: ?string,
+  ref: ?(string | AnyFn),
   name: ?string,
   props: ?Object,
   state: ?Object,
diff --git a/frontend/DataView/DataView.js b/frontend/DataView/DataView.js
index bfcb60236d..2763ef8869 100644
--- a/frontend/DataView/DataView.js
+++ b/frontend/DataView/DataView.js
@@ -230,6 +230,7 @@ var styles = {
     fontSize: 8,
     cursor: 'pointer',
     position: 'absolute',
+    top: '-2px',
     right: '100%',
     padding: '5px 0',
   },
diff --git a/frontend/Node.js b/frontend/Node.js
index dce5670535..966c76bc41 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -144,7 +144,9 @@ class Node extends React.Component {
             <span style={styles.tagText}>
               <span style={styles.openTag}>
                 <span style={tagStyle}>&lt;{name}</span>
-                {node.get('props') && <Props props={node.get('props')}/>}
+                {node.get('key') && <Props key="key" props={{'key': node.get('key')}}/>}
+                {node.get('ref') && <Props key="ref" props={{'ref': node.get('ref')}}/>}
+                {node.get('props') && <Props key="props" props={node.get('props')}/>}
                 {!content && '/'}
                 <span style={tagStyle}>&gt;</span>
               </span>
@@ -160,11 +162,6 @@ class Node extends React.Component {
       );
     }
 
-    // Plain string
-    if (typeof children === 'string') {
-      return <div style={leftPad}>{children}</div>;
-    }
-
     var closeTag = (
       <span style={styles.closeTag}>
         <span style={tagStyle}>
@@ -196,7 +193,9 @@ class Node extends React.Component {
         <span style={styles.tagText}>
           <span style={styles.openTag}>
             <span style={tagStyle}>&lt;{'' + node.get('name')}</span>
-            {node.get('props') && <Props props={node.get('props')}/>}
+            {node.get('key') && <Props key="key" props={{'key': node.get('key')}}/>}
+            {node.get('ref') && <Props key="ref" props={{'ref': node.get('ref')}}/>}
+            {node.get('props') && <Props key="props" props={node.get('props')}/>}
             <span style={tagStyle}>&gt;</span>
           </span>
           {collapsed && '…'}
diff --git a/frontend/PropState.js b/frontend/PropState.js
index 361aa3ce7e..75b83c83c2 100644
--- a/frontend/PropState.js
+++ b/frontend/PropState.js
@@ -14,6 +14,7 @@ var BlurInput = require('./BlurInput');
 var DataView = require('./DataView/DataView');
 var DetailPane = require('./detail_pane/DetailPane');
 var DetailPaneSection = require('./detail_pane/DetailPaneSection');
+var PropVal = require('./PropVal');
 var React = require('react');
 
 var decorate = require('./decorate');
@@ -64,6 +65,8 @@ class PropState extends React.Component {
       }
     }
 
+    var key = this.props.node.get('key');
+    var ref = this.props.node.get('ref');
     var state = this.props.node.get('state');
     var context = this.props.node.get('context');
     var propsReadOnly = !this.props.node.get('canUpdate');
@@ -72,6 +75,24 @@ class PropState extends React.Component {
       <DetailPane
         header={'<' + this.props.node.get('name') + '>'}
         hint="($r in the console)">
+        {key &&
+          <DetailPaneSection
+            title="Key"
+            key={this.props.id + '-key'}>
+            <PropVal
+              val={key}
+            />
+          </DetailPaneSection>
+        }
+        {ref &&
+          <DetailPaneSection
+            title="Ref"
+            key={this.props.id + '-ref'}>
+            <PropVal
+              val={ref}
+            />
+          </DetailPaneSection>
+        }
         {editTextContent}
         <DetailPaneSection
           hint={propsReadOnly ? 'read-only' : null}
diff --git a/frontend/detail_pane/DetailPaneSection.js b/frontend/detail_pane/DetailPaneSection.js
index e118d4c59c..683f4fe2ad 100644
--- a/frontend/detail_pane/DetailPaneSection.js
+++ b/frontend/detail_pane/DetailPaneSection.js
@@ -20,7 +20,7 @@ class DetailPaneSection extends React.Component {
     } = this.props;
     return (
       <div style={styles.section}>
-        <strong>{this.props.title}</strong>
+        <strong style={styles.title}>{this.props.title}</strong>
         {hint ? ' ' + hint : null}
         {children}
       </div>
@@ -33,6 +33,9 @@ var styles = {
     marginBottom: 10,
     flexShrink: 0,
   },
+  title: {
+    marginRight: 5,
+  },
 };
 
 module.exports = DetailPaneSection;