What should an importable HTML ZIP contain?
An importable HTML ZIP should contain browser-ready static files with one clear entry page, normally `index.html`, plus any linked CSS, JavaScript, images, fonts and nested pages. The useful project root is the folder that directly contains that entry page; wrapping it in several unnecessary parent directories makes paths and exported names harder to predict. Relative references should match the archive’s case-sensitive filenames and must not depend on paths outside the ZIP. After import, verify the entry page, console, images, fonts, navigation and responsive layout before editing. When exporting, choose ZIP to preserve the folder structure, a local folder when the browser supports direct directory writing, or unified HTML when a self-contained document is more important than maintainable source separation. Always open the downloaded result again—the successful creation of an archive does not prove that every runtime reference survived.
Prepare the archive
- Find the real root. The folder containing `index.html` should usually be the top-level project folder in the ZIP.
- Remove generated clutter. Exclude operating-system files, caches and dependencies that a static browser project does not use.
- Keep browser-ready output. Compile TypeScript, Sass or framework source before importing if the project requires a build.
- Check filename case. Match every linked path exactly.
- Keep references inside the archive. A path like `../../shared/logo.png` cannot work if the shared folder is not included.
Import HTML versus import ZIP
A standalone `.html` file is appropriate for Simple mode or for a document whose CSS and JavaScript are inline. A ZIP is appropriate when separate files and folders matter. Dragging multiple loose files can also form a project, but a ZIP preserves their hierarchy more reliably.
ZIP processing happens locally in the browser after the ZIP library is available. Large archives consume memory while they are expanded, so remove unrelated binaries and avoid treating the editor as an unlimited storage system.
Validate before changing anything
Open the selected entry page immediately after import. If the layout is unstyled, inspect the CSS URL. If buttons do nothing, inspect script URLs and console errors. If images fail, compare the archive filename, extension and case with the HTML or CSS reference. Establishing a clean baseline prevents an import problem from being mistaken for a later editing mistake.
Choose the right export
ZIP archive
Best for preserving separate source files, folders and original binary assets. Choose it when the project will be edited again or deployed as a static folder.
Local folder
Best when the browser supports the File System Access API and you want to write files directly to a chosen directory.
Unified HTML
Best for a portable demo, email attachment or single-file handoff. Styles, scripts and assets may be embedded, which increases file size.
How unified HTML changes a project
A unified export can inline stylesheet text, JavaScript and local assets. That improves portability but removes the original separation of concerns. Large images represented as data URLs increase the HTML size, source maps may no longer be useful, module behavior can change and code that calculates URLs at runtime may need special handling.
Use unified HTML as a delivery format, not automatically as the source of truth. Keep a ZIP or folder copy if the project will continue to evolve.
Browser support for direct folder export
Direct directory writing depends on the File System API and browser implementation. It typically requires a secure context and a user gesture. When unavailable, ZIP remains the most interoperable option because the browser only needs to create a downloadable file.
Post-export checklist
- Extract the ZIP into a new empty directory.
- Serve it over local HTTP when modules, fetch or service workers are involved.
- Open the entry page and inspect the console and network panel.
- Follow internal links and test image, font, video and download assets.
- Check at least one narrow and one wide viewport.
- Compare the exported preview with the editor preview before deployment.
Common archive mistakes
A ZIP may contain a project folder inside another project folder, causing the expected entry page to sit one level deeper than anticipated. Some archive tools also include hidden operating-system metadata. Password-protected archives, symbolic links and unsupported compression features are poor choices for a browser importer. Keep the archive ordinary: one meaningful root, browser-ready files, no password and no dependencies that live outside the ZIP. If the extracted project works but the unified HTML does not, inspect runtime-generated URLs and module scripts before assuming the original files were lost.
Related: review relative paths and entry pages before restructuring an imported project.