Focus Mode
When your canvas holds multiple pages, breakpoints, and components, it can get overwhelming fast. Focus Mode isolates a single page or component so you only see -- and can only edit -- the elements that belong to it. Think of it as putting blinders on your canvas: everything outside your current context disappears, letting you work without distractions.
Prerequisites
- A project open in the Flowmo Designer with at least one page defined
- Familiarity with the Pages & Sections workflow and the Layers Panel
How Focus Mode Works
Focus Mode is powered by the engine's activateFocusMode system. When you enter Focus Mode for a page, the engine:
- Collects the relevant objects -- the page frame, all its responsive breakpoints (tablet, mobile, etc.), component variants tied to that page, and any top-level elements tagged with that page's
focusModeId. - Hides everything else on the canvas. Other pages and unrelated elements are still in your project -- they are just temporarily invisible.
- Updates the Layers panel and Preview to reflect only the focused content. The live preview automatically switches to show the focused page.
When you exit Focus Mode, all elements reappear and the canvas returns to its full view.
Entering Focus Mode
From the Pages Tab
This is the most common way to enter Focus Mode.
- Open the Left Sidebar and navigate to the Pages tab.
- Click any page in the list.
That is it. The moment you select a page, Focus Mode activates automatically. The canvas zooms to show only that page and its breakpoints, and the Layers panel filters to its children.
Tip: When you first open the Pages tab, Flowmo auto-focuses your Home page (the page marked with the isHomepage property, or the first page if none is set).
From the Design System Tab
When you switch to the Design System tab in the Left Sidebar, a special Focus Mode activates that shows only design-system-level elements -- things like color swatches, typography samples, and standalone objects that are not assigned to any specific page. Page groups and component groups are hidden so you can focus purely on your global design tokens.
From Component Editing
When you double-click a component instance or use the Edit Master Component action (available in the right-click menu or the Command Palette), Focus Mode enters a nested level:
- Your current Focus Mode state is saved to the history stack.
- A new Focus Mode activates showing only the master component, its variants, and its dimension variants.
- You can now edit the component in isolation.
Navigating Focus Mode History
Focus Mode supports a history stack. Every time you drill into a component from within an already-focused page, your previous view is pushed onto the stack. You can step back through your history at any time.
Using the Back Button
When your Focus Mode history has at least one entry, a Back to previous view button appears to the right of the Left Sidebar. Click it to return to your previous Focus Mode context.
For example, if you are on the Home page and enter a component's edit mode, clicking Back to previous view takes you back to the Home page Focus Mode.
Exiting Focus Mode
Focus Mode deactivates automatically when you:
- Leave the Pages tab -- switching to the Layers or any other tab in the Left Sidebar calls
deactivateFocusModeand restores the full canvas. - Close the Left Sidebar -- unmounting the Pages tab triggers cleanup.
There is no separate "exit" button because Focus Mode is tied to the Pages tab lifecycle. Simply navigate away from it, and you are back to the full canvas.
How Focus Mode Affects Other Features
| Feature | Behavior in Focus Mode |
|---|---|
| Live Preview | Automatically previews the focused page. If nothing is selected, the preview defaults to the Focus Mode's main page. |
| CMS Visual Mode | Responds to focusModeChanged events and refreshes its overlay indicators when you switch pages. |
| Layers Panel | Filters to show only elements within the focused scope. |
| Component Creation | When you create a component while focused on a page, the engine uses smart component creation to keep the component properly associated with that page context. |
Tips
- Switch pages quickly by clicking different pages in the Pages tab. Focus Mode transitions instantly -- there is no loading delay.
- Breakpoints are included automatically. When you focus on a page, all its responsive breakpoints (mobile, tablet, etc.) remain visible so you can design across screen sizes without leaving Focus Mode.
- Use the search in the Pages tab to filter your pages by name when your project has many of them. Type in the search field at the top of the page list.
Common Issues
| Problem | Solution |
|---|---|
| Elements are missing from the canvas | You are likely in Focus Mode viewing a single page. Switch to the Layers tab or close the Pages tab to see all elements again. |
| The Back button does not appear | The Focus Mode history stack is empty. This means you have not drilled into a nested component from within a focused page. |
| Preview shows the wrong page | If nothing is selected on the canvas, the preview defaults to the Focus Mode's main page. Click an element or select a different page to update it. |