JavaScript
Article
By Chris Coyier

10 Cool Things You Can Do with CodePen and JavaScript

By Chris Coyier

Hey web people! I work on CodePen a playground for front end web design and development. One of the things you can do on CodePen is create Pens, which are HTML, CSS, and JavaScript you create and see the result of immediately. Ty North has already told you about some reasons to use CodePen, so this time, I thought I’d focus on some of the things you can do specifically with JavaScript on CodePen.

1. Add Any Library You Want, Quickly

Every Pen has its own Settings. This is where you can set things like what External JavaScript you’d like to use.

Adding an external library

It’s as simple as selecting a library from the Quick Add dropdown, or even better, just start typing the library and we’ll offer matching choices. There are thousands of CDN-hosted libraries we offer through typeahead.

2. Write in ES2015

If you’re like me and baby-stepping into new ES2015 features, you can practice on CodePen by enabling the Babel JavaScript preprocessor.

Selecting a JavaScript preprocessor

Now you can use ES2015 features and Babel will process them down to older version of JavaScript so what you write works everywhere.

View compiled JavaScript

Shown here is the let keyword, an arrow function, and template literals.

You can also write ES2015 stuff without using Babel as well, but you may run into browser support issues like you would any other cutting edge feature.

3. Use a Real Console for Output and Debugging

You can use your browser’s DevTools console on CodePen, of course. But you need to make sure you set the context of it to the demo <iframe>, or else it won’t work.

Or, you can pop open CodePen’s built-in console, which is always in the correct context.

CodePen's JavaScript Console

Mini tip! You might notice the URL change when you open/close differnet code panels. There are four numbers, and stand for HTML, CSS, JS, and Console (in that order). So the URL parameter:

?editors=0011

Stands for HTML closed, CSS closed, JavaScript open, Console open. Passing a 2 as the last number maximizes the console. In this way you could share a Pen where the output is intentionally only for the console.

4. Use React and JSX

Babel, awesomely, also supports the JSX syntax. By adding React and ReactDOM, you have all the ingredients to build in React!

Hello, World! in React

Try opening this template to give it a try.

Besides Babel, CodePen offers CoffeeScript, TypeScript, and LiveScript. TypeScript will process the JSX as well!

5. Include Other Pens as Resources

Let’s say you wanted to use the JavaScript from another Pen. You can do that! Just drop the URL of that other Pen in External JavaScript, and CodePen will know what you mean.

Include another Pen as a resource

This way you can create multiple Pens that all use the same JavaScript, so it may be easier to update. This works for CSS in the same way. For HTML, you include the Pen URL in triple brackets within the HTML itself, like:

Example of using triple square brackets around a Pen URL to include that HTML

We also have more robust Asset Hosting as a PRO feature.

6. Ajax Stuff from Other Pens

Speaking of using other Pens as resources, you can access the raw code from Pens at special URLs. For example, if you want to access just the JavaScript from another Pen, add .js to the end of the URL, like:

http://codepen.io/SamyBencherif/pen/ONyQOQ.js

You could Ajax for that and use it elsewhere. Or cURL for it, or whatever else. This can be useful for storing data in another Pen as to not muddy up the JavaScript in the Pen you are working on.

You can access the raw code of any Pen with these URL extensions:

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
JS Raw JS .js N/A
CoffeeScript .coffeescript .js
LiveScript .livescript .js
TypeScript .typescript .js
Babel .babel .js

7. Teach People Things

In some sense, people can learn from any Pen on CodePen. It’s real code you can not only look at but see the results of. Some people even make Pens that are specifically about teaching something. Our blogging feature is used almost entirely for technical writing in the spirit of teaching.

But CodePen has other, more direct ways of teaching. For example, Professor Mode, which allows other people to watch you code in real time, as well as chat with you and each other.

Professor Mode, which allows other people to watch you code in real time

Collab Mode is useful for teaching too: it allows multiple people to work on a Pen at the same time, meaning the teaching can happen hands-on.

8. See Major Errors in Your Code as-You-Type

An (in my opinion!) underrated feature of CodePen is that it warns of you of errors in your code right within the editor. JavaScript is no exception here. When CodePen detects an error, it will highlight the line and show an icon. Click the icon to reveal the error message, which may be helpful in understanding the problem.

JSHint running as you type

CodePen will even try and prevent you from executing infinite loops (which are bad because they lock up the browser and may prevent you from saving your work).

9. Lint Your JavaScript

You can have CodePen check your JavaScript with the popular JS Hint.

A tool that helps to detect errors and potential problems in your JavaScript code.

This might uncover problems that aren’t execution-stopping errors that we automatically check for.

JSHint results

Just in case the error message isn’t clear enough, there are handy-dandy Google it links for finding more information.

CodePen lints your processed JavaScript. So if you’re using a preprocessor, it will lint the processed code for linting warnings. If JS Hint finds something to warn you about, it will flip over to the compiled code to show you there.

If JS Hint finds nothing, it’ll tell you!

JS Hint found no errors! You're good.

10. Tidy up Your JavaScript

One click will clean up your code! It’s even friendly with JSX.

CodePen's Tidy feature in action


If you have any favorite JavaScript features or tricks on CodePen, I’d love to hear ’em!

  • Leandro Maioral

    Which font are you using in your code? I really like it :)

  • Very helpful! I never knew Codepen had a built in console and Babel support.

  • Codepen just keeps getting more impressive and plain useful every year. Amazing work, @chriscoyier:disqus

  • Leandro Maioral

    Thanks!

  • Antonella

    Super cool tool for showcasing, experimenting, learning, sharing …

  • M S i N Lund

    Yep, great site.
    And nice article too.

    I started coding something similar years ago, but never got around to finish it.
    And this site is everything I wanted, and more.
    Much better than anything I would have built.

    Nice to see the “If you want it done right, do it yourself”-principle disproved every now and then.

    And now you also have a bunch of decent contrast light themes to choose from.
    I really hate coding om dark background, and i despise low-contrast designs even more.
    The theme “XQ Light ” fixes both those things nicely

    That was the only thing i didn’t like about codepen.
    My eyes thanks who ever fixed that bit.

  • Hi @chriscoyier:disqus and welcome to SitePoint. So glad you shared these great tips with everyone here.

  • Jerome Mercier

    Codepen support Emmet. I like Emmet. Very much.

  • When will you add debug functionality? Also could you elaborate how you set proper context for the browser console? I find it hard to debug with codepen. Thanks

  • Evgeniy

    Thank you, Chris. I’ve never know about this powerful staff.

  • Jason Boxman

    And CodePen Radio for the win. Also.

  • Tiffany White

    Great tips @chriscoyier:disqus! Free Code Camp uses CodePen quite a bit to host our front-end stuff. I have seen the use of Babal and Sass but didn’t know how to get down to it. I have also seen other people using other pens as resources. Neat tool. I am a Pro user because of the live testing. Great stuff. Keep it going, Chris!

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.