Live View: A Live-Updating Full-Page Preview
Preview changes in other windows or on multiple devices with live updates as you code! Live view is a live-updating full page preview of your Pen or Project.
The big idea is that you can “break off” the preview area you have in the Pen and Project editor. Except that you don’t really have to break it off—Live View is a URL to to see a real-time updating preview of your code that you can use for whatever you like.
Cross-Browser & Cross-Device
Cross-Browser Test Like a Champ
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!
Live View works great with services like CrossBrowserTesting, which allows you to open sites on a huge number of browsers and devices, and also stuff like local device simulators.
Go PRO and get Live View.
Easy Access
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.
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.
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.
Got a big monitor?
A great trick is to maximize your code editors and open Live View to use the preview instead. Learn more.
