As a PRO member, you can make embeds of your Pens editable. Editable embeds are great for documentation and web development tutorials. The preview of your Pen is updated live on your website as your visitors type into the editor panels, just like the Editor on CodePen. And, your visitors can fork a copy of your Pen with their changes and save it to their own CodePen account.

Live Demo

This is a live editable embed! You can make changes to the code and watch it update live.

When you make changes to the Pen, the option to fork the Pen will appear in the upper right corner. Click “Fork on CodePen” to fork a copy of the Pen into your own CodePen account.

How do I make my embed editable?

On the Embed menu, slide the “Make Code Editable” to “On”. Then, copy the code from the code box.

How do I control how embeds look on my website?

You can change your embed theme to coordinate with your website’s design. PRO members can created unlimited embed themes. All of the details on embed theming are in our documentation for Unlimited Embed Themes.

What happens to my embeds if I downgrade my account?

Your embeds will stay on your website, but they won’t be editable after you downgrade. If you renew your subscription, they’ll be editable again.