Using CodePen Asset Hosting to Store and Reference Static Files

How to use CodePen Asset Hosting

CodePen lets you upload static files directly to a Pen and gives you a permanent URL that can be used in HTML, CSS or JavaScript. This removes the need for an external server when you need a small JSON file, an image, a font or any other asset.

Worked example: loading a JSON file

1. Open the Pen you want to edit and click the Settings button in the top right.
2. Select the Assets tab.
3. Drag a file named data.json containing { "message": "hello" } into the upload area, or click to browse and select it.
4. After the upload finishes, CodePen shows a URL similar to https://assets.codepen.io/123456/data.json. Copy this URL.
5. In the JavaScript pane, add a fetch request that uses the copied URL:

fetch('https://assets.codepen.io/123456/data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data.message); // logs "hello"
    // you can now use the data in your Pen
  })
  .catch(err => console.error('Asset load failed', err));

Limits and common pitfalls

Free accounts are limited to 10 MB total asset storage, with a maximum of 5 MB per individual file. Trying to upload a larger file will show an error and prevent the upload.
Always use the full asset URL provided by CodePen. Relative paths (e.g., "data.json") will resolve to the Pen’s domain and return a 404 because the file is not served from there.
Asset URLs are public. Do not store API keys, secrets or any sensitive information in uploaded files; anyone can download them by guessing or finding the URL.
Assets are delivered via a CDN with a cache‑busting query string. The URL changes only when you replace the file, ensuring browsers fetch the newest version.

To verify that an asset loads correctly, open the browser’s developer tools (F12), go to the Network tab, run the Pen, and look for a request to the asset URL with a 200 status. The response preview should show the file’s contents.