Interface & workspace
Navigate the f0 editor, canvas, panels, modes, selection, and workspace controls.
Insert and validate third-party embeds
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
Use everything in the f0 Insert panel
Search and insert every category exposed by the left-sidebar browser, including mode-specific website and video content.
Navigating the left sidebar
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
Select, reorder, duplicate, and reparent on the canvas
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.
Getting started with f0 Websites and f0 Video: edit, preview, and deliver a first project
Open a website or video project, choose Focus or Studio, make a safe first edit, preview the real target, and understand save, share, export, and publish boundaries.
Image and Media Management
Upload, replace, and fine-tune images and videos from the right sidebar — sizing, object-fit, and source swapping for media elements.
The Focus property bar
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
Layers Panel
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.
Editing on the canvas: move, resize, rotate
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
f0 Websites and f0 Video interface: top bar, sidebars, canvas, timeline, and modes
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.
Previewing & resizing your design
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).
Focus & Studio modes
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
Reuse motion with keyframe copy/paste and the shared preset library
Copy keyframes through the system clipboard and apply searchable motion presets at clip edges or the playhead.
Design System: Colors
The Colors tab holds global solid and gradient swatches for your project. Add or remove swatches and quick-apply them to the selected element.
Compact (Builder) vs Designer canvas
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 an element (AI element focus)
“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
Import an SVG as editable HTML
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 keyboard shortcuts
A short list of common f0 canvas shortcuts for history, selection, editing, and AI; this is not an exhaustive index of every context-sensitive key binding.
Customize and troubleshoot the Focus property bar
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
On-canvas spacing (padding, margin, gap)
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.
Sharing a project & collaborators
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: Select vs Interact
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.
Design System: Animations
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.
Create menu: quick AI tools, Logo Studio, and integrations
Find standalone quick AI actions inside the current Create menu, distinguish them from plugins such as Image Editor and Photopea, and connect Claude from the same menu.
Canvas: zoom, pan & fit
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.
The AI Assistant panel
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
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.
Creating elements
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.
Pages & Sections
A project has pages; each page is built from sections (top-level frames). Editors manage page structure, while commenters and viewers can still navigate existing pages and compositions to review them.
The Insert panel
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
Command Palette
The former command-palette shortcut now opens f0’s floating Ask AI and property picker; use it for quick requests or direct property access.
Editor modes & surfaces, explained
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
Design System: Templates
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.
Comments
The Comments menu opens a collaboration panel for leaving and resolving comments on the project; an unread badge shows when there’s new activity.
Build shared class and contextual selectors by clicking
Use Pick a class to combine authored classes and ancestor context, then confirm the scope before changing shared styles.
The top bar
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.
Adaptive resolution (scale lock)
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.
The canvas right-click menu
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.
Snapping, guides & measurements
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
Preview devices & sizes
In Preview you can test responsive layouts: pick a device preset or type a custom width×height, and rotate to swap width and height.