Share a CodePen as a standalone link
Export a pen, fold its HTML, CSS and JavaScript into one HTML file, and upload it. The link opens the finished page on its own, without the editor panels around it.
A pen link opens the CodePen editor: code panels, a console and a small preview. That suits other developers. A client, a teacher or a teammate who only needs to see the result is better served by the page on its own.
CodePen can export any pen as files. Those files are an ordinary web page, so any host that serves HTML as a web page can give it a link of its own.
Export the pen
Open the pen, click Export in the footer and choose Export .zip. Unzip it. The dist folder holds the compiled page: index.html, style.css and script.js. Preprocessors such as SCSS, TypeScript or Babel are already compiled there, so use dist, not src.
Libraries added under the pen's external resources appear in dist/index.html as <script> and <link> tags pointing at their CDN, so they keep loading after you move the page.
Fold it into one HTML file
index.html refers to the other two files by name. Copy their contents into it so one file carries everything:
- ✓Replace <link rel="stylesheet" href="./style.css"> with <style> and the contents of style.css </style>.
- ✓Replace <script src="./script.js"></script> with <script> and the contents of script.js </script>, in the same position.
- ✓If script.js is loaded with type="module", keep that attribute on the inline <script>.
- ✓Images uploaded as CodePen assets have absolute URLs and keep loading. Images you reference by a local file name need to be inlined or hosted; making an HTML file self-contained covers both.
Upload it and send the link
Drag index.html onto the FileShare Pro dashboard and copy the link. The page opens in any browser, and viewers need no account on FileShare Pro or CodePen.
Shared pages are served without a Content Security Policy, so CDN libraries, web fonts and fetch calls to public APIs load as they did in the pen. If the page works in the pen but not once hosted, an AI page that works in chat but breaks when hosted lists the usual causes, which apply to pens too.
Collect feedback and update it
Turn on comments and reviewers can leave a note on the page after typing a name. The view count shows whether the people you sent it to have opened it.
When you change the pen, export it again, rebuild the single file and upload it over the old one. The link stays the same: updating a shared link without changing it. A design with several linked pages fits a mini-site instead: a multi-page site without a build step.
Frequently asked
Export the pen as a .zip, combine dist/index.html, style.css and script.js into one HTML file, upload it to a host that serves HTML as a web page, and send that link.
dist. It holds the compiled HTML, CSS and JavaScript, so SCSS, TypeScript and Babel code already runs as plain browser code.
Yes, when they were added as external resources. The export keeps them as CDN script tags, and FileShare Pro does not block CDN scripts on shared pages.
Anyone who opens the page can view its source in the browser, as with any web page. The link does not show the editor or link back to the pen.
Yes. The free plan hosts up to 50 files of up to 100 MB each, with view counts and comments included.
Drop the file, copy the link — live in seconds, free plan included.
Start sharing free