diff --git a/website/site/content/docs/customization.md b/website/site/content/docs/customization.md
index fa668dfd..6d56200e 100644
--- a/website/site/content/docs/customization.md
+++ b/website/site/content/docs/customization.md
@@ -2,7 +2,6 @@
title: Custom Previews
position: 50
---
-
# Customizing the Preview Pane
The NetlifyCMS exposes a `window.CMS` global object that you can use to register custom widgets, previews and editor plugins. The available customization methods are:
@@ -29,13 +28,15 @@ CMS.registerPreviewStyle(file);
* **file:** css file path
**Example:**
+
```html
// index.html
-
+
```
+
```css
/* example.css */
@@ -49,11 +50,8 @@ body {
body {
padding: 20px;
}
-
-
```
-
## `registerPreviewTemplate`
Registers a template for a collection.
@@ -68,11 +66,9 @@ Registers a template for a collection.
* widgetFor: Returns the appropriate widget preview component for a given field.
* [widgetsFor](#lists-and-objects): Returns an array of objects with widgets and associated field data. For use with list and object type entries.
* getAsset: Returns the correct filePath or in-memory preview for uploaded images.
-
**Example:**
-
```html
-
+
```
-
### Lists and Objects
The API for accessing the individual fields of list- and object-type entries is similar to the API
for accessing fields in standard entries, but there are a few key differences. Access to these
nested fields is facilitated through the `widgetsFor` function, which is passed to the preview
template component during render.
-
**Note**: as is often the case with the NetlifyCMS API, arrays and objects are created with
Immutable.js. If some of the methods that we use are unfamiliar, such as `getIn`, check out
[their docs](https://facebook.github.io/immutable-js/docs/#/) to get a better understanding.
-
**List Example:**
-
```html
```
-
**Object Example:**
-
```html
```
-
### Accessing Metadata
Preview Components also receive an additional prop: `fieldsMetaData`. It contains aditional information (besides the plain plain textual value of each field) that can be useful for preview purposes.
-
For example, the Relation widget passes the whole selected relation data in `fieldsMetaData`.
-
```js
export default class ArticlePreview extends React.Component {
render() {
const {entry, fieldsMetaData} = this.props;
const author = fieldsMetaData.getIn(['authors', data.author]);
-
+
return { entry.getIn(['data', 'title']) }
{author &&}
}
}
- ```
\ No newline at end of file
+ ```