Anybody can make any Pen they own a Template. Templates make it easier for you to start new Pens from useful starting points. Rather than use the default files & code that CodePen provides, you can have your own set of files, settings, and Blocks that represent a common way you like to work.

You make a Pen you own into a template in any of these three different ways:

1. Opening the  menu in the header and toggling the Template option on.
2. Using the Omnibar to find and run the command “Change Template”
3. Changing the Template setting in the Pen Settings modal

Note that nothing fundamentally changes about how a Pen works when it is a template. It’s just a designation you apply so that it makes it easier for you and others to find and use.

Examples of Templates

• Template with Sass, TypeScript, Nunjucks, and Prettier (Use as Template)
• Template Product Card Page with Vue and JSON Data (Use as Template)

Bookmarking Templates

You can bookmark any Pen, but when you bookmark a template, you’ll see a small set of recently bookmarked templates in the editor itself, in the Files panel, on a brand new unsaved Pen.

Any template you’ve bookmarked also shows up on the Create page which helps you find templates of your own or that you might be interested in.

Using Other People’s Templates

When a Pen is a template, you’ll see a Use Template button in the header which anyone (including yourself) can use to start a new Pen with the same files, settings, and Blocks.

When you make a public Pen into a template, it might be mainly for yourself, or it might be you providing easy access for others to use a starting point you’ve created just for them.

Note that if you want to make a Pen a template for your own use, but want to ensure it’s not available for other’s public use, you’ll need to make the Pen private.

Your Default Template

You can set one Pen to be your Default Template so when you head to the editor without choosing a template, you automatically get that one.