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.
Was this article helpful?
YesNo