The Template feature lets you create and save a default set of code and settings for Pens, like a reusable "starter kit".

Say sometimes you like to use Haml, Sass, and have jQuery available — you could make a template for that. Maybe sometimes you like to use Jade, Sass, and the responsive meta tag in the <head> — you could make a template for that, too.

But templates aren't just settings, they are the actual code in the HTML, CSS, and JS editors as well! Anything you write in the editor panels will be included in your template.

Creating a Template

To make a Pen a template, check the "Template" box in that Pen's settings, then press the green "Save & Close" button.

PRO members can make unlimited templates. Free members can make up to three templates.

Using a Template

To use a template, choose it from the dropdown menu attached to the New Pen button:

Any new Pen you make from a template starts out as an exact copy of the template, minus the template title and description.

Removing a Template

Your templates are in the Templates section of your profile. To remove a template, hover over it and click "Remove as Template" — it won't delete the Pen, but it will remove it from your template list. Nothing will happen to any Pens you created with that template.

You can also remove a template by unchecking the "Template" box in its Pen settings.

Templates are different from forks

When you fork a Pen, the new Pen you create from that fork is displayed in the "Forks" section of your profile, and will not show up in search. It also links directly to the original Pen in the description. None of these things apply to a Pen created from a Template. A Pen created from a template is a new, original Pen with no "history" behind it.

Templates are different from using a Pen as an external resource

Pens made from a template are not linked to the template in any way, so any changes you make to the template will only apply to new Pens made from the template. The opposite is true for Pens that use another Pen as an external resource — when you update the external resource Pen, any Pens that link to it are also updated.


We put this in the API section of the documentation because it's one of the more common requests for third-party integration. It answers the question "How can I send people to the CodePen editor with example code and settings all set up how I want?" Our POST API is for that, but it may not be as easy as just making a Pen and linking up a URL like this:

We used to call this "Auto Forking" and it had a slightly different URL, but we're considering that deprecated now in favor of templating (it does the exact same thing).