Use the Document Editor card in Website Studio mode for a multi-page site, or follow the separate Video Timeline preset guide when the same card is initialized with projectType video.
Where: Flowgen → Add → Website → Website Studio
Before you start
- Have at least one section/content input when assembling an existing site, or start the document empty when building directly in the editor.
Key ideas
- A real document in a node: The node stores the full editable .fmo document, pages, design system, section instances, source links, thumbnails, and publishable HTML/CSS—not only a screenshot.
- Inputs keep their provenance: Per-page section and content inputs are injected into the document while retaining the upstream node relationship, so a later revision can be reconciled instead of pasted blindly.
- Embedded f0 editor: Open the node to edit layout, responsive behavior, content, motion, and pages in the same-origin f0 editor; saving writes the changed document and outputs back to Flowgen.
- Website Editor / Video & Motion Editor / Video Editor (Legacy) card: DocumentEditorNode uses the authored shared-card path. Own an editable native website or legacy video document inside a Flowgen node.
- Properties sidebar: Card/document-owned controls; common properties shell
- Opened surfaces: Embedded f0 editor; preview; history/restore
- Current editor names and write-back: Website Studio is now Website Editor, and Video Timeline is Video & Motion Editor. A section/page source is a live reference, but upstream changes do not wipe local edits; saving an edited placed section or shot can write the authored result back to its source node.
Steps
- Create Website Studio and connect the generated sections, copy, media, or design-system inputs it should own.
- Open the node editor and organize the inputs into pages and sections.
- Refine layout, responsive behavior, content, and interactions in the embedded editor.
- Save back to the node, inspect its page/HTML/CSS outputs, and connect the appropriate output to publish, render, or another flow stage.
Two Add presets
- Website Studio: DOCUMENT_EDITOR with projectType simple.
- Video Timeline: DOCUMENT_EDITOR with projectType video.
Card and sidebar
- Connected document/media inputs.
- Document state, update/reset, and history/restore.
- Open the embedded editor; the common properties shell does not duplicate a second document editor.
Opened surface
ProjectEditorOverlay hosts the same-origin f0 editor and EmbedBridge saves the edited native document and outputs back to the node.
Website Editor / Video & Motion Editor / Video Editor (Legacy) controls and presets
- Add path: Flowgen → Add → Website / Video & Motion → native editor document.
- Card: DocumentEditorNode.
- Properties: Card/document-owned controls; common properties shell.
- Controls: Connected inputs; document state; update/reset; history; open editor.
- Opened surfaces: Embedded f0 editor; preview; history/restore.
- Website Editor: projectType simple; multi-page website editor.
- Video & Motion Editor: Historical label for projectType video.
- Video Editor (Legacy): Current Add label for projectType video; the iframe-backed legacy timeline, distinct from the native Video Editor node.
Embedded-editor behavior
- Website mode is a multi-page site.
- Video mode is one continuous timeline with scenes, not pages.
- Editors can detach, move, and resize.
- Work survives leaving the document.
- Backup/restore applies to the video editor document and its card preview.
- motion_out from Shot/Designer can reach supported editor-backed nodes.
Troubleshooting
An upstream revision does not appear in the document
Confirm the source is still connected to the intended page input, then reopen/reconcile that input. A disconnected snapshot cannot carry later revisions.