1. Add any library you need in one place
2. Write in ES2015
3. You can use the console for debugging and output
With CodePen, you can also use your browser’s DevTools if you set its context to demo. CodePen also features a built-in console which you can use. Keep in mind that your URL might change when you close or open different code panels. There are four numbers which stand for HTML, CSS, JS and Console respectively so the URL parameter ?editors=0001 stands for Console open while the others are closed. Replacing the last number with a 2 maximizes the console. This way you can share a Pen when the output is intentionally set only for the console.
4. Use JSX and React
Babel also supports JXSX so if you add ReactDOM and React you’ll be able to build in react as well. Apart from Babel, CodePen also offers LiveScript, TypeScript and CoffeeScript. TypeScript is able to process the JSX as well.
5. You can also include other pens as resources
This little trick also works for CSS in the same way. When it comes to HTML you can include the Pen URL in triple brackets within the HTML itself.
6. Get Ajax from other Pens
7. Learn new stuff with CodePen
Devs can use CodePen as a learning tool as well – it’s real code which you can write, edit but also see the results of. You can create Pens for learning purposes specifically but our favourite is the Professor Mode which allows other devs to watch you code in real time and give pointers through the built in chat system.
Collab Mode is another useful tool which can be used for teaching purposes – this mode allows multiple people to work on a Pen concurrently for hands-on teaching.
8. You can see coding errors in real time
CodePen also tries to prevent executing infinite loops which can lock your browser and prevent you from saving your Pen.
10. Clean code – easier work
CodePen also has a feature which can help to clean up your code. This feature works with JSX as well.