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. Updates happen 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?
Live View is a CodePen PRO feature. When you go PRO, all of your Pens will have Live View automatically. Go to a Pen you own, open the Change View menu, and click the Live View option.
Can I Live View other people’s Pens?
You can open other members’ Pens in Live View, but only the owner of the Pen can open the real-time connection and do real-time updating. However, you can fork their Pen and open your fork in Live View. You’re the owner of the fork, so you can see the real time updating for the fork.
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?
Enter the live view URL on the device in that device’s 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 extra 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.
