Editor View is the main view of a Pen on CodePen. It contains:

  • The HTML editor
  • The CSS editor
  • The JS editor
  • The Live Preview
  • Pen Settings

You can create, edit, and save Pens from here. It’s kind of the heart-and-soul of CodePen! There are a variety of other things you can do from the editor as well, like:

Also see the main documentation page for documentation on a variety of other features of the CodePen editor.

See Full Size

The HTML Editor

From the HTML Editor, you can:

  • Author in normal HTML, or use a HTML preprocessor and write in Markdown, Jade, Slim, or Haml.
  • Use Tab Triggers to help write common bits of HTML
  • Use Emmet to write HTML abbreviations that expand out into regular HTML.
  • Add class names to be added to the <html> element
  • Include things you wish to be in the <head> of the document. In CodePen, you only include what goes in the <body> in the HTML editor (see the preview template).
  • Include other Pen’s HTML by using the syntax [[[http://codepen.io/rmkp/pen/ruLCJ]]] in the HTML itself.

The CSS Editor

From the CSS Editor, you can:

The JS Editor

From the JS Editor, you can:


There are a lot of features to the CodePen editor, and they change fairly frequently. We encourage you to explore! Both the editor and the UI you see there and the Settings area.

Was this article helpful?