/
Navigate the f0 editor, canvas, panels, modes, selection, and workspace controls.
Insert a supported service or media embed, configure its URL/source and responsive dimensions, then test provider permissions, privacy behavior, loading, and interaction in Preview and the published s
Search and insert every category exposed by the left-sidebar browser, including mode-specific website and video content.
The left sidebar is your navigation hub: an icon rail toggles the main panels (Pages/Layers, Design System, Assets, CMS, AI), with a header for project name/sharing and a draggable edge to resize, spl
Use direct canvas gestures to select the intended layer, reorder it inside layout, duplicate while dragging, or move it into another container without losing track of the resulting hierarchy.
Upload, replace, and fine-tune images and videos from the right sidebar — sizing, object-fit, and source swapping for media elements.
Use the selection-aware floating inspector in Focus mode for common design controls, searchable CSS properties, sibling order, visibility and lock state, plus advanced component, class, variable, and
The Layers panel is an X-ray tree of your page — Pages → Frames → Elements — with per-row visibility and lock toggles and drag-to-reorder.
You don’t have to use the sidebar for everything — most properties can be edited by dragging directly on the element: move it, drag its handles to resize, rotate from a corner, and drag corner handles
Use every major region of the direct editor confidently: project and page controls, left navigation, canvas, contextual properties, bottom AI controls, video timeline, Preview, Focus, and Studio.
Preview mode runs your design live. Pick a device or custom size, rotate, and choose Select (click elements to edit in the sidebar) or Interact (links/forms/scripts run).
flowmo has two editing modes. Focus is a calm, minimal workspace — the AI chat and a floating property bar do the work. Studio opens every panel and the full timeline for hands-on control. (These were
Copy keyframes through the system clipboard and apply searchable motion presets at clip edges or the playhead.
The Colors tab holds global solid and gradient swatches for your project. Add or remove swatches and quick-apply them to the selected element.
The canvas has two working modes: Builder (compact) shows a single frame for fast, focused edits, while Designer shows the full multi-breakpoint canvas. (Video projects use Builder.)
“Focus on this” zooms into a single element and dims the rest, pinning an AI session to it so you can iterate with accept/reject changes. (This is per-element focus — not the Focus editing mode, which
Drop in an SVG and flowmo converts it to editable canvas elements — text becomes text blocks, embedded images are extracted to assets, and shapes/vectors become elements you can restyle — instead of a
Common f0 editor shortcuts, including selection and editing commands, the Cmd/Ctrl+K Ask AI/property picker, and the shortcut for a fresh AI conversation.
Use the Focus bar as a complete inspector: add searchable properties, edit or reset values, reorder the selected element, control visibility and lock state, and reach advanced component, class, variab
Spacing is editable right on the canvas: drag the bars on an element’s edges to set padding, hold M to switch them to margin, and drag the bars between flex/grid children to set the gaps.
Share opens a collaboration dialog: invite people by email with a role, manage who has access, or hand out a public share link. Set whether the project is public or private.
Preview mode has two pointer modes. Select lets you click elements in the live preview to edit them in the sidebar; Interact runs the page for real so links, forms, and scripts work.
The Animations tab is a library of prebuilt animations you can apply to elements — a fast way to add motion without authoring keyframes by hand.
Open categorized Quick Gens, Logo Studio, the full Image Editor, or the local MCP connection from the Studio top-bar AI menu.
Move around the canvas: zoom via presets or a custom value, hold Space to pan, and scroll/pinch to zoom. Your position is saved per page and breakpoint.
Use the f0 AI Assistant for multiple independent sessions, selection and file context, model controls, quick actions, background runs, and floating conversations.
The Assets panel is your media library: upload images/video/audio, organize them in folders, search, and pull in free stock from Unsplash and Pexels. Drag or click to insert onto the canvas.
In Studio mode the top bar holds the element creators: add shapes, vector paths, text, and media (image/video/audio/iframe), insert interactive elements, and combine vectors with boolean ops.
A project has pages; each page is built from sections (top-level frames). The Pages panel manages pages; sections scope responsive layout and interactions.
Insert is the home for adding things to your page: a searchable panel of Basics (shapes/text/media/3D/code), Sections and Pages (templates), Interactive/Forms/Embeds, Icons, Plugins, and AI generators
The former command-palette shortcut now opens f0’s floating Ask AI and property picker; use it for quick requests or direct property access.
flowmo has a few independent “mode” switches that are easy to confuse. This is the map: Focus⇄Studio (how much of the editor you see), Builder⇄Designer (the canvas), Design/Preview/Content (what you’r
The Templates tab holds pre-designed page and section templates. Insert one as a new page or drop it into the current page; flowmo prompts you if CSS would conflict.
The Comments menu opens a collaboration panel for leaving and resolving comments on the project; an unread badge shows when there’s new activity.
Use Pick a class to combine authored classes and ancestor context, then confirm the scope before changing shared styles.
The top bar holds undo/redo, element creators (in Studio), AI Tools, zoom, the timeline toggle, the Design/Preview switch, the Focus⇄Studio toggle, comments, and Publish.
Scale lock renders a breakpoint at a fixed width and uniformly scales it to fit the viewport — instead of reflowing. Good for fixed-aspect, media-heavy layouts.
Right-clicking the canvas opens a context menu with the most common element actions — copy/paste/duplicate/cut/delete, group/ungroup, frame a selection, change stacking order, align, and edit text.
While you drag or resize, flowmo shows alignment guidelines that snap the element to its siblings’ edges and centers and to your own guides, with live distance and size labels. Hold the Meta key to sn
In Preview you can test responsive layouts: pick a device preset or type a custom width×height, and rotate to swap width and height.