html2apk Get the app

From CodePen (or JSFiddle, or Glitch) to an Android app

Online editors split your work into HTML, CSS and JS panels and quietly add the boilerplate. Exporting it into a single file is the whole job.

Updated 12 October 2026By HTML2APK Editorial Team6 min read
Short answer

To turn a CodePen into an APK, use Export → Export .zip, open the dist folder (it holds a complete index.html, style.css and script.js), download any external resources the pen loaded, then ZIP that folder's contents and build it with an HTML-to-APK converter. For JSFiddle and JS Bin, paste the three panels into one HTML file.

Key takeaways

  • CodePen's export includes a ready dist/index.html — use that folder.
  • Pens often load libraries under Settings → External resources; bundle them.
  • Preprocessors (SCSS, TypeScript, Pug) are already compiled in the dist output.

CodePen

  1. Open the pen and choose Export → Export .zip.
  2. Unzip it. You get src/ (your raw panels, possibly SCSS or TypeScript) and dist/ (compiled, with a full HTML document). Use dist/.
  3. Open dist/index.html and look for <script src="https://…"> and <link href="https://…"> — these are the pen's External Resources. Download each into the folder and change the tag to a relative path.
  4. Check the viewport meta tag is present; CodePen's preview adds its own, the export may not.

JSFiddle and JS Bin

There is no export with a full document, so assemble one:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My App</title> <style> /* paste the CSS panel here */ </style> </head> <body> <!-- paste the HTML panel here --> <script> // paste the JS panel here. // JSFiddle's default 'On Load' wrapper runs this after the page loads; // keeping the script at the end of <body> gives the same result. </script> </body> </html>

Glitch and other hosted editors

Static Glitch projects download from Tools → Import and Export → Download Project. If the project has a server (a server.js or package.json start script), only the files in public/ belong in the APK, and any calls to the server need a live, hosted URL.

Pen assets

Images hosted on assets.codepen.io keep working online but not offline. Download the ones the app needs into an img/ folder. If the pen is small, the phone frame preview lets you check the result at real phone sizes before building.

A note on licences

Public pens are under the MIT licence by default on CodePen, but a pen you forked may include someone else's work. Keep the licence notice and credit the author if you publish the app.

Frequently asked questions

Can I convert any CodePen into an app?

Any pen that runs in a browser can be packaged. Pens that rely on CodePen-only features (such as asset hosting or the console) need those parts replaced.

Why does my exported pen look different in the app?

Usually a missing viewport tag or an external resource that did not load. Add the viewport meta tag and bundle every https resource locally.

H2

HTML2APK Editorial Team
Written and checked against the app our builder actually produces. Found an error? Tell us.

Keep going

How-toHTML to APK, step by stepHow-toHTML template to APKToolPhone Frame HTML PreviewHow-toAI-made HTML to APK

Turn your HTML into an APK today

Install the free builder on your Android phone, add your HTML file, ZIP or website, and install a signed APK a few minutes later. No watermark, no card.

Get the free app Open Google Play