New CodePen Feature: Prefill Embeds

I’m very excited this feature is ready for y’all. You can take any <pre> block of HTML, CSS, and JavaScript (or any combination of them) and enhance it into an embed, meaning you can see the rendered output. Very progressive enhancement friendly! It also lets you pass in stuff like external resources, making it a great choice for, say, documentation sites or the like.

Here’s an example right here:

<div id="root"></div>

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
  margin: 0;
  font-family: Montserrat, sans-serif;
}
header {
  background: #7B1FA2;
  color: white;
  padding: 2rem;
  font-weight: bold;
  font-size: 125%
}

class NavBar extends React.Component {
  render() {
    return(
      <header>
        Hello World, {this.props.name}!
      </header>
    );
  }
}
ReactDOM.render(
  <NavBar name="Chris" />,
  document.getElementById('root')
);

What you can’t see is is this block, appended to the embed snippet:

<pre data-lang="html"><div id="root"></div></pre>
<pre data-lang="scss" >@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
  margin: 0;
  font-family: Montserrat, sans-serif;
}
header {
  background: #7B1FA2;
  color: white;
  padding: 2rem;
  font-weight: bold;
  font-size: 125%
}</pre>
  <pre data-lang="babel">class NavBar extends React.Component {
  render() {
    return(
      <header>
        Hello World, {this.props.name}!
      </header>
    );
  }
}
ReactDOM.render(
  <NavBar name="Chris" />,
  document.getElementById('root')
);</pre>

If I want to update that demo, I can do it by editing this blog post. No need to head back to CodePen. 🙌

Direct Link →