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:
- Delete the Pen
- Fork a Pen (save your own copy and edit to your liking)
- Add it to a Collection
- Upload and access your Assets (PRO feature)
Also see the main documentation page for documentation on a variety of other features of the CodePen editor.
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:
- Author in normal CSS, or use a CSS preprocessor and write in Sass (.sass or .scss), LESS, or Stylus.
- Use a CSS preprocessor add-on, like Compass or Bourbon for Sass, LESSHat for LESS, or Nib for Stylus.
- Analyze your CSS with CSS Lint.
- Use Emmet’s “fuzzy search” which is a bit like CSS abbreviations. E.g.
ov:h[TAB] turns intooverflow: hidden; - Add External Resources, like linking to
.cssfiles to be included or even preprocessor dependencies. - Select a CSS starting point, like the Meyer Reset, Normalize.css, or neither.
The JS Editor
From the JS Editor, you can:
- Author directly in vanilla JavaScript, or use a JS preprocessor like CoffeeScript or LiveScript.
- Analyze your JS with JS Hint.
- Add External Resources, like linking to
.jsfiles to be included or even preprocessor dependancies.
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.