Add a custom template to the example

example/example.css

@@ -0,0 +1,15 @@
+html, body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: #444;
+}
+body {
+  padding: 20px;
+}
+
+h1 {
+  font-weight: bold;
+  color: #666;
+  font-size: 32px;
+  margin-top: 20px;
+}

example/index.html

@@ -69,6 +69,26 @@
 
   <script src='/cms.js'></script>
   <script>
+    var PostPreview = createClass({
+      render: function() {
+        var entry = this.props.entry;
+        var image = entry.getIn(['data', 'image']);
+        var bg = image && this.props.getMedia(image);
+        return h('div', {},
+          h('div', {className: "cover"},
+            h('h1', {}, entry.getIn(['data', 'title'])),
+            bg ? h('img', {src: bg.toString()}) : null
+          ),
+          h('p', {},
+            h('small', {}, "Written " + entry.getIn(['data', 'date']))
+          ),
+          h('div', {"className": "text"}, this.props.widgetFor('body'))
+        );
+      }
+    });
+
+    CMS.registerPreviewTemplate("posts", PostPreview);
+    CMS.registerPreviewStyle("/example.css");
     CMS.registerEditorComponent({
       id: "youtube",
       label: "Youtube",
@@ -88,7 +108,7 @@
           '<img src="http://img.youtube.com/vi/' + obj.id + '/maxresdefault.jpg" alt="Youtube Video"/>'
         );
       }
-    })
+    });
   </script>
 </body>
 </html>

src/components/ControlPane.js

@@ -1,13 +1,13 @@
 import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import {resolveWidget} from './Widgets';
+import { resolveWidget } from './Widgets';
 
 export default class ControlPane extends React.Component {
   controlFor(field) {
     const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
     const widget = resolveWidget(field.get('widget'));
     return <div className="cms-control">
-      <label>{ field.get('label') }</label>
+      <label>{field.get('label')}</label>
       {React.createElement(widget.control, {
         field: field,
         value: entry.getIn(['data', field.get('name')]),

src/index.js

@@ -31,3 +31,5 @@ console.log('reg: ', registry);
 for (const method in registry) {
   window.CMS[method] = registry[method];
 }
+window.createClass = React.createClass;
+window.h = React.createElement;