You might say the Pen Editor is the most important page on CodePen! This is the place you actually write the code to make Pens. The standard editor is HTML, CSS, and JavaScript.

The Big Idea

You write code in the editors, the results of that code are shown to you in the preview area. It’s simple, but powerful! Beginners and experts alike work best when they can see the results of what they are doing as they do it.

How do you make a Pen?

You must have an account and be logged in, then you head to the Pen Editor, and save it when you are ready.

How do I save changes?

After the first save, changes you make in the Pen Editor are automatically saved on a timer, but that is a Pen-level setting you can change if you wish.

You can also fork a Pen to make another copy.

How do I share a Pen?

By default, Pens are public, meaning the Pen will have a URL you can share anywhere you like and anyone will be able to see it. You could share it to Twitter, Facebook, over email… anywhere you like.

Just by virtue of saving a public Pen, you’re also making it public to the world of CodePen. Your followers will see it in their following page and it will be available in global search.

Important Concept: You can make Pens private as well. A private Pen will not show up in global search (we’ll even try to hide it from search engines) and won’t be on your public profile or anywhere else. But you can still share a private Pen. If you give someone the URL, they’ll still be able to see it.

The Different Pen Views

  • Full Page View is a way to look at (or share) a Pen that uses almost the whole screen to show the preview, and doesn’t show the code.
  • Details View shows a large preview of the Pen, but you can still turn on the code areas if you wish. Details has more social information about your Pen, like who has loved it, the comments, sharing buttons, the license, and more.
  • Debug View is for looking at your Pen full-screen with no iframe. It’s only for logged in you (unless you’re PRO) , so it’s not great for sharing, but it’s great for debugging!
  • Live View is a full-screen preview of your Pen that live updates as you code. For PRO members only.
  • Collab Mode and Professor Mode are PRO-only views for working in real-time with other people.
  • Presentation Mode is PRO-only view using the Pen Editor on an overhead projector, so there are more options for changing the view and extra room.

Can I use code from outside of CodePen, like Bootstrap or React?

Absolutely, external resources are the trick there and we try to make it as easy as possible.

You might want to search or browse around for examples as well, because it’s always interesting to see how other people have built things on CodePen.

Can I use a preprocessor like Sass, Markdown, or Babel?

Absolutely, we support all the most popular HTML preprocessors, CSS preprocessors, and JavaScript preprocessors.

Can I customize the editor?

Big time!

  • You can change the layout in the Pen by clicking Change View and changing the options in there.
  • You can change fonts, syntax highlighting colors, defaults, and more in your editor settings.
  • You can turn on and off and customize autocomplete as well as use tab triggers and create your own.
  • You can resize the editors to your liking anytime.
  • You can even create your own templates.

Was this article helpful?