Drop an HTML file, see every linked reference, upload matching assets in one batch, and understand why the safe preview may differ from the live page.
Where: f0 editor → import/drop HTML → Linked assets step.
Key ideas
- The HTML and its files are separate inputs: An HTML file can refer to local stylesheets, scripts, images, icons, and fonts that are not embedded in the markup. The importer inventories those references and distinguishes remote, added, and still-missing files.
- Batch matching by linked path: Drag or choose multiple files at once. Supported linked uploads include CSS, JS/MJS, SVG, PNG, JPG/JPEG, GIF, WebP, AVIF, BMP, ICO, WOFF/WOFF2, TTF, and OTF. Uploading a file is useful only when it matches a reference the imported HTML actually uses.
- Safe preview versus faithful live source: The import sandbox intentionally does not execute arbitrary external scripts and may not load external/linked CSS exactly like the original host. A live URL is the better source when full network-dependent fidelity matters.
Steps
- Drop or choose the HTML file and wait for the importer to parse its linked references.
- Review the list: remote references remain network URLs; added references have a matched upload; missing references still need a file or a source change.
- Drag all available companion assets into the linked-assets picker, or choose them together. Preserve filenames and relative folder meaning when preparing the batch.
- Resolve the references that affect layout, typography, or visible media before accepting the import. Nonessential scripts can be left out only when you understand the lost behavior.
- Import and inspect the page at several breakpoints. Check computed typography, backgrounds, SVG/icons, and interactive elements.
- For a site whose appearance depends on a server, dynamic scripts, or remote build output, import from its live URL or reconstruct the missing behavior after the static HTML is in f0.
Accepted linked asset types
- Styles and code: .css, .js, .mjs
- Vectors and raster images: .svg, .png, .jpg, .jpeg, .gif, .webp, .avif, .bmp, .ico
- Fonts: .woff, .woff2, .ttf, .otf
Status meanings
- Remote — the document uses an HTTP(S) resource; availability still depends on its host and browser policy.
- Added — an uploaded file matched the linked reference and can be included in the import.
- Missing — the importer found a local reference but has no matching file.
- Missing count — the number of unresolved local references, not a generic quality score.
Tips
- Zip/unpack the source locally first and select all companion assets together; piecemeal uploads make relative-path mistakes harder to see.
- If a missing stylesheet controls the whole page, stop and resolve it before judging the import’s layout.
Limitations and important notes
- The safe HTML preview is not editable and does not execute every linked script or third-party dependency.
- Framework source files are not a compiled website. Import the rendered HTML/CSS/assets or a reachable live URL.
- Remote URLs may expire, require cookies, block cross-origin reads, or disappear after import.
Troubleshooting
The imported page is unstyled.
Return to the linked-assets list and resolve missing CSS/font files. If styling is served dynamically, use the live URL or export a self-contained build.
An uploaded asset is still listed as missing.
Check the referenced relative path and filename, including extension/case. Upload the actual linked file rather than a visually similar replacement with another name.