Posted on by Chris Coyier

React CodePen Prefill Embeds

Prefill embeds is a pretty cool feature of CodePen. They allow you to use CodePen Embeds, but instead of needing to maintain that code on CodePen itself, it reads the code right from your own documentation, blog, markdown, whatever. That means:

  • The code executes
  • The user can see and interact with the output
  • The code is syntax highlighted and editable
  • The user can fork and save it

The easiest way to get started is by making a Pen on CodePen just to start, then opening the Embed panel and copy and pasting the example embed code.

Even if you don't use it exactly as-is, this code will help you get started with the syntax and format of the API.

But what if you aren't using an HTML or Markdown template? What if you're using React and JSX? Alex Zaworski has built the perfect tool: react-codepen-prefill-embed.

It means you can use our API through its API, which is just far more React/JSX friendly:

No escaping of code or worrying about fiddly indentation of code.

Alex is also the creator of the CodePen Enhancement Suite, which has a bunch of fancy features like zen mode and extra syntax highlighting themes.