Introducing Prefill Embeds!

January 17, 2019

It's brand new feature time! This one has been on our radar for years now and hotly requested by many of you.

You probably know about Embedded Pens. Any Pen on CodePen can be embedded onto another site. We provide copy-and-paste, progressive-enhancement friendly code to do that. The Pen then loads up in a special UI designed to showcase the code and result in a simple and small-screen accommodating way.

But in order to use regular Embedded Pens... you need to have a saved Pen. That might be exactly what you want. A perfect little demo to demonstrate something that is easy to update.

But sometimes... you want to be able to manage the code from your own website, not from CodePen itself. That's exactly what Prefill embeds are. If you're ready to get started, you can check out the documentation right now.

I think this series of images does a good job of explaining:

1. Perhaps you already have a blog or documentation site?2. You manage the content in your own files or databases3. Including important code snippets that document your thing.4. CodePen Prefill Embeds simply wrap those snippets5. We enhance those snippets from your codebase into live-rendering demos.6. The code in the embeds can even be live editable, making an on-site playground.7. Have fun!

Here's an example right here

All the code for the embed is right here in this blog post, not saved as a Pen.

<div class="module">
<h2>All the code for me... </h2>
<p>...is right here in this blog post</p>
</div>

Why is this useful?

The main reason is that it makes it super easy to render bits of code in a little demo window. Fellow developers will be able to see code and output side by side, which is tremendous for learning and seeing code work.

Want people to play? Toss data-editable onto the wrapper <div> and it turns into an editable playground.

You can also hide away things that are important for the live rendering, but not so much for seeing in the text. Say you are demonstrating a React component. You've probably bound it to a <div id="root"> and loaded up React and ReactDOM to make it work. But you can simply configure your Prefill Embed to have those things, making them otherwise hidden.

Who is this for?

Anyone with a blog who wants to manage their code demonstrations through code right in their blog post instead of a saved Pen.

Anyone with a documentation site that keeps the code for the demos inside of a repo, or in Markdown files, or in their own database.

Perhaps a student curriculum site where it's easiest to keep the curriculum updated right on the site, wiki style, than it is to maintain the Pens on CodePen itself.

Here's how you can get started with the Prefill Embed HTML code right away

Ironically, while you don't need to have a saved Pen on CodePen to use the Prefill Embeds (that's the whole point), the Pen Editor does make for a very handy way to prepare a Prefill Embed. Since Prefill Embeds support all the same features as the Pen Editor, that's especially true.

It's this easy.

1) Take any Pen

Craft it just how you want it. The code, the settings, the external resources... Then click on the Embed button in the footer.

2) Click onto the Prefill Embed tab

3) Paste the code it gives you wherever your HTML lives, and it'll do it's thing!

High Five, Stephen!

Our own Stephen Shaw led up this release, and he did a tremendous job. 🎉