As you work in the CodePen editor, the build process produces a live preview you can see (we’ll just call that the “Preview”). That’s at the heart of what CodePen does!
The preview has a non-changing URL like:
https://[lots_of_letters_and_numbers].pens.io/
Cache Busting
The URL of the preview stays the same as you update the Pen. This is on purpose, so if you, for example, grant browser permissions for it to do something (e.g. geolocation or clipboard access), it will remain granted as you work on the Pen. But it also means that we need to help break the natural browser caching of assets like CSS and JavaScript as you update them and expect to see changes.
We do the cache busting by appending new URLs to all assets when they are linked to or imported. For instance, if you have a CSS file linked to you in your HTML:
<link rel="stylesheet" href="./style.css">Code language: HTML, XML (xml)If you inspect the preview, you’ll see that is replaced with something like this:
<link rel="stylesheet" href="/style.ed7a88282b14d5b90fc8.css">Code language: HTML, XML (xml)That random string of letters and numbers is generated whenever we detect a change to that file, and will break the browser cache for it, ensuring you see the updated version. We call this process Fingerprinting, and it’s one of the built-in blocks that always runs in the build process.
If you inspect the HTML file in the Build Output, you won’t see the fingerprinting done there. It is done by the preview server right before rendering.
Viewing the Preview Alone
You can copy and paste the Preview URL into a new browser tab, but only PRO users will be able to see it directly like that. This is what we used to call “Debug View” for all y’all CodePen OGs, because it renders the preview without an <iframe> or any other CodePen influence.
Users without a PRO plan will see the Preview URL redirect back to the CodePen Editor.
Live View
Live View is a special view of the Preview where changes you make in the CodePen Editor update the Preview automatically. This is a PRO feature of CodePen, available on all the PRO plans.
This live updating is useful because you can have a useful preview open in another browser window, say, on another monitor or a mobile device. Any time you update code, settings, or Blocks on the Pen, the preview will update in the editor itself and in any Live View.
The Web Server
The web server that serves the files from your successful builds is configured like a basic/standard static file web server. Examples of URLs and what is served. In all cases it will 404 if that exact file doesn’t exist.
| URL | Served File |
|---|---|
| / | /index.html |
| /INDEX.html | /index.html |
| /index.htm | /index.htm |
| /resource | First try: /resource/index.html Second try: /resource.html |
| /resource/ | /resource/index.html |