Hero image

<codepen-link>

Codepen is an awesome platform to share ideas and showcase what you can achieve with the Web platform. Did you know there is a way to dynamically create a pen with pre-filled code?

Codepen has an amazing API to allow developers to do this, the way to do it is via submitting a form element. Details are available in the Codepen documentation

I made a web component that'll hopefully make this integration even simpler. <codepen-link>

The easiest way to get started is to use a CDN, just add this script tag into your html and you'll have a new HTML tag available.

<script type="module" src="https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.esm.js"></script><script nomodule src="https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.js"></script>

The type="module" and nomodule parts will differentiate the browsers that support ES modules and those don't support. The user will only wait for one of them to be executed. The new HTML tag will allow you to do something like this

<codepen-link

html="<h1>Hello world</h1>"

title="Open in CodePen"

pen-title="New demo pen"

editors="110"

css-preprocessor="scss"

css="body{ font-family: 'Open Sans', sans-serif; }"

css-external="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"

js-external="https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.js">

<button type="button">Click me view in Codepen</button>

</codepen-link>

More details available over at NPM site