Codepen Prefill Embeds!

Jan 28, 2019 · 126 words · 1 minute read api codepen

Codepen has been my default way to prototype and play around with some ideas for front end work. It has long been an essential part of my workflow.

Codepen has enhanced their embedding capabilities with Prefill Embeds.

All you need to do is wrap your code that has a few parameters and wraps your code in pre tags and includes some JS and you got an instant pen. The full instructions are here on how to set them up. This is a great way to not have every snippet inside of your account or something for a documentation site as well.

<picture> <source type=“image/webp” srcset=“image.webp”> <source type=“image/jpeg” srcset=“image.jpg”> <img src=“image.jpg” alt=“My Image”> </picture>


let d = document;
d.addEventListener( ‘visibilitychange’ , function () {
  console.log(d.hidden);
}, false)