Access Code Directly
On any Pen, you can access the code that was written in one of the code panels by adding extensions to the Pen’s URL. This is handy for things like linking the CSS from one Pen to another Pen. These URLs should not be used in production outside of CodePen.
For instance, here’s a Pen URL:
https://codepen.io/chriscoyier/pen/gHnGD
You can access the HTML, CSS, and JavaScript at these URLs:
https://codepen.io/chriscoyier/pen/gHnGD.html
https://codepen.io/chriscoyier/pen/gHnGD.css
https://codepen.io/chriscoyier/pen/gHnGD.js
But actually, SCSS was used to create that Pen. The .css URL shows you the processed CSS. To access the SCSS directly, you’d use:
https://codepen.io/chriscoyier/pen/gHnGD.scss
Depending on the Pen preprocessor options, this is what you have access to:
| If a Pen is… | Raw Code | Preprocessed Code | |
|---|---|---|---|
| HTML | Raw HTML | .html | N/A |
| Markdown | .markdown | .html | |
| Slim | .slim | .html | |
| HAML | .haml | .html | |
| CSS | Raw CSS | .css | N/A |
| Sass | .sass | .css | |
| SCSS | .scss | .css | |
| Less | .less | .css | |
| Stylus | .stylus | .css | |
| PostCSS | .postcss | .css | |
| JS | Raw JS | .js | N/A |
| CoffeeScript | .coffeescript | .js | |
| LiveScript | .livescript | .js | |
| TypeScript | .typescript | .js | |
| Babel | .babel | .js |
Screenshots for Each Pen
Large Image Preview
https://codepen.io/USERNAME/pen/SLUG/image/large.png
Small Image Preview
https://codepen.io/USERNAME/pen/SLUG/image/small.png
Editor Layout
To open the Pen Editor in a particular layout…
- Editors on left = ?layout=right
- Editors on right =
- Editors on top =
There is also an editors param that controls which editors are open:
https://codepen.io/USERNAME/pen/SLUG/?editors=1010In the four digit number (e.g. 1010), 1 is open, 0 is closed. The first digit is the HTML editor, second is the CSS editor, third is the JavaScript editor, and the fourth is the console.