Keep an editable multi-page website document connected to Flowgen sources, open it in the embedded f0 editor, and route its saved bundle downstream.
Where: Flowgen → Add → Website → Website Editor.
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 website document is distinct from a section: Website Editor owns a multi-page document; Unified Section creates or revises one website section/composition. Do not use retired HTML Section or HTML Combine nodes for new work.
- The editor is embedded, the graph remains the project: The node opens an f0 website document surface while retaining its Flowgen inputs and outputs. The native Video Editor is a separate compositor surface, not this iframe document.
- Sources remain connected: Use named typed inputs for text, media, design-system, and other source material; project identity may come from the linked Brand.
- Native Website Easy Edit is page-scoped: Inside this original Website node, the Add menu inserts text presets and basic layout shapes, while selection exposes contextual editing and media controls. Its native history belongs to the website document; it does not turn this surface into the Video Editor/Compositor.
- UI media paths differ from external MCP: The Website UI supports local upload, supported clipboard media, Flowgen outputs, and the project Asset manager. External MCP uses the original Website source tools and caller-supplied URLs; it cannot open the user’s file picker, clipboard, or Asset manager.
Steps
- Add Website Editor and connect the source content, media, design system, or sections it should own using compatible named inputs.
- Select the node and choose Open editor. The website document opens in the embedded f0 editor; inspect its live readiness and document identity before editing through MCP.
- For direct UI editing, select the intended page and container, then use Add for text presets or basic elements; select an element to open its contextual controls. Add media from a local file, supported clipboard item, connected Flowgen output, or the project Asset manager.
- For outside-in authoring, connect a whole Items/List table to pages_in. Rows with Html are placed as markup; rows with Content or text/Markdown are converted into pages using the website’s design system. Name/Title/Page supplies the page name.
- For CMS entries, create or select a post type in the website document, then connect a mapped table to that collection’s post_in_<collectionId> socket. Each socket is specific to one collection; do not guess or hard-code its id.
- Use the Pages from Content or Posts from Rows blueprint as a starter. They apply a complete dataset once—do not wrap them in a group repeater or loop. For Posts from Rows, first create the target post type, then connect the mapper output to the newly visible post socket.
- Keep stable source keys on rows when reruns should update the same pages/entries rather than create duplicates; inspect per-row apply results and conflicts before continuing.
- Build or refine pages, responsive layout, content, and interactions in the editor. Keep reusable prose in Text sources and link the intended project Brand for identity fields.
- Save or resolve any document/upstream conflict prompt before closing. Return to Flowgen and check the node preview and downstream outputs.
- Use Unified Section when only one editable website section is needed. Use the separate native Video Editor node for timeline/compositing work.
Two Add presets
- Website Editor: DOCUMENT_EDITOR with projectType simple.
- Video & Motion Editor: 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.
Related guides
- Create an editable website section in Flowgen
- Field Mapper node: reshape records for pages and post types
- Start from Blueprints, Flows & multiple canvases
- Flowgen Video Editor node: native composition inputs, editor surface, outputs, persistence, and MCP
- Edit Flowgen editor documents through MCP
- Add and edit native Website elements and media in Flowgen