1. Add Any Library You Want, Quickly
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
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.
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:
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!
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
We also have more robust Asset Hosting as a PRO feature.
6. Ajax Stuff from Other Pens
.js to the end of the URL, like:
You can access the raw code of any Pen with these URL extensions:
|If a Pen is…||Raw Code||Preprocessed
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.
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
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).
This might uncover problems that aren’t execution-stopping errors that we automatically check for.
Just in case the error message isn’t clear enough, there are handy-dandy Google it links for finding more information.
If JS Hint finds nothing, it’ll tell you!
One click will clean up your code! It’s even friendly with JSX.
Chris is a web designer and developer. He writes about all thing web at CSS-Tricks, talks about all things web at conferences around the world and on his podcast ShopTalk, and co-founded the web coding playground CodePen.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well