Upload and Reference Assets in a CodePen Pen

Desired outcome

You want to enrich a CodePen demo with external files—such as an illustration, a custom font, or a JSON data set—without relying on an outside server. By uploading the file to CodePen’s asset host you can reference it with a predictable URL that works inside the Pen’s HTML, CSS or JavaScript panes.

Prerequisites

• A free CodePen account (sign‑up at https://codepen.io).
• The Pen you wish to edit must be in Edit mode (not just View mode).
• The file you want to upload must be one of the supported types: PNG, JPG, SVG, GIF, WOFF, WOFF2, TTF, JSON, or CSV.
• Available storage: each Pen can hold up to 10 MB of assets on a free account.

Procedure

1. Open the Pen

   Log in to CodePen, open the Pen you want to modify, and click the Edit button if you are not already in edit mode.

2. Open Settings

   Click the gear icon in the upper‑right corner of the editor to open the Pen Settings modal.

3. Navigate to the Assets tab

   In the Settings modal, select the Assets tab (usually the third tab after “HTML” and “CSS”).

4. Upload the file

   You can either drag the file from your file explorer onto the dashed upload area or click the Choose Files button and select the file.

   Wait for the upload progress bar to disappear; CodePen will then display the file name and a generated URL beneath it.

5. Copy the asset URL

   Click the URL to select it, then press Ctrl+C (or Cmd+C on macOS) to copy it to your clipboard. The URL will look something like:

   https://assets.codepen.io/1234567/internal/yourfile.png

6. Reference the asset in your code

   Paste the URL where you need it:

   • HTML: <img src="PASTED_URL" alt="description">
   • CSS: background-image: url('PASTED_URL');
   • JavaScript (for JSON): fetch('PASTED_URL').then(r=>r.json()).then(data=>console.log(data));
7. Save changes

   Close the Settings modal (click the X or outside the modal) and make sure the Pen saves automatically; you can also press Ctrl+S.

Expected checks

1. Preview the Pen (click the Preview pane or press Ctrl+Enter) and verify that the asset appears as expected (image displays, font applies, JSON data logs, etc.).
2. Open the browser’s developer tools (F12), go to the Network tab, reload the preview if necessary, and filter by the asset’s URL.
3. Confirm that the request returns a 200 status and that the Content-Type header matches the file type (e.g., image/png for a PNG).
4. If the asset does not load, check the console for errors (404, 403, or CORS) and ensure the URL was copied correctly.

Recovery options

• Remove a broken asset: In the Settings → Assets panel, hover over the uploaded file and click the Remove asset (trash can) button. This deletes the file from the Pen’s storage and frees space.
• Re‑upload: After removing, repeat the upload steps with a corrected file (e.g., a smaller image or a different format).
• Fallback to external CDN: If the asset exceeds the 10 MB per‑Pen limit or you need to host a larger file, upload it to a public CDN (such as GitHub Pages, Cloudflare R2, or an image‑hosting service) and reference that external URL instead.

Limitations and practical verification

• Free accounts are limited to 10 MB total asset storage per Pen. Once this limit is reached, further uploads are blocked until you delete existing assets.
• All uploaded assets are publicly accessible via a predictable URL; avoid uploading sensitive, proprietary, or credentials‑containing files.
• Only the whitelisted file types are accepted; attempts to upload executables, scripts, or unsupported formats will be rejected.

To verify that your asset is correctly hosted and removable, perform the following steps without claiming they have been tested:

1. Upload a small PNG file (under 100 KB) via the Assets panel.
2. Note the generated URL that appears after the upload completes.
3. Insert an <img> tag in the HTML pane that references that URL.
4. Run the Pen and look for the image in the preview pane.
5. Open DevTools → Network, filter by the asset URL, and check that the request shows a 200 status and the correct content‑type.
6. Return to Settings → Assets, click the Remove asset button for that file, save, and reload the preview; the image should now be broken, confirming the removal works.

These steps let you confirm that the asset host is functioning and that you can recover from a mistaken upload by deleting the file.