CodePen to ZIP
CodePen to ZIP — Download Pens as ZIP Free
Last updated:
Paste any CodePen URL and download a ZIP with the HTML, CSS, JS, and assets. Ready to run locally or use in your project.
How it works: We extract the HTML, CSS, and JavaScript from any public CodePen pen. Download each as separate files or get a single bundled HTML for offline use.
Paste any CodePen URL and download a ZIP with the HTML, CSS, JS, and assets. Ready to run locally or use in your project.
How it works
Paste your URL or input
Copy the URL or content you want to process and paste it into the input above.
Click the action button
We fetch, parse, or generate the output in your browser or via our fast API.
Download or copy the result
Save the result as PDF, Markdown, MP4, or your chosen format. Done.
How do I download a CodePen pen?
Open the CodePen pen you want to download. Copy the URL from your browser's address bar (looks like codepen.io/username/pen/abc123). Paste it into the box above and click Download. The ZIP saves to your device with the HTML, CSS, JS, and any assets.
Does this work on CodePen projects?
Yes — same process. Paste any CodePen project URL (codepen.io/username/project/abc) and click Download.
Why download CodePen projects
Four common reasons. Reference and learning. Found a great example, want to study the code at your own pace. Project integration. Use the pen as a starting point for your own project — adapt the code, replace the assets, ship. Offline access. CodePen's free tier has limitations; downloads let you work locally without restrictions. Backup. CodePen accounts can be closed; local copies are the only safe option.
How we fetch CodePen projects
CodePen's preprocessor and asset system means a pen can be more than just three files. Pens can use preprocessors (SCSS, Less, TypeScript, JSX), external CSS libraries, fonts, and uploaded images. Our tool fetches the compiled HTML, CSS, and JS, plus all assets (images, fonts). The output ZIP runs locally with no build step — open index.html in any browser. For pens using preprocessors: we serve the compiled output, not the source. So a SCSS pen downloads as CSS, not SCSS. If you need the original source, use CodePen's Export feature which gives you the preprocessor sources.
Privacy and how we handle your data
We don't log CodePen URLs. We don't store pen content. We don't require account creation. When you paste a URL, we fetch the pen's HTML, CSS, JS, and assets via CodePen's public API and bundle them into a ZIP.
Does it work on private CodePen pens?
No — private pens require login. Only public pens work.
What about preprocessor pens (SCSS, TypeScript)?
We serve the compiled output. SCSS becomes CSS, TypeScript becomes JavaScript. For the original preprocessor sources, use CodePen's Export feature.
Are external libraries included?
No — the ZIP contains just your custom code. External libraries (Bootstrap, jQuery, etc.) are referenced by URL in the HTML and need to load from CDN when you open the project.