How to Share a CodePen Project as a Standalone Live Link
CodePen is great for building but the default share URL requires the CodePen editor. Here's how to export and host it as a clean standalone link.
CodePen's share URLs open inside the CodePen editor — with the code panel visible alongside the result. For sharing with clients, hiring managers, or in a portfolio, you often want a cleaner experience: just the rendered output, no editor chrome, no CodePen branding.
The Built-in Options
CodePen does offer two cleaner URLs by default:
codepen.io/user/full/abc123— full-page view (hides editor, shows result full-screen)cdpn.io/user/fullembedgrid/abc123— embed view
These are better but still hosted on CodePen's domain and require CodePen to be running. If CodePen is down, your link is down.
The Better Approach: Export and Host Yourself
Step 1: Export from CodePen
On any CodePen: click the bottom-right export button → "Export .zip". This downloads a zip containing your HTML, CSS, and JavaScript as separate files with an index.html entry point.
Step 2: Make It Self-Contained (Optional but Recommended)
The exported ZIP references separate CSS and JS files. TiniDrop handles this natively — it serves the entire ZIP contents as a site. You can upload the ZIP directly.
Step 3: Upload to TiniDrop
Drag the .zip file onto TiniDrop. It extracts the ZIP and serves your pen as a hosted website. The index.html opens automatically. Share your TiniDrop link — clean URL, no editor, just your running pen.
Use Cases
- Portfolio — link from your resume or LinkedIn directly to a clean live demo
- Client presentation — show an interactive component without the CodePen editor distracting the conversation
- Job application — a standalone link is more impressive than a CodePen URL
- Archiving — CodePen can change or your pen might become private; a TiniDrop link persists independently
For Complex Pens with Dependencies
If your pen uses CodePen's preprocessors (Sass, TypeScript, Babel), the export will include the compiled output — not the source. The compiled result is what you want for hosting anyway, so this is fine. For pens using external CDN resources (React, Three.js, etc.), those CDN links will still work in your hosted version since they're loaded from the original CDN URLs.
Ready to share your files?
Drop any file and get a shareable link in seconds. No account needed.
Try TiniDrop free →