diff --git a/website/_harp.json b/website/_harp.json
index c9cd5f02b..caa67a9f9 100644
--- a/website/_harp.json
+++ b/website/_harp.json
@@ -21,7 +21,8 @@
         "SOCIAL": {
             "twitter": "spacy_io",
             "github": "explosion",
-            "reddit": "spacynlp"
+            "reddit": "spacynlp",
+            "codepen": "explosion"
         },
 
         "NAVIGATION": {
diff --git a/website/_includes/_mixins.jade b/website/_includes/_mixins.jade
index 030e9a776..4874783f0 100644
--- a/website/_includes/_mixins.jade
+++ b/website/_includes/_mixins.jade
@@ -90,6 +90,19 @@ mixin code(label, language)
             block
 
 
+//- CodePen embed
+    slug        - [string] ID of CodePen demo (taken from URL)
+    height      - [integer] height of demo embed iframe
+    default_tab - [string] code tab(s) visible on load (default: "result")
+
+mixin codepen(slug, height, default_tab)
+    figure.o-block(style="min-height: #{height}px")&attributes(attributes)
+        .codepen(data-height=height data-theme-id="26467" data-slug-hash=slug data-default-tab=(default_tab || "result") data-embed-version="2" data-user=SOCIAL.codepen)
+            +a("https://codepen.io/" + SOCIAL.codepen + "/" + slug) View on CodePen
+
+        script(async src="https://assets.codepen.io/assets/embed/ei.js")
+
+
 //- Images / figures
     url     - [string] url or path to image
     width   - [integer] image width in px, for better rendering (default: 500)