What is Presentation Mode?

Presentation Mode is a special view on CodePen meant specifically for showing a Pen on an overhead projector. Like when a teacher projects their computer screen onto the wall in the front of the room, or a speaker plugs in their laptop to give a presentation. Here’s a video demonstrating why it is so useful for that:

How do I get access to Presentation Mode?

You have to be a PRO member of CodePen and all of your Pens will have Presentation Mode automatically. Go to a Pen you own, open the View Switcher menu, and click the Presentation Mode link.

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

/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.


Can I use Presentation Mode on other’s people’s Pens?

Yep, as long as you are PRO, you can open any Pen in Presentation Mode. We suggest you always give credit to the author when presenting and demonstrating their work.

Do Presentation Mode and Professor Mode work together?

Unfortunately not yet. We plan to get this working though. We realize some of you use this in a classroom environment where you might want to use an overhead projector and also have students following along on their own computers.