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:
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>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
body {
font-family: 'Open Sans', sans-serif;
height: 100vh;
display: grid;
place-items: center;
}
.module {
border: 2px solid purple;
h2 {
background: purple;
color: white;
margin: 0;
padding: 1rem;
}
p {
margin: 1rem;
}
}
If I want to change any of the code in this embed, I can just edit this blog post!
It's an HTML API
You control everything through HTML elements and attributes on those elements. Your best bet is to check out the documentation which covers every possible value you can use to control things.
Here's a taste though, a <pre> block of some escaped HTML that we'll render in a prefilled embed:
<div
class="codepen"
data-prefill
data-height="400"
data-default-tab="html,result"
>
<pre data-lang="html">
<div class="module">
<h3>Module Title</h3>
<p>This little piggy went to market.</p>
</div>
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<div class="module">
<h3>Module Title</h3>
<p>This little piggy went to market.</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. 🎉
The post Introducing Prefill Embeds! appeared first on CodePen Blog.