DEV Community


Eleventy Plugin for efficient CodePen embeds | Notes

abhiweb profile image Kumar Abhishek Originally published at on ・2 min read

Direct Links:

Yet another 11ty plugin to embed CodePens into you pages. The other plugins that I had seen use CodePen’s preferred Javascript based embeds. It requires loading an external Javascript (though, a small one) into your page. The Codepen embed Javascript finally creates an <iframe> anyway!

I wanted a more efficient solution for my blog by directly embedding the Pen’s iFrame; therefore I wrote this plugin.

Usage §

STEP 1: Install the plugin:

npm install --save-dev @manustays/eleventy-plugin-codepen-iframe
Enter fullscreen mode Exit fullscreen mode

STEP 2: Include it in your .eleventy.js config file:

const embedCodePen = require("@manustays/eleventy-plugin-codepen-iframe");
module.exports = (eleventyConfig) => {   
 eleventyConfig.addPlugin(embedCodePen, { tabs: "js,result" });
Enter fullscreen mode Exit fullscreen mode

STEP 3 – Use it in your templates like this:

{% CodePen "", "result", "220" %}
Enter fullscreen mode Exit fullscreen mode

Config Options §

These options set the default values for embedded Pens. They can be overridden while embedding individual Pens.

Option Type Default Description
tabs string “result” Default comma-separated string of the tabs of the codepen to display
height number 300 Default height of Pen iFrames
width string “100%” Default width of Pen iFrames
theme string “dark” Default theme for all Pens
user string “” CodePen user-id to use if only Pen-id is provided
class string “codepen” CSS classes to add to the iFrame

Demo §

Check it out live in my other post A Regular Expression to filter invalid names

Read on

Discussion (0)

Editor guide