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.
Where: Open an f0 Website or f0 Video project.
Key ideas
- The top bar owns project-wide context: Project/page identity, viewport or video context, undo/redo, preview, sharing, workspace mode, and top-level menus live here or in its responsive overflow.
- The sidebars own structure and detail: The left side locates Pages, Layers, Insert, Assets, Design System, and AI tools. The right side exposes details for the current selection where the active workspace uses it.
- The canvas owns direct manipulation: Selection outlines, handles, snapping guides, spacing controls, drag/reparent behavior, inline editing, and context menus operate on the rendered document.
- f0 Video adds time: f0 Video retains the shared editor shell and adds shot, layer, playhead, duration, keyframe, and playback controls. Timeline selection is as important as canvas selection.
Steps
- Read the top bar from left to right: project/navigation, page or shot context, viewport/playback context, history, Preview, share/export, and mode controls.
- Open Pages to switch documents or sections; open Layers to select nested structure that is hard to click visually.
- Use Insert to browse the supported elements and sections. Use Assets to reuse project media instead of repeatedly uploading the same file.
- Select an element on the canvas, inspect the contextual property controls, and use the right sidebar when deeper fields are available.
- Use zoom/fit and device controls to inspect layout without accidentally treating a scaled view as a new breakpoint.
- Open the Design System for reusable colors, type, components, patterns, and animations. Apply shared class-level changes deliberately.
- Use the bottom assistant/prompt surface for described changes, and direct controls for exact adjustments. Review the proposed scope before accepting broad edits.
- For video, select the intended shot/layer and time, then adjust duration, transitions, keyframes, or playback. Scrub and replay from a known start.
- Switch to Preview/Interact to test behavior without editor interception; return to selection mode to continue editing.
- Use the workspace-mode control to switch Focus/Studio or return to Account default as supported.
Major regions
- Top bar — project/page/device/history/preview/delivery/workspace controls.
- Left rail and panels — structure, insertion, assets, design systems, and AI.
- Canvas — rendered document, selection, handles, guides, direct editing, context menu.
- Context/right controls — selection-specific properties and advanced panels.
- Bottom controls — assistant/prompt and contextual Focus-mode properties.
- Timeline (video/time-based work) — shots, layers, playhead, duration, keyframes, transitions and playback.
Tips
- If a visual click selects the wrong nested element, use Layers rather than repeatedly clicking through.
- Use class-level edits when every repeated component should change and element-level edits for a deliberate exception.
Limitations and important notes
- Compact layouts move or collapse controls; the function remains in the responsive menu or panel.
- Not every element supports every property, interaction, or animation type.
- The Designer product has a different same-window interface and is documented separately.
Troubleshooting
I cannot select the element in Preview.
Preview/Interact reserves clicks for the page. Exit Preview or switch back to Select/Edit mode.
A sidebar seems to be missing.
Check Focus versus Studio, the compact layout overflow, and whether the current selection actually exposes that panel.