diff --git a/src/client/components/types/object.raw.scss b/src/client/components/types/object.raw.scss
new file mode 100644
index 0000000..0198676
--- /dev/null
+++ b/src/client/components/types/object.raw.scss
@@ -0,0 +1,5 @@
+:scope {
+  background-color: rgba(255, 255, 255, 0.05);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 0.25em;
+}
diff --git a/src/client/components/types/object.type-renderer.jsx b/src/client/components/types/object.type-renderer.jsx
new file mode 100644
index 0000000..0e396f6
--- /dev/null
+++ b/src/client/components/types/object.type-renderer.jsx
@@ -0,0 +1,35 @@
+import {compose} from '@avocado/core';
+import contempo from 'contempo';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import propertyPropTypes from './property-prop-types';
+
+const decorate = compose(
+  contempo(require('./object.raw.scss')),
+);
+
+const ObjectRenderer = ({
+  value,
+}) => (
+  <div className="object">
+    <span className="bracket open">{'{'}</span>
+    <pre contentEditable>
+      <code>
+        {'  '}
+        {JSON.stringify(value, null, 2).slice(1).slice(0, -1).trim('\n')}
+      </code>
+    </pre>
+    <span className="bracket close">{'}'}</span>
+  </div>
+);
+
+ObjectRenderer.propTypes = {
+  ...propertyPropTypes,
+  value: PropTypes.bool.isRequired,
+};
+
+export default {
+  type: 'object',
+  component: decorate(ObjectRenderer),
+};
diff --git a/src/client/components/types/value.raw.scss b/src/client/components/types/value.raw.scss
index 3dec98d..f17d327 100644
--- a/src/client/components/types/value.raw.scss
+++ b/src/client/components/types/value.raw.scss
@@ -2,21 +2,11 @@
   text-align-last: right;
 }
 
-:scope {
+.literal {
   display: flex;
   align-items: center;
 }
 
-.object {
-  background-color: #333333;
-	border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 0.25em;
-}
-
-.object, input {
-  // border-left: none;
-}
-
-select {
+.literal select {
   margin-right: 0.25em;
 }
diff --git a/src/client/components/types/value.type-renderer.jsx b/src/client/components/types/value.type-renderer.jsx
index 82f9d53..f9d04e5 100644
--- a/src/client/components/types/value.type-renderer.jsx
+++ b/src/client/components/types/value.type-renderer.jsx
@@ -6,6 +6,7 @@ import React from 'react';
 
 import Bool from './bool.type-renderer';
 import Number from './number.type-renderer';
+import {default as ObjectType} from './object.type-renderer';
 import propertyPropTypes from './property-prop-types';
 import Steps from './steps';
 import String from './string.type-renderer';
@@ -46,18 +47,7 @@ const renderValue = (context, type, value) => {
                 case 'string':
                   return <String.component value={value.value} />;
                 case 'object':
-                  return (
-                    <div className="object">
-                      <span className="bracket open">{'{'}</span>
-                      <pre contentEditable>
-                        <code>
-                          {'  '}
-                          {JSON.stringify(value.value, null, 2).slice(1).slice(0, -1).trim('\n')}
-                        </code>
-                      </pre>
-                      <span className="bracket close">{'}'}</span>
-                    </div>
-                  );
+                  return <ObjectType.component value={value.value} />;
                 default:
                   return null;
               }
@@ -81,7 +71,7 @@ const Value = ({
   options,
   type,
   value,
-}) => renderValue(context, type || 'any', value);
+}) => <span className="value">{renderValue(context, type, value)}</span>;
 
 Value.propTypes = {
   ...propertyPropTypes,