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…
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.
How can I start creating my own pens on CodePen?
How can I share my CodePen projects with others?
Sharing your CodePen projects is quite simple. Each pen you create has a unique URL that you can share with others. You can also embed your pens on other websites using the ‘Embed’ option available on each pen’s page.
Can I collaborate with others on a CodePen project?
Yes, CodePen Pro users have the ability to collaborate with others in real-time on the same pen. This feature is called ‘Collab Mode’ and allows multiple people to edit a pen at the same time.
Can I use CodePen for commercial projects?
Yes, you can use CodePen for commercial projects. However, it’s important to note that all pens are public by default and can be seen by others. If you want to create private pens for commercial projects, you’ll need to upgrade to CodePen Pro.
Can I use CodePen offline?
No, CodePen is an online platform and requires an internet connection to work. However, you can use CodePen Pro’s ‘Collab Mode’ to work on pens with others in real-time, even if you’re not in the same location.