Export an f0 document as one finished HTML file per page—or raw HTML and CSS as one file—with page selection, portable or linked runtime packaging, progress/cancel controls, saved HTML assets, and reusable html_out flow output.
Where: Flowgen → Add → Website → HTML / Code → HTML Export; also available under Utils
Before you start
- A connected f0 document, or non-empty raw HTML.
- At least one exportable page in a connected document.
- Project asset write access if durable saved links are required.
Key ideas
- The wire chooses the source mode: Connect f0 Document for a native multi-page export. If no document is connected, HTML plus optional CSS becomes one raw page. There is no separate mode setting that can disagree with the graph.
- One file per document page: Each exportable page runs through the real f0 page exporter and is saved as a separate html-file asset. The configured homepage is placed first; the result panel lists every file by page name and size.
- Follow all pages or pin a subset: An empty stored selection means every current and future page. Unticking pages creates an explicit subset; ticking them all again returns to the follow-document behavior.
- Self-contained versus Linked runtime: Self-contained embeds app-owned runtime scripts and CSS into each larger file. Linked runtime produces smaller files whose motion/interactions depend on the flowmo origin remaining online.
- A finished file, not an editable document: html_out and the saved assets are delivery HTML. Keep the upstream Website Studio/Section document when you need to continue visually editing the source.
- HTML Export card: HtmlExportNode uses the authored shared-card path. Export an f0 document as one saved HTML file per exportable page, or raw HTML plus CSS as one file, with page and runtime-packaging choices.
- Properties sidebar: genOutputNodes.tsx
- Opened surfaces: Per-page export result list; open/copy saved HTML links
- Optional CSS file output: Also save the CSS writes a second .css asset for each exported page and exposes css_out. The stylesheet remains inlined in the HTML; enabling CSS adds a copy rather than splitting the page.
Steps
- Add HTML Export from Website → HTML / Code or Utils.
- For a website, connect Website Studio’s bundle/document output to f0 Document. For raw markup, connect HTML and optionally CSS instead.
- If the connected document has several pages, leave every page ticked to follow the whole document or untick the pages you do not want.
- Choose Self-contained when the app-owned runtimes must travel with each file; choose Linked runtime when smaller files are more important and the flowmo origin will remain reachable.
- Click Export HTML. For a longer site, read the current page in progress; use Stop if the remaining export should be cancelled.
- Review each exported filename and byte size. Open the saved page from the card/sidebar and test its layout, links, motion, interactive code, fonts, and media.
- Use Copy link from the selected-node sidebar when another system needs the saved asset URL.
- Connect html_out only when a downstream Flowgen node should consume the first/current exported HTML value; use the saved result list as the authoritative multi-page output.
- To reuse a saved page, click or drag it from Assets → HTML Files onto a canvas; Flowgen creates an HTML Source node.
- Enable Also save the CSS only when a separate stylesheet asset/socket is needed, then rerun the export.
Card inputs and output
- f0 Document / doc_in — native document or compatible editor bundle.
- HTML / html_in — raw markup fallback.
- CSS / css_in — optional raw-page stylesheet.
- HTML Output / html_out — finished HTML value for a downstream connection.
Card and sidebar controls
- Derived Source status.
- Per-page checkboxes and All pages reset.
- Self-contained / Linked runtime.
- Export HTML → Exporting/Stop.
- Per-page progress.
- Exported file names and sizes.
- Open page; sidebar also offers Copy link.
- Visible error state without discarding earlier successful files.
What Self-contained includes
The page HTML, exported CSS, fonts/runtime references that the exporter can pack, f0 interactions, GSAP/interactive runtime code, and critical styles are folded into the page. The option specifically controls app-owned runtime delivery.
Hosted media is an important boundary
Images and videos remain absolute hosted URLs. A Self-contained page can open without the flowmo JavaScript origin, but it is not a byte-for-byte offline archive of every hosted media file. Test without network only if the page contains no remote media dependencies.
HTML Export controls and presets
- Add path: Flowgen → Add → Website → HTML / Code → HTML Export; Utils → HTML Export.
- Card: HtmlExportNode.
- Properties: genOutputNodes.tsx.
- Controls: f0 Document/HTML/CSS inputs; page subset; Self-contained/Linked runtime; progress/Stop; saved page links.
- Opened surfaces: Per-page export result list; open/copy saved HTML links.
Dynamic css_out
- css_out exists only while cssOutputEnabled is true.
- Each page lists its own HTML and optional CSS asset.
- css_out carries the first exported page that has CSS.
- Turning the option off removes the socket and clears stale CSS values.
Page output and export fidelity
Editor-backed nodes expose every page downstream, including video scenes. Page HTML connections include their normalized exported CSS. HTML ZIP exports preserve the intended page content and styles; targeted website edits can read and repair the existing source instead of rebuilding unrelated content.
Tips
- Export a single representative page first when a site contains heavy interactions.
- Use the empty/all-pages state for a document that will keep gaining pages.
- Retain the Website Studio document as the editable source of truth and regenerate files after changes.
- Verify exported pages in a fresh browser tab rather than relying only on the editor preview.
Limitations and important notes
- The multi-page product is a set of saved files; html_out can carry only one HTML value at a time.
- Raw HTML mode always produces one file and has no document page picker.
- Linked-runtime motion/interactions stop working when the required origin is unavailable.
- Self-contained does not download and embed all hosted user media.
Troubleshooting
Export HTML is disabled
Connect a valid f0 document to doc_in or non-empty raw markup to html_in. A CSS-only connection is not a page.
A page is missing
Check the page picker and the page’s exportable status. Use All pages/retick every page to return to follow-document mode.
Motion works in flowmo but not in the exported file
If using Linked runtime, confirm the app origin is reachable. Otherwise re-export as Self-contained and inspect any unsupported/custom external dependency.
The page opens but an image/video is unavailable offline
The exporter intentionally preserves hosted media URLs. Make those assets reachable or replace/package them through the destination’s media workflow.
The card says a page was not saved
The HTML was produced in memory but no durable asset URL was returned. Check project asset permissions/storage, then rerun the affected page.
FAQ
Is HTML Export the replacement for HTML Page Join?
They solve different stages. Website Studio replaces the old join for assembling editable sections; HTML Export turns the finished document into delivery files.
Does Self-contained mean every image is embedded?
No. It embeds app-owned runtime/CSS packaging; hosted image and video URLs remain remote.
Will a newly added page export automatically?
Yes when the picker is in the all-pages state (stored as no explicit page IDs). An explicit subset remains a subset.