Pen Templates allow you to create and save a default set of code and settings for making new Pens. Think of them like a reusable "starter kit". In fact, Pen Templates are just other Pens that you've flipped the toggle to become a Template.
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, change the toggle in that Pen's settings, then press the green "Save & Close" button.
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.
How many do you get?
PRO members can save unlimited templates!
Here's a quick 3 minute video covering all the important things to know about Templates:
Removing a Template
To remove a template, visit the templates section of your profile and find the template you'd like to remove. 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 if it's possible for you to make a Pen ahead of time, it's easier to do that and link up a URL like this: