What is Live View?

Live View is a full page view of your Pen that updates in real time as you update the code in your Pen. Literally as you type, just like the preview in the Editor, except that this URL can be open in another window or tab, in a different browser, or even on a completely different computer or device. This is particularly useful for cross-browser and cross-device testing. Rather than having to go over to each device you are testing and manually reload the page when you make changes, your changes are injected automatically and instantly. You also don't need to install any software or go through any complicated setup. Just open the Live View URL and you're good to go! Here's a video showing how sweet it is:

How do I get Live View?

You have to be a PRO member of CodePen and all of your pens will have Live View automatically. Go to a Pen you own, click open the View Switcher, and click the Live option (or Get URL to select and copy it).

Can I Live View other's people's Pens?

You can open their Pens in Live View but only the owner of the Pen can open the real-time connection and do real-time updating. Remember though, you can always fork their pen and open your fork in Live View and then you are the owner and get the real time updating.

Do Live View and Collab Mode/Professor Mode work together?

Yep! They totally do. If you have a Pen open in Collab Mode or Professor Mode, the Live View will update as you update the code in those views.

How many devices can I have using Live View at once?

As many as you'd like.

How do I open the Live View URL on other devices?

Just enter the URL on the device in that devices browser. If the other device happens to be able to receive text messages, you can send the URL directly to the device just by typing in the phone number. And it works anywhere in the world! Another way is to log into CodePen on that device so you can click around CodePen and get the the Live View for any particular Pen without doing any typing.

Is this only for cross-browser or cross-device testing?

If you have a large (or multiple) monitors, you can use Live View as your preview while working on a Pen. That way you can expand the editors all the way and collapse the editor preview and have lots of room for code. Learn more.

dual-screen

And this is just one of many features you get on CodePen PRO. See all the features or watch a video.

It's just $9/month or $75/year.