A Pen is a website. More specifically, a Pen is a collection of files and blocks that builds into a website hosted on CodePen. They are quick and easy to build and can be whatever you want them to be.

People make Pens for any number of reasons, from just doing throwaway experimentation, to collaborating on demos for team discussion, to building production websites.

Files

You’ve got a complete file system to work with on your Pens where you can put files and folders that work for what you need to do. The number of files you can use is limited by your plan.

Blocks

Blocks are technologies you can add to any Pen that process the code as part of the Pen’s build process. An example of this is like Babel, which can transform JavaScript to enable future APIs and syntax and process JSX, or Sass, which has a special syntax adding features to CSS.

Deployment

Any Pen can be deployed to become a live public site on the internet.

Versions

Every save of a Pen becomes part of the version history of a Pen which you can roll back to if you need to.

Private Pens, Collaboration, & Privacy Settings

Pens can be private or locked down even further, like password-protected or available only to invited collaborators. Collaborators can also be editors who can work with you on the Pen anytime, including in real time.

Pen Details, Commenting & Social Activity

You can write in Markdown about you Pen, which is an opportunity to explain things, leave credits, or anything else useful to accompany the Pen. You can also tag it and see metadata about the Pen (like hearts, last updated date, etc) from the Details Panel.

The Details Panel is also where other users can leave a comment on the Pen.

Pen Settings

The Pen Settings modal is a place to control certain things about the Pen as well as give you a place to control the appearance and behavior of the Editor itself. This is the place to changing things like the site theme, the syntax highlighting theme, fonts and typography controls, indentation, and snippets, among other things.

Packages

CodePen offers a global search for npm packages and gives you copy-and-pasteable code to use them in your Pens. Global CDNs offer a way to use third-party libraries easily on CodePen.

Forking & Making Copies of Pens

As long as your current plan can support it, you can fork any Pen you have access too, including all Public Pens on CodePen. A fork is an exact copy of the code and relevant settings of a Pen.

If you’re forking a Pen because it is like a starter with the code, Blocks, and settings you like, consider making a template.

Deleting Pens

Only the owner of a Pen can delete it, and it moves into the Deleted Pens area of your Your Work area for a three-day recovery period, then is permanently deleted.

Exporting Pens

Pens can be downloaded to your local computer as a .zip file.

Sharing Pens

You’re free to share any Pen on CodePen, but there are some things you should know because of the different possible privacy settings. There are also certain features for sharing Pens exactly as you want them to be seen.

Using the CodePen Console

CodePen has a built-in console that allows you to see the things you log to the console in JavaScript, as well as enter commands that execute in the preview.

Pen Templates

You can make any Pen you own a template, which makes it available in various menus on the site for easy access. When you start a Pen from a template, it’s a brand new Pen (not a fork) it just has the exact code, Blocks, and relevant settings as the template has. This is useful if you have a favorite starting point for your work, or you need to make a number of Pens that all start from a similar state.

Limitations

There are just a few limits on what CodePen allows in Pens, aside from adherence to our Terms of Service and Code of Conduct. Things like the number of files per Pen is limited by plan.

Licensing on Pens

Pens are public by default, and public Pens are MIT Licensed. PRO users can make private Pens, which have no implicit license.

How to Save Changes to a Pen

Pens that you own or are the editor of can be saved at any time by pressing the Save button or pressing Command-S (Mac) or Control-S (PC).

Auto Save

After you’ve made your first save of a Pen, if you have the Auto Save setting on (which it is by default), your Pen will automatically save ever 20 seconds.