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:

More

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.