diff --git a/_includes/codepen.html b/_includes/codepen.html
index 875e5262f..7eea27b8f 100644
--- a/_includes/codepen.html
+++ b/_includes/codepen.html
@@ -14,6 +14,7 @@ Files required under _includes/codepens/id/
 index.html
 index.js
 index.css
+example.js optional file, when present the displayed JS tab example will use example.js, while the real code executes with index.js
 
 {% endcomment %}
 
@@ -25,7 +26,11 @@ index.css
 {% endcapture %}
 
 {% capture codepen_js %}
-{% include codepens/{{ include.id }}/index.js %}
+    {% if exists codepens/{{ include.id }}/example.js %}
+        {% include codepens/{{ include.id }}/example.js %}
+    {% else %}
+        {% include codepens/{{ include.id }}/index.js %}
+    {% endif %}
 {% endcapture %}
 
 {% capture codepen_css %}
diff --git a/_includes/codepens/drive/example.js b/_includes/codepens/drive/example.js
new file mode 100644
index 000000000..ebdcb19f5
--- /dev/null
+++ b/_includes/codepens/drive/example.js
@@ -0,0 +1,4 @@
+tinymce.init({
+  selector: 'textarea',
+  testing: 'i am fake'
+});
\ No newline at end of file
diff --git a/_includes/codepens/drive/index.html b/_includes/codepens/drive/index.html
new file mode 100644
index 000000000..6735bf775
--- /dev/null
+++ b/_includes/codepens/drive/index.html
@@ -0,0 +1,59 @@
+<textarea>
+  <p style="text-align: center;">
+    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
+  </p>
+
+  <h1 style="text-align: center;">Welcome to the TinyMCE editor demo!</h1>
+
+  <p>
+    Please try out the features provided in this basic example.<br>
+    Note that any <strong>MoxieManager</strong> file and image management functionality in this example is part of our commercial offering – the demo is to show the integration.
+  </p>
+
+  <h2>Got questions or need help?</h2>
+
+  <ul>
+    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
+    <li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/" target="_blank">Community Forum</a>.</li>
+    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
+  </ul>
+
+  <h2>A simple table to play with</h2>
+
+  <table style="text-align: center;">
+    <thead>
+      <tr>
+        <th>Product</th>
+        <th>Cost</th>
+        <th>Really?</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>TinyMCE</td>
+        <td>Free</td>
+        <td>YES!</td>
+      </tr>
+      <tr>
+        <td>Plupload</td>
+        <td>Free</td>
+        <td>YES!</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Found a bug?</h2>
+
+  <p>
+    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
+  </p>
+
+  <h2>Finally ...</h2>
+
+  <p>
+    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
+  </p>
+  <p>
+    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
+  </p>
+</textarea>
diff --git a/_includes/codepens/drive/index.js b/_includes/codepens/drive/index.js
new file mode 100644
index 000000000..60bd10a93
--- /dev/null
+++ b/_includes/codepens/drive/index.js
@@ -0,0 +1,20 @@
+tinymce.init({
+  selector: 'textarea',
+  plugins: 'image media link tinydrive code imagetools',
+  api_key: 'fake-key',
+  content_css: [
+    "//fonts.googleapis.com/css?family=Lato|Lobster|Noto+Serif|Permanent+Marker|Raleway|Roboto|Source+Code+Pro",
+    "//tiny.cloud/css/content-standard.min.css"
+  ],
+  height: 600,
+  imagetools_cors_hosts: ['picsum.photos'],
+  tinydrive_token_provider: (success, failure) => {
+    success({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo' });
+  },
+  tinydrive_demo_files_url: '{{ site.baseurl }}/demo/tiny-drive-demo/demo_files.json',
+  toolbar: 'insertfile image link | code',
+  content_css: [
+    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
+    '//www.tiny.cloud/css/codepen.min.css'
+  ]
+});
\ No newline at end of file
diff --git a/_includes/codepens/drive/style.css b/_includes/codepens/drive/style.css
new file mode 100644
index 000000000..db5bca213
--- /dev/null
+++ b/_includes/codepens/drive/style.css
@@ -0,0 +1,6 @@
+button.olark-launch-button {
+  z-index: 1 !important;
+}
+.menu {
+  z-index: 1000 !important;
+}
\ No newline at end of file
diff --git a/plugins/drive.md b/plugins/drive.md
index 440ba7eaa..5c99feb18 100644
--- a/plugins/drive.md
+++ b/plugins/drive.md
@@ -13,6 +13,10 @@ To enable this functionality, add `tinydrive` to the list of plugins in the `tin
 Once you enable Drive it integrates as the default file picker for the Image, Link, and Media dialogs and as the default upload handler for local images being pasted or inserted into the document.
 
 
+## Live example
+
+{% include codepen.html id="drive" %}
+
 ### Example
 
 ```js