diff --git a/.storybook/addons.js b/.storybook/addons.js
new file mode 100644
index 0000000..6aed412
--- /dev/null
+++ b/.storybook/addons.js
@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
diff --git a/.storybook/config.js b/.storybook/config.js
new file mode 100644
index 0000000..639b168
--- /dev/null
+++ b/.storybook/config.js
@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000..433721a
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,320 @@
+<script>
+window.PagedConfig = {
+    auto: false,
+}
+</script>
+<!-- <script src="https://unpkg.com/pagedjs@0.1.30/dist/paged.polyfill.js"></script> -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script> -->
+<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" /> -->
+<script>
+/* eslint-disable */
+console.log('config', PagedConfig);
+// setTimeout(() => {
+//     // console.log('document', document);
+//     // const root = document.getElementById('root');
+//     // console.log('root', root);
+//     // console.log('inner HTML', root.innerHTML);
+//     // console.log('child nodes', root.chidNodes);
+//     // document.body.childNodes = [root]
+//     // document.body.innerHTML = root.innerHTML;
+// }, 500)
+(function() {
+    console.log('previewing');
+    // window.PagedPolyfill.preview(document.getElementById('source'),false, document.getElementById('preview'));
+})()
+
+/**
+ * DOM observer use to retrigger the resize script when changing content in the page
+ */
+ const observeDOM = ( function() {
+    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+
+    return function( obj, callback ) {
+      if ( !obj || !obj.nodeType === 1 ) return; // validation
+
+      if ( MutationObserver ) {
+        // define a new observer
+        const obs = new MutationObserver( function( mutations, observer ) {
+            callback( mutations );
+        } );
+        // have the observer observe foo for changes in children
+        obs.observe( obj, { childList: true, subtree: true } );
+      }
+
+      else if ( window.addEventListener ) {
+        obj.addEventListener( 'DOMNodeInserted', callback, false );
+        obj.addEventListener( 'DOMNodeRemoved', callback, false );
+      }
+    };
+  } )();
+
+if ( window.Paged ) {
+
+      /*
+       * Hooks for paged.js
+       * footnotes support courtesy of RLesur https://github.com/rstudio/pagedown/blob/master/inst/resources/js/hooks.js
+       * Footnotes support
+       */
+        Paged.registerHandlers( class extends Paged.Handler {
+        constructor( chunker, polisher, caller ) {
+          super( chunker, polisher, caller );
+
+          this.splittedParagraphRefs = [];
+          console.log( 'in constructor' );
+        }
+
+        beforeParsed( content ) {
+          console.info( 'spotting footnotes' );
+          const footnotes = content.querySelectorAll( '.footnote' );
+
+          for ( const footnote of footnotes ) {
+            const parentElement = footnote.parentElement;
+            const footnoteCall = document.createElement( 'a' );
+            const footnoteNumber = footnote.dataset.notenumber;
+
+            footnoteCall.className = 'footnote-ref'; // same class as Pandoc
+            footnoteCall.setAttribute( 'id', `fnref${ footnoteNumber}` ); // same notation as Pandoc
+            footnoteCall.setAttribute( 'href', `#${ footnote.id}` );
+            footnoteCall.innerHTML = `<sup id="note-content-pointer-${ footnote.id }">${ footnoteNumber }</sup>`;
+            parentElement.insertBefore( footnoteCall, footnote );
+
+            // Here comes a hack. Fortunately, it works with Chrome and FF.
+            const handler = document.createElement( 'p' );
+            handler.className = 'footnoteHandler';
+            parentElement.insertBefore( handler, footnote );
+            handler.appendChild( footnote );
+            handler.style.display = 'inline-block';
+            handler.style.width = '100%';
+            handler.style.float = 'right';
+            handler.style.pageBreakInside = 'avoid';
+          }
+        }
+
+        afterParsed() {
+          console.info( 'parsing finished, rendering the pages' );
+          console.group( 'rendering pages' );
+          Toastify( {
+            text: 'Rendering pages',
+            duration: 2000
+          } ).showToast();
+        }
+
+        afterPageLayout( pageFragment, page, breakToken ) {
+          console.info( 'page %s is rendered', page.position + 1 );
+          if (page.position%20 === 0 && page.position) {
+            Toastify( {
+              text: 'Rendering pages : ' + (page.position) + '/?',
+              duration: 1000
+            } ).showToast();
+          }
+
+          function hasItemParent( node ) {
+            if ( node.parentElement === null ) {
+              return false;
+            }
+          else {
+              if ( node.parentElement.tagName === 'LI' ) {
+                return true;
+              }
+            else {
+                return hasItemParent( node.parentElement );
+              }
+            }
+          }
+
+          /*
+           * If a li item is broken, we store the reference of the p child element
+           * see https://github.com/rstudio/pagedown/issues/23#issue-376548000
+           */
+          if ( breakToken !== undefined ) {
+            if ( breakToken.node.nodeName === '#text' && hasItemParent( breakToken.node ) ) {
+              this.splittedParagraphRefs.push( breakToken.node.parentElement.dataset.ref );
+            }
+          }
+        }
+
+        afterRendered( pages ) {
+          console.groupEnd( 'rendering pages' );
+          Toastify( {
+            text: `Attaching footnotes to ${ pages.length } pages`,
+            duration: 1000
+          } ).showToast();
+          console.info( 'rendering done, attaching footnotes to %s pages', pages.length );
+          for ( const page of pages ) {
+            const footnotes = page.element.querySelectorAll( '.footnote' );
+            if ( footnotes.length === 0 ) {
+              continue;
+            }
+
+            const pageContent = page.element.querySelector( '.pagedjs_page_content' );
+            const hr = document.createElement( 'hr' );
+            const footnoteArea = document.createElement( 'div' );
+
+            pageContent.style.display = 'flex';
+            pageContent.style.flexDirection = 'column';
+
+            hr.className = 'footnote-break';
+            hr.style.marginTop = 'auto';
+            hr.style.marginBottom = 0;
+            hr.style.marginLeft = 0;
+            hr.style.marginRight = 'auto';
+            pageContent.appendChild( hr );
+
+            footnoteArea.className = 'footnote-area';
+            pageContent.appendChild( footnoteArea );
+            let footnoteIndex = 0;
+            for ( const footnote of footnotes ) {
+              footnoteIndex++;
+              const handler = footnote.parentElement;
+
+              footnoteArea.appendChild( footnote );
+              handler.parentNode.removeChild( handler );
+
+              const footnoteCall = document.getElementById( `note-content-pointer-${ footnote.id}` );
+              if ( footnoteCall ) {
+                footnoteCall.innerHTML = `<sup id="note-content-pointer-${ footnote.id }">${ footnoteIndex }</sup>`;
+              }
+
+              footnote.innerHTML = `<sup class="note-pointer"><a href="#note-content-pointer-${ footnote.id }">${ footnoteIndex }</a></sup>${ footnote.innerHTML}`;
+              // footnote.style.fontSize = 'x-small';
+              footnote.style.marginTop = 0;
+              footnote.style.marginBottom = 0;
+              footnote.style.paddingTop = 0;
+              footnote.style.paddingBottom = 0;
+              footnote.style.display = 'block';
+            }
+          }
+
+          for ( const ref of this.splittedParagraphRefs ) {
+            const paragraphFirstPage = document.querySelector( `[data-split-to="${ ref }"]` );
+
+            /*
+             * We test whether the paragraph is empty
+             * see https://github.com/rstudio/pagedown/issues/23#issue-376548000
+             */
+            if ( paragraphFirstPage.innerText === '' ) {
+              paragraphFirstPage.parentElement.style.display = 'none';
+              const paragraphSecondPage = document.querySelector( `[data-split-from="${ ref }"]` );
+              paragraphSecondPage.parentElement.style.setProperty( 'list-style', 'inherit', 'important' );
+            }
+          }
+          console.info( 'footnotes positionning done' );
+          Toastify( {
+            text: 'Rendering finished !',
+            duration: 3000
+          } ).showToast();
+
+        }
+        } );/* end register handlers */
+    // resize logic
+    const paged = new window.Paged.Previewer();
+    const resizer = () => {
+      const pages = document.querySelector( '.pagedjs_pages' );
+
+      if ( pages ) {
+        const scale = ( ( window.innerWidth * 0.9 ) / pages.offsetWidth );
+        if ( scale < 1 ) {
+          const translateVal = ( window.innerWidth / 2 ) - ( ( pages.offsetWidth * scale / 2 ) );
+          const style = `scale(${ scale }) translate(${ translateVal }px, 0)`;
+          pages.style.transform = style;
+        }
+ else {
+          pages.style.transform = 'none';
+        }
+      }
+    };
+    resizer();
+
+    window.addEventListener( 'resize', resizer, false );
+
+    paged.on( 'rendering', () => {
+      console.log( 'paged is rendering' );
+      resizer();
+    } );
+
+    observeDOM( document.body, resizer );
+
+  }
+
+</script>
+<style>
+    :root {
+    --color-mbox : rgba(0,0,0,0.2);
+    --margin: 4px;
+    }
+    
+    [contenteditable]:focus {
+      outline: 0px solid transparent;
+    }
+    
+    #controls {
+    display: none;
+    }
+    
+    @media screen {
+    
+    body {
+      background-color: whitesmoke;
+    }
+    
+    .pagedjs_pages{
+      transform: translate(0.5);
+    }
+    
+    .pagedjs_page {
+      background-color: #fdfdfd;
+      margin: calc(var(--margin) * 4) var(--margin);
+      flex: none;
+      box-shadow: 0 0 0 1px var(--color-mbox);
+      pointer-events: none;
+    }
+    
+    .pagedjs_pages {
+      width: calc((var(--width) * 2) + (var(--margin) * 4));
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      transform-origin: 0 0;
+      margin: 0 auto;
+    }
+    
+    #controls {
+      margin: 20px 0;
+      text-align: center;
+      display: block;
+    }
+    
+    .pagedjs_first_page {
+      margin-left: calc(50% + var(--margin));
+    }
+    }
+    
+    @media screen {
+    .debug .pagedjs_margin-top .pagedjs_margin-top-left-corner,
+    .debug .pagedjs_margin-top .pagedjs_margin-top-right-corner {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-top > div {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-right > div {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-bottom .pagedjs_margin-bottom-left-corner,
+    .debug .pagedjs_margin-bottom .pagedjs_margin-bottom-right-corner {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-bottom > div {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-left > div {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    }
+</style>
\ No newline at end of file
diff --git a/stories/ContextProvider.js b/stories/ContextProvider.js
new file mode 100644
index 0000000..5535561
--- /dev/null
+++ b/stories/ContextProvider.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';/* eslint no-unused-vars : 0 */
+import PropTypes from 'prop-types';
+
+export default class ContextProvider extends Component {
+
+  static childContextTypes = {
+    renderingMode: PropTypes.string,
+  }
+
+  getChildContext = () => ( {
+    renderingMode: this.props.renderingMode,
+  } )
+  render = () => {
+    return this.props.children;
+  }
+}
diff --git a/stories/PagedPreviewer/PagedPreviewer.js b/stories/PagedPreviewer/PagedPreviewer.js
new file mode 100755
index 0000000..c5fce4a
--- /dev/null
+++ b/stories/PagedPreviewer/PagedPreviewer.js
@@ -0,0 +1,127 @@
+/**
+ * This module provides a preview for paged content, thanks to the awesome pagedjs polyfill
+ * @module ovide/components/PagedPreviewer
+ * @todo find a way to do the same thing while having better manners
+ */
+/**
+ * Imports Libraries
+ */
+import React, { Component } from 'react';
+import Frame, { FrameContextConsumer } from 'react-frame-component';
+import fetch from 'axios';
+
+/**
+ * Imports Dependencies
+ */
+import addons from 'raw-loader!./addons.paged.jx';
+import previewStyleData from 'raw-loader!./previewStyle.paged.csx';
+
+class PreviewWrapper extends Component {
+
+  constructor( props ) {
+    super( props );
+    this.state = {
+    };
+  }
+
+  componentDidMount = () => {
+    fetch( 'https://unpkg.com/pagedjs@0.1.30/dist/paged.polyfill.js' )
+      .then( ( { data } ) => {
+        this.setState( {
+          pagedScript: data
+        } );
+      } );
+  }
+
+  shouldComponentUpdate = ( { updateTrigger } ) => {
+    return updateTrigger !== this.props.updateTrigger;
+  }
+
+  render = () => {
+
+    const {
+      props: {
+        style,
+        Component: RenderingComponent,
+        additionalHTML = '',
+      }
+    } = this;
+
+    const injectRenderer = ( thatDocument ) => {
+      // 1. swap body content to have sections as direct children (paged js requirement)
+      let htmlContent = thatDocument.body.children[0].querySelector( '.frame-content > div' ).innerHTML;
+      thatDocument.body.innerHTML = htmlContent;
+      // 2. extract styles from content
+      const stylesRegexp = /<style.*>([\w\W\n]*)<\/style>/gm;
+      let additionalStyles = '';
+      let match;
+      while ( ( match = stylesRegexp.exec( htmlContent ) ) !== null ) {
+        additionalStyles += match[1];
+        htmlContent = htmlContent.slice( 0, match.index ) + htmlContent.slice( match.index + match[0].length );
+        match.index = -1;
+      }
+      // add toaster lib
+      const toasterScript = thatDocument.createElement( 'script' );
+      toasterScript.type = 'text/javascript';
+      toasterScript.src = 'https://cdn.jsdelivr.net/npm/toastify-js';
+      thatDocument.getElementsByTagName( 'head' )[0].appendChild( toasterScript );
+      const toasterStyle = thatDocument.createElement( 'link' );
+      toasterStyle.rel = 'stylesheet';
+      toasterStyle.type = 'text/css';
+      toasterStyle.href = 'https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css';
+      thatDocument.getElementsByTagName( 'head' )[0].appendChild( toasterStyle );
+
+      // load paged js lib
+      const pagedLibScript = thatDocument.createElement( 'script' );
+      pagedLibScript.type = 'text/javascript';
+      pagedLibScript.innerHTML = this.state.pagedScript || '';
+      // pagedLibScript.src = 'https://unpkg.com/pagedjs@0.1.30/dist/paged.polyfill.js';
+      thatDocument.getElementsByTagName( 'head' )[0].appendChild( pagedLibScript );
+      // load addons script
+      const addonsScript = thatDocument.createElement( 'script' );
+      addonsScript.type = 'text/javascript';
+      addonsScript.innerHTML = addons;
+      thatDocument.getElementsByTagName( 'head' )[0].appendChild( addonsScript );
+      // load paged js preview
+      const previewStyle = thatDocument.createElement( 'style' );
+      previewStyle.innerHTML = `${previewStyleData}
+          ${additionalStyles}`;
+      thatDocument.getElementsByTagName( 'head' )[0].appendChild( previewStyle );
+
+      const additionalHTMLElement = thatDocument.createElement( 'div' );
+      additionalHTMLElement.innerHTML = additionalHTML;
+      thatDocument.getElementsByTagName( 'body' )[0].appendChild( additionalHTMLElement );
+    };
+
+    return (
+      <div
+        style={ style }
+      >
+        {/* <LoadingScreen /> */}
+        <Frame
+          name={ 'preview' }
+          id={ 'preview' }
+          style={ { width: '100%', height: '100%' } }
+        >
+
+          <FrameContextConsumer>
+            {( { document, window } ) => (
+              <div>
+                <RenderingComponent
+                  { ...{ document, window } }
+                  renderAdditionalHTML={ false }
+                />
+                {
+                    setTimeout( () => injectRenderer( document ) )
+                  }
+              </div>
+              )}
+          </FrameContextConsumer>
+        </Frame>
+      </div>
+    );
+  }
+}
+
+export default PreviewWrapper;
+
diff --git a/stories/PagedPreviewer/addons.paged.jx b/stories/PagedPreviewer/addons.paged.jx
new file mode 100644
index 0000000..182de35
--- /dev/null
+++ b/stories/PagedPreviewer/addons.paged.jx
@@ -0,0 +1,214 @@
+/* eslint-disable */
+
+/**
+ * DOM observer use to retrigger the resize script when changing content in the page
+ */
+const observeDOM = ( function() {
+    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+
+    return function( obj, callback ) {
+      if ( !obj || !obj.nodeType === 1 ) return; // validation
+
+      if ( MutationObserver ) {
+        // define a new observer
+        const obs = new MutationObserver( function( mutations, observer ) {
+            callback( mutations );
+        } );
+        // have the observer observe foo for changes in children
+        obs.observe( obj, { childList: true, subtree: true } );
+      }
+
+      else if ( window.addEventListener ) {
+        obj.addEventListener( 'DOMNodeInserted', callback, false );
+        obj.addEventListener( 'DOMNodeRemoved', callback, false );
+      }
+    };
+  } )();
+
+if ( window.Paged ) {
+
+      /*
+       * Hooks for paged.js
+       * footnotes support courtesy of RLesur https://github.com/rstudio/pagedown/blob/master/inst/resources/js/hooks.js
+       * Footnotes support
+       */
+        Paged.registerHandlers( class extends Paged.Handler {
+        constructor( chunker, polisher, caller ) {
+          super( chunker, polisher, caller );
+
+          this.splittedParagraphRefs = [];
+          console.log( 'in constructor' );
+        }
+
+        beforeParsed( content ) {
+          console.info( 'spotting footnotes' );
+          const footnotes = content.querySelectorAll( '.footnote' );
+
+          for ( const footnote of footnotes ) {
+            const parentElement = footnote.parentElement;
+            const footnoteCall = document.createElement( 'a' );
+            const footnoteNumber = footnote.dataset.notenumber;
+
+            footnoteCall.className = 'footnote-ref'; // same class as Pandoc
+            footnoteCall.setAttribute( 'id', `fnref${ footnoteNumber}` ); // same notation as Pandoc
+            footnoteCall.setAttribute( 'href', `#${ footnote.id}` );
+            footnoteCall.innerHTML = `<sup id="note-content-pointer-${ footnote.id }">${ footnoteNumber }</sup>`;
+            parentElement.insertBefore( footnoteCall, footnote );
+
+            // Here comes a hack. Fortunately, it works with Chrome and FF.
+            const handler = document.createElement( 'p' );
+            handler.className = 'footnoteHandler';
+            parentElement.insertBefore( handler, footnote );
+            handler.appendChild( footnote );
+            handler.style.display = 'inline-block';
+            handler.style.width = '100%';
+            handler.style.float = 'right';
+            handler.style.pageBreakInside = 'avoid';
+          }
+        }
+
+        afterParsed() {
+          console.info( 'parsing finished, rendering the pages' );
+          console.group( 'rendering pages' );
+          Toastify( {
+            text: 'Rendering pages',
+            duration: 2000
+          } ).showToast();
+        }
+
+        afterPageLayout( pageFragment, page, breakToken ) {
+          console.info( 'page %s is rendered', page.position + 1 );
+          if (page.position%20 === 0 && page.position) {
+            Toastify( {
+              text: 'Rendering pages : ' + (page.position) + '/?',
+              duration: 1000
+            } ).showToast();
+          }
+
+          function hasItemParent( node ) {
+            if ( node.parentElement === null ) {
+              return false;
+            }
+          else {
+              if ( node.parentElement.tagName === 'LI' ) {
+                return true;
+              }
+            else {
+                return hasItemParent( node.parentElement );
+              }
+            }
+          }
+
+          /*
+           * If a li item is broken, we store the reference of the p child element
+           * see https://github.com/rstudio/pagedown/issues/23#issue-376548000
+           */
+          if ( breakToken !== undefined ) {
+            if ( breakToken.node.nodeName === '#text' && hasItemParent( breakToken.node ) ) {
+              this.splittedParagraphRefs.push( breakToken.node.parentElement.dataset.ref );
+            }
+          }
+        }
+
+        afterRendered( pages ) {
+          console.groupEnd( 'rendering pages' );
+          Toastify( {
+            text: `Attaching footnotes to ${ pages.length } pages`,
+            duration: 1000
+          } ).showToast();
+          console.info( 'rendering done, attaching footnotes to %s pages', pages.length );
+          for ( const page of pages ) {
+            const footnotes = page.element.querySelectorAll( '.footnote' );
+            if ( footnotes.length === 0 ) {
+              continue;
+            }
+
+            const pageContent = page.element.querySelector( '.pagedjs_page_content' );
+            const hr = document.createElement( 'hr' );
+            const footnoteArea = document.createElement( 'div' );
+
+            pageContent.style.display = 'flex';
+            pageContent.style.flexDirection = 'column';
+
+            hr.className = 'footnote-break';
+            hr.style.marginTop = 'auto';
+            hr.style.marginBottom = 0;
+            hr.style.marginLeft = 0;
+            hr.style.marginRight = 'auto';
+            pageContent.appendChild( hr );
+
+            footnoteArea.className = 'footnote-area';
+            pageContent.appendChild( footnoteArea );
+            let footnoteIndex = 0;
+            for ( const footnote of footnotes ) {
+              footnoteIndex++;
+              const handler = footnote.parentElement;
+
+              footnoteArea.appendChild( footnote );
+              handler.parentNode.removeChild( handler );
+
+              const footnoteCall = document.getElementById( `note-content-pointer-${ footnote.id}` );
+              if ( footnoteCall ) {
+                footnoteCall.innerHTML = `<sup id="note-content-pointer-${ footnote.id }">${ footnoteIndex }</sup>`;
+              }
+
+              footnote.innerHTML = `<sup class="note-pointer"><a href="#note-content-pointer-${ footnote.id }">${ footnoteIndex }</a></sup>${ footnote.innerHTML}`;
+              // footnote.style.fontSize = 'x-small';
+              footnote.style.marginTop = 0;
+              footnote.style.marginBottom = 0;
+              footnote.style.paddingTop = 0;
+              footnote.style.paddingBottom = 0;
+              footnote.style.display = 'block';
+            }
+          }
+
+          for ( const ref of this.splittedParagraphRefs ) {
+            const paragraphFirstPage = document.querySelector( `[data-split-to="${ ref }"]` );
+
+            /*
+             * We test whether the paragraph is empty
+             * see https://github.com/rstudio/pagedown/issues/23#issue-376548000
+             */
+            if ( paragraphFirstPage.innerText === '' ) {
+              paragraphFirstPage.parentElement.style.display = 'none';
+              const paragraphSecondPage = document.querySelector( `[data-split-from="${ ref }"]` );
+              paragraphSecondPage.parentElement.style.setProperty( 'list-style', 'inherit', 'important' );
+            }
+          }
+          console.info( 'footnotes positionning done' );
+          Toastify( {
+            text: 'Rendering finished !',
+            duration: 3000
+          } ).showToast();
+
+        }
+        } );/* end register handlers */
+    // resize logic
+    const paged = new window.Paged.Previewer();
+    const resizer = () => {
+      const pages = document.querySelector( '.pagedjs_pages' );
+
+      if ( pages ) {
+        const scale = ( ( window.innerWidth * 0.9 ) / pages.offsetWidth );
+        if ( scale < 1 ) {
+          const translateVal = ( window.innerWidth / 2 ) - ( ( pages.offsetWidth * scale / 2 ) );
+          const style = `scale(${ scale }) translate(${ translateVal }px, 0)`;
+          pages.style.transform = style;
+        }
+ else {
+          pages.style.transform = 'none';
+        }
+      }
+    };
+    resizer();
+
+    window.addEventListener( 'resize', resizer, false );
+
+    paged.on( 'rendering', () => {
+      console.log( 'paged is rendering' );
+      resizer();
+    } );
+
+    observeDOM( document.body, resizer );
+
+  }
diff --git a/stories/PagedPreviewer/index.js b/stories/PagedPreviewer/index.js
new file mode 100755
index 0000000..a0cfe97
--- /dev/null
+++ b/stories/PagedPreviewer/index.js
@@ -0,0 +1,3 @@
+import PagedPreviewer from './PagedPreviewer';
+
+export default PagedPreviewer;
diff --git a/stories/PagedPreviewer/previewStyle.paged.csx b/stories/PagedPreviewer/previewStyle.paged.csx
new file mode 100644
index 0000000..c90da90
--- /dev/null
+++ b/stories/PagedPreviewer/previewStyle.paged.csx
@@ -0,0 +1,79 @@
+:root {
+    --color-mbox : rgba(0,0,0,0.2);
+    --margin: 4px;
+    }
+    
+    [contenteditable]:focus {
+      outline: 0px solid transparent;
+    }
+    
+    #controls {
+    display: none;
+    }
+    
+    @media screen {
+    
+    body {
+      background-color: whitesmoke;
+    }
+    
+    .pagedjs_pages{
+      transform: translate(0.5);
+    }
+    
+    .pagedjs_page {
+      background-color: #fdfdfd;
+      margin: calc(var(--margin) * 4) var(--margin);
+      flex: none;
+      box-shadow: 0 0 0 1px var(--color-mbox);
+      pointer-events: none;
+    }
+    
+    .pagedjs_pages {
+      width: calc((var(--width) * 2) + (var(--margin) * 4));
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      transform-origin: 0 0;
+      margin: 0 auto;
+    }
+    
+    #controls {
+      margin: 20px 0;
+      text-align: center;
+      display: block;
+    }
+    
+    .pagedjs_first_page {
+      margin-left: calc(50% + var(--margin));
+    }
+    }
+    
+    @media screen {
+    .debug .pagedjs_margin-top .pagedjs_margin-top-left-corner,
+    .debug .pagedjs_margin-top .pagedjs_margin-top-right-corner {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-top > div {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-right > div {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-bottom .pagedjs_margin-bottom-left-corner,
+    .debug .pagedjs_margin-bottom .pagedjs_margin-bottom-right-corner {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-bottom > div {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    
+    .debug .pagedjs_margin-left > div {
+      box-shadow: 0 0 0 1px inset var(--color-mbox);
+    }
+    }
\ No newline at end of file
diff --git a/stories/assets/mocks.js b/stories/assets/mocks.js
new file mode 100644
index 0000000..187326b
--- /dev/null
+++ b/stories/assets/mocks.js
@@ -0,0 +1,118 @@
+export const printEdition = {
+  data: {
+    additionalHTML: '<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,600,700" rel="stylesheet">',
+    bibType: 'book',
+    citationLocale: {
+      data: '<?xml version="1.0" encoding="utf-8"?> <locale xmlns="http://purl.org/net/xbiblio/csl" version="1.0" xml:lang="fr-FR"> <info> <translator> <name>Grégoire Colly</name> </translator> <rights license="http://creativecommons.org/licenses/by-sa/3.0/">This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 License</rights> <updated>2012-07-04T23:31:02+00:00</updated> </info> <style-options punctuation-in-quote="false" limit-day-ordinals-to-day-1="true"/> <date form="text"> <date-part name="day" suffix=" "/> <date-part name="month" suffix=" "/> <date-part name="year"/> </date> <date form="numeric"> <date-part name="day" form="numeric-leading-zeros" suffix="/"/> <date-part name="month" form="numeric-leading-zeros" suffix="/"/> <date-part name="year"/> </date> <terms> <term name="accessed">consulté le</term> <term name="and">et</term> <term name="and others">et autres</term> <term name="anonymous">anonyme</term> <term name="anonymous" form="short">anon.</term> <term name="at">sur</term> <term name="available at">disponible sur</term> <term name="by">par</term> <term name="circa">vers</term> <term name="circa" form="short">v.</term> <term name="cited">cité</term> <term name="edition" gender="feminine"> <single>édition</single> <multiple>éditions</multiple> </term> <term name="edition" form="short">éd.</term> <term name="et-al">et al.</term> <term name="forthcoming">à paraître</term> <term name="from">à l\'adresse</term> <term name="ibid">ibid.</term> <term name="in">in</term> <term name="in press">sous presse</term> <term name="internet">Internet</term> <term name="interview">entretien</term> <term name="letter">lettre</term> <term name="no date">sans date</term> <term name="no date" form="short">s.&#160;d.</term> <term name="online">en ligne</term> <term name="presented at">présenté à</term> <term name="reference"> <single>référence</single> <multiple>références</multiple> </term> <term name="reference" form="short"> <single>réf.</single> <multiple>réf.</multiple> </term> <term name="retrieved">consulté</term> <term name="scale">échelle</term> <term name="version">version</term> <!-- ANNO DOMINI; BEFORE CHRIST --> <term name="ad">apr. J.-C.</term> <term name="bc">av. J.-C.</term> <!-- PUNCTUATION --> <term name="open-quote">«&#160;</term> <term name="close-quote">&#160;»</term> <term name="open-inner-quote">“</term> <term name="close-inner-quote">”</term> <term name="page-range-delimiter">&#8209;</term> <!-- non-breaking hyphen --> <!-- ORDINALS --> <term name="ordinal">ᵉ</term> <term name="ordinal-01" gender-form="feminine" match="whole-number">ʳᵉ</term> <term name="ordinal-01" gender-form="masculine" match="whole-number">ᵉʳ</term> <!-- LONG ORDINALS --> <term name="long-ordinal-01">premier</term> <term name="long-ordinal-02">deuxième</term> <term name="long-ordinal-03">troisième</term> <term name="long-ordinal-04">quatrième</term> <term name="long-ordinal-05">cinquième</term> <term name="long-ordinal-06">sixième</term> <term name="long-ordinal-07">septième</term> <term name="long-ordinal-08">huitième</term> <term name="long-ordinal-09">neuvième</term> <term name="long-ordinal-10">dixième</term> <!-- LONG LOCATOR FORMS --> <term name="book"> <single>livre</single> <multiple>livres</multiple> </term> <term name="chapter"> <single>chapitre</single> <multiple>chapitres</multiple> </term> <term name="column"> <single>colonne</single> <multiple>colonnes</multiple> </term> <term name="figure"> <single>figure</single> <multiple>figures</multiple> </term> <term name="folio"> <single>folio</single> <multiple>folios</multiple> </term> <term name="issue" gender="masculine"> <single>numéro</single> <multiple>numéros</multiple> </term> <term name="line"> <single>ligne</single> <multiple>lignes</multiple> </term> <term name="note"> <single>note</single> <multiple>notes</multiple> </term> <term name="opus"> <single>opus</single> <multiple>opus</multiple> </term> <term name="page"> <single>page</single> <multiple>pages</multiple> </term> <term name="number-of-pages"> <single>page</single> <multiple>pages</multiple> </term> <term name="paragraph"> <single>paragraphe</single> <multiple>paragraphes</multiple> </term> <term name="part"> <single>partie</single> <multiple>parties</multiple> </term> <term name="section"> <single>section</single> <multiple>sections</multiple> </term> <term name="sub verbo"> <single>sub verbo</single> <multiple>sub verbis</multiple> </term> <term name="verse"> <single>verset</single> <multiple>versets</multiple> </term> <term name="volume" gender="masculine"> <single>volume</single> <multiple>volumes</multiple> </term> <!-- SHORT LOCATOR FORMS --> <term name="book" form="short">liv.</term> <term name="chapter" form="short">chap.</term> <term name="column" form="short">col.</term> <term name="figure" form="short">fig.</term> <term name="folio" form="short"> <single>fᵒ</single> <multiple>fᵒˢ</multiple> </term> <term name="issue" form="short"> <single>nᵒ</single> <multiple>nᵒˢ</multiple> </term> <term name="line" form="short">l.</term> <term name="note" form="short">n.</term> <term name="opus" form="short">op.</term> <term name="page" form="short"> <single>p.</single> <multiple>p.</multiple> </term> <term name="number-of-pages" form="short"> <single>p.</single> <multiple>p.</multiple> </term> <term name="paragraph" form="short">paragr.</term> <term name="part" form="short">part.</term> <term name="section" form="short">sect.</term> <term name="sub verbo" form="short"> <single>s.&#160;v.</single> <multiple>s.&#160;vv.</multiple> </term> <term name="verse" form="short"> <single>v.</single> <multiple>v.</multiple> </term> <term name="volume" form="short"> <single>vol.</single> <multiple>vol.</multiple> </term> <!-- SYMBOL LOCATOR FORMS --> <term name="paragraph" form="symbol"> <single>§</single> <multiple>§</multiple> </term> <term name="section" form="symbol"> <single>§</single> <multiple>§</multiple> </term> <!-- LONG ROLE FORMS --> <term name="director"> <single>réalisateur</single> <multiple>réalisateurs</multiple> </term> <term name="editor"> <single>éditeur</single> <multiple>éditeurs</multiple> </term> <term name="editorial-director"> <single>directeur</single> <multiple>directeurs</multiple> </term> <term name="illustrator"> <single>illustrateur</single> <multiple>illustrateurs</multiple> </term> <term name="translator"> <single>traducteur</single> <multiple>traducteurs</multiple> </term> <term name="editortranslator"> <single>éditeur et traducteur</single> <multiple>éditeurs et traducteurs</multiple> </term> <!-- SHORT ROLE FORMS --> <term name="director" form="short"> <single>réal.</single> <multiple>réal.</multiple> </term> <term name="editor" form="short"> <single>éd.</single> <multiple>éd.</multiple> </term> <term name="editorial-director" form="short"> <single>dir.</single> <multiple>dir.</multiple> </term> <term name="illustrator" form="short"> <single>ill.</single> <multiple>ill.</multiple> </term> <term name="translator" form="short"> <single>trad.</single> <multiple>trad.</multiple> </term> <term name="editortranslator" form="short"> <single>éd. et trad.</single> <multiple>éd. et trad.</multiple> </term> <!-- VERB ROLE FORMS --> <term name="container-author" form="verb">par</term> <term name="director" form="verb">réalisé par</term> <term name="editor" form="verb">édité par</term> <term name="editorial-director" form="verb">sous la direction de</term> <term name="illustrator" form="verb">illustré par</term> <term name="interviewer" form="verb">entretien réalisé par</term> <term name="recipient" form="verb">à</term> <term name="reviewed-author" form="verb">par</term> <term name="translator" form="verb">traduit par</term> <term name="editortranslator" form="verb">édité et traduit par</term> <!-- SHORT VERB ROLE FORMS --> <term name="director" form="verb-short">réal. par</term> <term name="editor" form="verb-short">éd. par</term> <term name="editorial-director" form="verb-short">ss la dir. de</term> <term name="illustrator" form="verb-short">ill. par</term> <term name="translator" form="verb-short">trad. par</term> <term name="editortranslator" form="verb-short">éd. et trad. par</term> <!-- LONG MONTH FORMS --> <term name="month-01" gender="masculine">janvier</term> <term name="month-02" gender="masculine">février</term> <term name="month-03" gender="masculine">mars</term> <term name="month-04" gender="masculine">avril</term> <term name="month-05" gender="masculine">mai</term> <term name="month-06" gender="masculine">juin</term> <term name="month-07" gender="masculine">juillet</term> <term name="month-08" gender="masculine">août</term> <term name="month-09" gender="masculine">septembre</term> <term name="month-10" gender="masculine">octobre</term> <term name="month-11" gender="masculine">novembre</term> <term name="month-12" gender="masculine">décembre</term> <!-- SHORT MONTH FORMS --> <term name="month-01" form="short">janv.</term> <term name="month-02" form="short">févr.</term> <term name="month-03" form="short">mars</term> <term name="month-04" form="short">avr.</term> <term name="month-05" form="short">mai</term> <term name="month-06" form="short">juin</term> <term name="month-07" form="short">juill.</term> <term name="month-08" form="short">août</term> <term name="month-09" form="short">sept.</term> <term name="month-10" form="short">oct.</term> <term name="month-11" form="short">nov.</term> <term name="month-12" form="short">déc.</term> <!-- SEASONS --> <term name="season-01">printemps</term> <term name="season-02">été</term> <term name="season-03">automne</term> <term name="season-04">hiver</term> </terms> </locale>',
+      id: 'fr-FR',
+      names: [
+        'Français (France)',
+        'French (France)'
+      ]
+    },
+    citationStyle: {
+      data: '<?xml version="1.0" encoding="utf-8"?> <style xmlns="http://purl.org/net/xbiblio/csl" class="in-text" version="1.0" demote-non-dropping-particle="sort-only"> <info> <title>American Psychological Association 5th edition</title> <title-short>APA</title-short> <id>http://www.zotero.org/styles/apa-5th-edition</id> <link href="http://www.zotero.org/styles/apa-5th-edition" rel="self"/> <link href="http://rdc.libguides.com/content.php?pid=63487" rel="documentation"/> <author> <name>Simon Kornblith</name> <email>simon@simonster.com</email> </author> <contributor> <name>Bruce D\'Arcus</name> </contributor> <contributor> <name>Curtis M. Humphrey</name> </contributor> <contributor> <name>Richard Karnesky</name> <email>karnesky+zotero@gmail.com</email> <uri>http://arc.nucapt.northwestern.edu/Richard_Karnesky</uri> </contributor> <contributor> <name>Sebastian Karcher</name> </contributor> <category citation-format="author-date"/> <category field="psychology"/> <category field="generic-base"/> <updated>2012-09-27T22:06:38+00:00</updated> <rights license="http://creativecommons.org/licenses/by-sa/3.0/">This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 License</rights> </info> <macro name="container-contributors"> <choose> <if type="chapter paper-conference" match="any"> <text term="in" text-case="capitalize-first" suffix=" "/> <names variable="editor" delimiter=", " suffix=", "> <name and="symbol" initialize-with=". " delimiter=", "/> <label form="short" prefix=" (" text-case="capitalize-first" suffix=")"/> <substitute> <names variable="translator"/> </substitute> </names> </if> </choose> </macro> <macro name="secondary-contributors"> <choose> <if type="chapter paper-conference" match="none"> <names variable="translator" delimiter=", " prefix=" (" suffix=")"> <name and="symbol" initialize-with=". " delimiter=", "/> <label form="short" prefix=", " text-case="capitalize-first"/> <substitute> <names variable="editor"/> </substitute> </names> </if> </choose> </macro> <macro name="author"> <names variable="author"> <name name-as-sort-order="all" and="symbol" sort-separator=", " initialize-with=". " delimiter=", " delimiter-precedes-last="always"/> <label form="short" prefix=" (" suffix=")" text-case="capitalize-first"/> <substitute> <names variable="editor"/> <names variable="translator"/> <text macro="title"/> </substitute> </names> </macro> <macro name="author-short"> <names variable="author"> <name form="short" and="symbol" delimiter=", " initialize-with=". "/> <substitute> <names variable="editor"/> <names variable="translator"/> <choose> <if type="bill book graphic legal_case legislation motion_picture report song" match="any"> <text variable="title" form="short" font-style="italic"/> </if> <else> <text variable="title" form="short" quotes="true"/> </else> </choose> </substitute> </names> </macro> <macro name="access"> <choose> <if type="thesis"> <choose> <if variable="archive" match="any"> <group> <text term="retrieved" text-case="capitalize-first" suffix=" "/> <text term="from" suffix=" "/> <text variable="archive" suffix="."/> <text variable="archive_location" prefix=" (" suffix=")"/> </group> </if> <else> <group> <text term="retrieved" text-case="capitalize-first" suffix=" "/> <date variable="accessed" suffix=", "> <date-part name="month" suffix=" "/> <date-part name="day" suffix=", "/> <date-part name="year"/> </date> <text term="from" suffix=" "/> <text variable="URL"/> </group> </else> </choose> </if> <else> <choose> <if variable="URL"> <choose> <if variable="archive"> <group> <text term="retrieved" text-case="capitalize-first" suffix=" "/> <text term="from" suffix=" "/> <text variable="archive" suffix="."/> </group> </if> <else> <group> <text term="retrieved" text-case="capitalize-first" suffix=" "/> <date variable="accessed" suffix=", "> <date-part name="month" suffix=" "/> <date-part name="day" suffix=", "/> <date-part name="year"/> </date> <group> <text term="from" suffix=" "/> <text variable="URL"/> </group> </group> </else> </choose> </if> </choose> </else> </choose> </macro> <macro name="title"> <choose> <if type="report thesis" match="any"> <text variable="title" font-style="italic"/> <group prefix=" (" suffix=")"> <text variable="genre"/> <text variable="number" prefix=" No. "/> </group> </if> <else-if type="bill book graphic legal_case legislation manuscript motion_picture report song speech" match="any"> <text variable="title" font-style="italic"/> </else-if> <else> <text variable="title"/> </else> </choose> </macro> <macro name="publisher"> <choose> <if type="report" match="any"> <group delimiter=": "> <text variable="publisher-place"/> <text variable="publisher"/> </group> </if> <else-if type="thesis" match="any"> <group delimiter=", "> <text variable="publisher"/> <text variable="publisher-place"/> </group> </else-if> <else> <choose> <if variable="event" match="none"> <text variable="genre" suffix=", "/> </if> </choose> <group delimiter=": "> <text variable="publisher-place"/> <text variable="publisher"/> </group> </else> </choose> </macro> <macro name="event"> <choose> <if variable="event"> <choose> <if variable="genre" match="none"> <text term="presented at" text-case="capitalize-first" suffix=" "/> <text variable="event"/> </if> <else> <group delimiter=" "> <text variable="genre" text-case="capitalize-first"/> <text term="presented at"/> <text variable="event"/> </group> </else> </choose> </if> </choose> </macro> <macro name="issued"> <choose> <if variable="issued"> <group prefix=" (" suffix=")."> <date variable="issued"> <date-part name="year"/> </date> <choose> <if type="article-journal bill book chapter graphic legal_case legislation motion_picture paper-conference report song" match="none"> <date variable="issued"> <date-part prefix=", " name="month"/> <date-part prefix=" " name="day"/> </date> </if> </choose> </group> </if> <else> <text prefix=" (" term="no date" suffix=")." form="short"/> </else> </choose> </macro> <macro name="issued-year"> <choose> <if variable="issued"> <date variable="issued"> <date-part name="year"/> </date> </if> <else> <text term="no date" form="short"/> </else> </choose> </macro> <macro name="edition"> <choose> <if is-numeric="edition"> <group delimiter=" "> <number variable="edition" form="ordinal"/> <text term="edition" form="short"/> </group> </if> <else> <text variable="edition" suffix="."/> </else> </choose> </macro> <macro name="locators"> <choose> <if type="article-journal article-magazine article-newspaper" match="any"> <group prefix=", " delimiter=", "> <group> <text variable="volume" font-style="italic"/> <text variable="issue" prefix="(" suffix=")"/> </group> <text variable="page"/> </group> </if> <else-if type="bill book chapter graphic legal_case legislation motion_picture paper-conference report song" match="any"> <group prefix=" (" suffix=")" delimiter=", "> <text macro="edition"/> <group> <text term="volume" form="short" plural="true" text-case="capitalize-first" suffix=" "/> <number variable="number-of-volumes" form="numeric" prefix="1-"/> </group> <group> <text term="volume" form="short" text-case="capitalize-first" suffix=" "/> <number variable="volume" form="numeric"/> </group> <group> <label variable="page" form="short" suffix=" "/> <text variable="page"/> </group> </group> </else-if> </choose> </macro> <macro name="citation-locator"> <group> <label variable="locator" form="short"/> <text variable="locator" prefix=" "/> </group> </macro> <citation et-al-min="6" et-al-use-first="1" et-al-subsequent-min="3" et-al-subsequent-use-first="1" disambiguate-add-year-suffix="true" disambiguate-add-names="true" disambiguate-add-givenname="true" givenname-disambiguation-rule="primary-name" collapse="year"> <sort> <key macro="author"/> <key macro="issued-year"/> </sort> <layout prefix="(" suffix=")" delimiter="; "> <group delimiter=", "> <text macro="author-short"/> <text macro="issued-year"/> <text macro="citation-locator"/> </group> </layout> </citation> <bibliography hanging-indent="true" et-al-min="8" et-al-use-first="7" entry-spacing="0" line-spacing="2"> <sort> <key macro="author"/> <key macro="issued-year" sort="ascending"/> </sort> <layout> <group suffix="."> <text macro="author" suffix="."/> <text macro="issued" suffix=" "/> <group delimiter=". "> <text macro="title"/> <group> <text macro="container-contributors"/> <text macro="secondary-contributors"/> <group delimiter=", "> <text variable="container-title" font-style="italic"/> <text variable="collection-title"/> </group> </group> </group> <text macro="locators"/> <group delimiter=", " prefix=". "> <text macro="event"/> <text macro="publisher"/> </group> </group> <text macro="access" prefix=". "/> </layout> </bibliography> </style>',
+      id: 'apa-5th-edition',
+      title: 'American Psychological Association 5th edition'
+    },
+    plan: {
+      summary: [
+        {
+          data: {
+            animatedBackground: 'none',
+            backgroundColor: '#466CA6'
+          },
+          id: 'a6ca685b-b16e-4232-b882-447b4788401e',
+          type: 'frontCover'
+        },
+        {
+          id: 'bca30c0e-1dc3-446f-ba48-c3dca72349aa',
+          type: 'titlePage'
+        },
+        {
+          data: {
+            notesPosition: 'footnotes'
+          },
+          id: 'e9ed4a17-2691-4c3a-97fc-ac5bffdd5aff',
+          type: 'sections'
+        },
+        {
+          data: {
+            resourceTypes: [
+              'bib'
+            ],
+            showMentions: false,
+            showUncitedReferences: true,
+            sortingAscending: true,
+            sortingKey: 'date'
+          },
+          id: 'c0400061-4bd3-4de7-a3d9-7db519235f79',
+          type: 'references'
+        },
+        {
+          data: {
+            backgroundColor: '#D6CFC4',
+            useAbstract: true
+          },
+          id: 'dbf00f43-72d6-4966-ad05-6eaa8176627b',
+          type: 'backCover'
+        }
+      ],
+      type: 'linear'
+    },
+    style: {
+      css: '.image{\n\tpage-break-before: always;\n\tpage-break-after: always;\n  width: 100%;\n  max-height: 100%;\n}',
+      mode: 'merge'
+    }
+  },
+  id: '37b8b4b9-9bb9-4021-8e08-903b4c6e4fa3',
+  lastUpdateAt: 1555609018359,
+  metadata: {
+    templateId: 'pyrrah',
+    title: 'paginé',
+    type: 'paged'
+  }
+};
+
+export const editionTypes = {
+  'frontCover': {
+    data: {
+      animatedBackground: 'none',
+      backgroundColor: '#466CA6'
+    },
+    id: 'a6ca685b-b16e-4232-b882-447b4788401e',
+    type: 'frontCover'
+  },
+  'titlePage': {
+    id: 'bca30c0e-1dc3-446f-ba48-c3dca72349aa',
+    type: 'titlePage'
+  },
+  'sections': {
+    data: {
+      notesPosition: 'footnotes'
+    },
+    id: 'e9ed4a17-2691-4c3a-97fc-ac5bffdd5aff',
+    type: 'sections'
+  },
+  'references': {
+    data: {
+      resourceTypes: [
+        'bib'
+      ],
+      showMentions: false,
+      showUncitedReferences: true,
+      sortingAscending: true,
+      sortingKey: 'date'
+    },
+    id: 'c0400061-4bd3-4de7-a3d9-7db519235f79',
+    type: 'references'
+  },
+  'backCover': {
+    data: {
+      backgroundColor: '#D6CFC4',
+      useAbstract: true
+    },
+    id: 'dbf00f43-72d6-4966-ad05-6eaa8176627b',
+    type: 'backCover'
+  }
+};
diff --git a/stories/index.stories.js b/stories/index.stories.js
new file mode 100644
index 0000000..c31ef36
--- /dev/null
+++ b/stories/index.stories.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import {preprocessEditionData} from 'peritext-utils'
+
+import ContextProvider from './ContextProvider';
+
+import template from '../src';
+import production from './assets/production.json';
+import { printEdition, editionTypes } from './assets/mocks';
+
+const {
+  components: {
+    Edition
+  }
+} = template;
+
+const contextualizers = {
+  bib: require( 'peritext-contextualizer-bib' ),
+  webpage: require( 'peritext-contextualizer-webpage' ),
+  glossary: require( 'peritext-contextualizer-glossary' ),
+  embed: require( 'peritext-contextualizer-embed' ),
+  video: require( 'peritext-contextualizer-video' ),
+  image: require( 'peritext-contextualizer-image' ),
+  sourceCode: require( 'peritext-contextualizer-source-code' ),
+  vegaLite: require( 'peritext-contextualizer-vegalite' ),
+  table: require( 'peritext-contextualizer-table' ),
+};
+
+const extractSpecificView = ( viewType ) => {
+
+  const newEdition = {
+    ...printEdition,
+    data: {
+      ...printEdition.data,
+      plan: {
+        ...printEdition.data.plan,
+        summary: [ editionTypes[viewType] ]
+      }
+    }
+  };
+
+  const thatPrepro = preprocessEditionData( {
+    production,
+    edition: newEdition
+  } );
+  return {
+    edition: newEdition,
+    preprocessedData: thatPrepro
+  };
+};
+
+const renderWithEdition = (  { edition: thatEdition, preprocessedData: thatPrepro } ) => (
+  <>
+    <div id="source">
+      <ContextProvider
+          renderingMode={ 'screened' }
+      >
+          <Edition
+            {
+              ...{
+                production,
+                edition: thatEdition,
+                preprocessedData: thatPrepro,
+                lang: 'fr',
+                contextualizers,
+                previewMode: true,
+                locale: {},
+              }
+            }
+          />
+        </ContextProvider>
+      </div>
+      <div id="preview" />
+  </>
+  
+);
+
+storiesOf( 'Template', module )
+  .add( 'complete edition', () => renderWithEdition( printEdition ) )
+  .add( 'sections', () => renderWithEdition( extractSpecificView( 'sections' ) ) )
+  .add( 'front page', () => renderWithEdition( extractSpecificView( 'frontCover' ) ) )
+  .add( 'title page', () => renderWithEdition( extractSpecificView( 'titlePage' ) ) )
+  .add( 'references', () => renderWithEdition( extractSpecificView( 'references' ) ) )
+  // .add( 'glossary', () => renderWithEdition( extractSpecificView( 'glossary' ) ) )
+  .add( 'back cover', () => renderWithEdition( extractSpecificView( 'backCover' ) ) )