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, open the Settings panel for the Pen, then slide the “Make Template?” toggle on. Next, press the green “Save & Close” button.
Using a Template
To use a template, you can choose it from the dropdown menu under Pen > from template on the home page.
Or, visit the Pen and click the “Use this template” button at the bottom right of the editor view.
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!
Removing a Template
To remove a template, visit the original template Pen and slide the “Make Template?” toggle off 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: