Presentation Mode is a special view on CodePen meant specifically for showing a Pen on an overhead projector or any other screen where space is limited and you need quick access to how the screen is presented. That is, control over the font sizing, colors, preview size, and layout.
For example, when a teacher projects their computer screen onto the wall in the front of a classroom, they may want to switch to a light-on-dark theme with bigger fonts that looks best on in that context, where when they use CodePen normally, they use a dark-on-light theme with smaller fonts. Or a professional speaker who often uses the overhead project system in conference halls, where they don’t know the room environment ahead of time and need quick control.
Presentation mode makes those things easy by offering on-page controls for display, and less on-page UI to maximize the space available for code and preview. Here’s a video:
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 all 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× down to 0.5× or 0.25×, 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
The query parameters layout=left (or top, or right) work to force the layout into having the code editors in one of those positions.
Also editors=1010 is an example query parameter for which panels you’d like 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, and the fourth is for the console.
Show the URL
Did someone ask for the URL to get to that Pen? Show it to them very large (so people in the back can see it!) 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 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, so let us know if that’s your situation and we can work together on it.