diff --git a/_data/demos.json b/_data/demos.json
index c291792..98f4f3c 100644
--- a/_data/demos.json
+++ b/_data/demos.json
@@ -33,5 +33,11 @@
     "url": "demos/2014-04-09-requirejs",
     "slug": "requirejs",
     "label": "RequireJS with Shuffle"
+  },
+  {
+    "external": true,
+    "url": "http://codepen.io/pen?template=qrjOpX",
+    "slug": "codepen-template",
+    "label": "CodePen Template"
   }
 ]
diff --git a/_includes/demo-list.html b/_includes/demo-list.html
index eb033d6..59492d9 100644
--- a/_includes/demo-list.html
+++ b/_includes/demo-list.html
@@ -1,7 +1,11 @@
 <div class="row js-demos demo-list">
   {% for post in site.data.demos %}
     <div class="col-3@sm col-3@xs figure-wrap js-demo">
+      {% if post.external %}
+      <a href="{{ post.url }}" target="_blank" rel="noopener">
+      {% else %}
       <a href="{{ site.baseurl }}/{{ post.slug }}">
+      {% endif %}
         <figure>
           <div class="aspect aspect--4x3">
             <picture>
diff --git a/img/demos/codepen-template.jpg b/img/demos/codepen-template.jpg
new file mode 100644
index 0000000..91204bb
Binary files /dev/null and b/img/demos/codepen-template.jpg differ
diff --git a/img/demos/codepen-template.png b/img/demos/codepen-template.png
new file mode 100644
index 0000000..ff2e5b5
Binary files /dev/null and b/img/demos/codepen-template.png differ
diff --git a/img/demos/codepen-template.webp b/img/demos/codepen-template.webp
new file mode 100644
index 0000000..ede44d2
Binary files /dev/null and b/img/demos/codepen-template.webp differ
diff --git a/index.html b/index.html
index 594d644..aa14024 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,7 @@ prism: true
     </div>
     <div class="row">
       <nav class="col-6@sm" role="secondary">
+        <a href="http://codepen.io/pen?template=qrjOpX" target="_blank" rel="noopener">Start a CodePen with a Shuffle template <span style="font-family:monospace;">↗</span></a>
         <a href="https://github.com/Vestride/Shuffle">View the GitHub repository</a>
         <a href="https://github.com/Vestride/Shuffle/releases">See the latest releases</a>
       </nav>