Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Presentation Mode is for teachers, professors, presenters, speakers and the like that need to project their computer screen through an overhead projector. If you have some experience doing that, you might know that overhead projectors vary quite a bit as do the conditions in the room you are in. We kept all those things in mind while creating Presentation Mode.


Presentation mode is a PRO feature.

What are the features of Presentation Mode?

There are many!


More screen real estate

We remove the normal CodePen header. Every bit counts when working with a projector with very low resolution. You should be able to present even on 800×600 projectors.

Faster loading

WiFi at conferences can be quite slow. We’ve done our best to lighten up the load in Presentation Mode, removing all but the most essential features.

Resizeable preview

You can drag the preview area larger and smaller just like you can in the in the normal editor, but in Presentation Mode you can resize the scale from the normal 1.0x down to 0.5x or 0.25x, in case there isn’t enough room to show off what you are trying to show off.

On-the-fly theme changing

Change to any of our syntax highlighting themes instantly from a dropdown in the footer. In some room situations, dark-on-light themes are better and in others light-on-dark is better. Also change the font-size on-the-fly.

Supports all different layouts

Add /left/, /right/, or /top/ to the end of the URL to ensure Presentation Mode opens in that layout. Also append ?editors=101 to the end to maximize/minimize which editors you want open. The first digit is for the HTML editor (1 is maximized, 0 is minimized), the second for the CSS editor, the third for the JS editor.

Show the URL

Did someone ask for the URL to get to that Pen? Show it to them HUGE with a click of a button.



Wanna see it all work?

It’s good for codecasting as well

I’ve used CodePen quite a bit in creating screencasts of coding. Presentation Mode might work great for all the same reasons it works well on a projector. You often want to lower the resolution of your monitor before recording the screen as it makes the video more manageable and so people don’t have to watch full-screen.

Remember that conference talks often end up online as well. Ryan Seddon recently used CodePen in a talk.


I wish we could have gotten him Presentation Mode a little sooner!