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.
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.
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.
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.
As many as you’d like.
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.
A great trick is to maximize your code editors and open Live View to use the preview instead. Learn more.