diff --git a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js b/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
index a7218a99..003f92ee 100644
--- a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
+++ b/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
@@ -3,7 +3,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { List, Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Frame from 'react-frame-component';
+import Frame, { FrameContextConsumer } from 'react-frame-component';
 import { lengths } from 'netlify-cms-ui-default';
 import { resolveWidget, getPreviewTemplate, getPreviewStyles } from 'Lib/registry';
 import { ErrorBoundary } from 'UI';
@@ -225,7 +225,15 @@ export class PreviewPane extends React.Component {
     return (
       <ErrorBoundary config={config}>
         <PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}>
-          <EditorPreviewContent {...{ previewComponent, previewProps }} />
+          <FrameContextConsumer>
+            {({ document, window }) => {
+              return (
+                <EditorPreviewContent
+                  {...{ previewComponent, previewProps: { ...previewProps, document, window } }}
+                />
+              );
+            }}
+          </FrameContextConsumer>
         </PreviewPaneFrame>
       </ErrorBoundary>
     );
diff --git a/website/content/docs/customization.md b/website/content/docs/customization.md
index 1a4a57a0..eec087c4 100644
--- a/website/content/docs/customization.md
+++ b/website/content/docs/customization.md
@@ -61,7 +61,7 @@ Registers a template for a folder collection or an individual file in a file col
 * name: The name of the collection (or file for file collections) which this preview component will be used for.
   * Folder collections: Use the name of the collection
   * File collections: Use the name of the file
-* react_component: A React component that renders the collection data. Four props will be passed to your component during render:
+* react_component: A React component that renders the collection data. Six props will be passed to your component during render:
   * entry: Immutable collection containing the entry data.
   * 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.
@@ -87,6 +87,8 @@ Registers a template for a folder collection or an individual file in a file col
       CMS.registerPreviewTemplate("posts", PostPreview);
     </script>
     ```
+  * document: The preview pane iframe's [document instance](https://github.com/ryanseddon/react-frame-component/tree/9f8f06e1d3fc40da7122f0a57c62f7dec306e6cb#accessing-the-iframes-window-and-document).
+  * window: The preview pane iframe's [window instance](https://github.com/ryanseddon/react-frame-component/tree/9f8f06e1d3fc40da7122f0a57c62f7dec306e6cb#accessing-the-iframes-window-and-document).
     ### 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.