Why merge at all?
A single HTML file is the most reliable thing you can turn into an APK. There are no paths to get wrong — no href="/style.css" that resolves to the root of the phone instead of your folder, no ../img/ that points outside the bundle, no case-sensitivity surprise where Logo.PNG is not logo.png. Everything the page needs is in the one document, and the document is what gets bundled.
For a small app — a calculator, a form, a quiz, a landing page, an HTML5 game with a few hundred lines — a single file is also easier to send, easier to back up and easier to version. This tool takes the split version you wrote (because splitting is nicer to edit) and produces the merged version you build from.
What the merger does, exactly
- Finds
<link rel="stylesheet" href="…">tags that point at a local file and replaces the first one with a<style>block containing your CSS, in the same position. Extra local links are removed; external ones (https://…) are left alone and reported, because inlining them would need a download. - Finds
<script src="…">tags pointing at local files and does the same with your JavaScript — either in place, or moved to the end of<body>if you keep the default on, which is the safest spot for code that touches the DOM. - If the HTML has no such tags, injects the CSS before
</head>and the script before</body>. - Escapes any literal
</style>or</script>inside your code so it cannot end the block early — a classic single-file bug. - Warns if the page uses
type="module", which does not load from inside an APK.
What it cannot do
Images, fonts and other binary assets stay as references. If your CSS says url(bg.png) the merged file still needs bg.png next to it — either ZIP the two together, or convert the image with the Image to Data URI tool and paste the result in. Several stylesheets or scripts need merging in order first; paste them into the box one after another.