Settings are a place to control certain things about specific Pens as well as the behavior and appearance of the Editor itself, which apply to all Pens as you use CodePen logged into your account.

Pen Settings are Specific to a Single Pen

Pen Details

Here’s you can update the Pen’s title, giving it a very prominent and visible name that everyone who has access to the Pen can see. You can also change that from the header of the Editor by clicking on the pencil icon while hovering over the title. You can also use Markdown formatting to add a Pen Description, which is visible to yourself and others through the Details & Comments panel. These fields are searchable when you do searches through Your Work and for all users globally searching CodePen.

Tags

Tags are generally used to signify the main topics of a Pen. If you created a set of UI tabs using Vue using Font Awesome icons in each tab, you might tag a Pen #tabs, #vue, and #fontawesome. But that’s entirely up to you and you can do whatever works for you. They are a form of global grouping that has a variety of use cases. Learn more about Tags.

Template

Any Pen you own can be marked as a template. Templates are starting points for new Pens. You can select a template when starting a new Pen, which will then make a brand new Pen using the same code, settings, and Blocks.

Custom Thumbnail

This isn’t so much a setting as a reminder that your Pen can display a custom thumbnail when viewed in a grid on CodePen (e.g. your profile, search, or the following/trending feeds) by including a file called template.jpg (or .webp, .avif, or .png) in the root of the Pen.

This is included here as in CodePen’s old editor, PRO members could upload an image to do this, and the only place it could be done is settings.

Behavior & Processing

Auto Save

Auto Save works a little differently on CodePen.

Auto Save doesn’t kick in until you’ve made your first save on a Pen you’re an owner or editor of. This is to prevent you from playing with some old Pen you’re re-visiting and accidentally saving it when you didn’t want to.

Auto Save (after that first save to kick it on) is active by default, but this setting allows you to turn it off. Once on, it automatically saves every 20 seconds. You always save manually.

Auto-Updating Preview

By default, the preview updates as you update code and add/remove files. This happens without saving (and you can update Pens you don’t have Editor access too temporarily to see changes). If you prefer, you can turn this off, and the preview will only update when you ask it to specifically. This is by pressing the Refresh button on the preview, pressing Command-Shift-7, or running the Refresh Preview command via the Omnibar.

Editor Settings are Applied Globally

When you change Editor Settings from a Pen, you are changing your global settings that effect all Pens (with one exception, code indentation, which will look at below). This will typically not change any functionality of the Pen or how it builds, but just how the editor looks and behaves as you work. For example, you can choose the syntax highlighting color theme, and that will stick with you as you move around CodePen, until you change it again.

Themes & Fonts

There are two themes on CodePen:

  1. The overall Site Theme
  2. The Syntax Highlighting color theme

It generally makes sense to pick a light syntax highlighting color theme when you’ve activated the light site theme, but that’s entirely up to you and they can be controlled independently.

You may pick System for the Site Theme and then CodePen will match what color theme your browser is using (or operating system, if you browser is following what your OS is using).

Features

Features settings are split between Local Editor and Global Editor settings.

Local Editor settings control only this one Pen you’re currently looking at, and control the code indentation. For example, one Pen might use 2-space indentation, and another Pen might use tabs with 6 space depth indentation. This is controlled at the Pen level, not the User level, so that all Editors working on a Pen aren’t overridding different preferences. Or a single Editor just might have different preferences from Pen to Pen.

Global Editor settings are where you set preferences for how the code editor behaves for you, and these preferences are set as you move from Pen to Pen on CodePen. These are choices like whether you prefer to see line numbers, see lines wrap or not, and whether you want to use gutter space for code folding icons. None of these settings affect how the Pen processes code or how other users experience the Pen.

Snippets

Snippets are Emmet powered. You can turn off Emmet entirely here if you don’t prefer it on. Emmet is a tool for expanding abbreviations in HTML and CSS. For instance, ul>li*4>lorem10 will expand to this in HTML automatically:

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, at?</li>
  <li>Neque, odit magnam? Quidem numquam maiores, perferendis laudantium blanditiis obcaecati!</li>
  <li>Sit cum, officiis odio tempore illo autem quo esse sint!</li>
  <li>Numquam nulla harum ducimus maiores quibusdam blanditiis unde tempora excepturi!</li>
</ul>Code language: HTML, XML (xml)

Likewise, abbreviations like bgc will expand to background-color: #fff; in CSS, potentially saving you time typing.

Those abbreviations are built-in to Emmet, but you can add your own. For example, try a CSS snippet like myCenter, which you can have expand into:

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}Code language: CSS (css)

Where are preprocessors?

In the old CodePen Editor, the Pen Settings dialog is where you would choose a preprocessor to use to process HTML, CSS, and JavaScript. These processors are now handled by Blocks, a new concept in CodePen 2.0