Layers Panel
Overview
The Layers panel gives you an X-ray view of your entire page structure. It lives at the bottom of the left sidebar -- always visible regardless of which tab you have selected above it -- and displays every element as a hierarchical tree. Frames, text blocks, images, shapes, components, and groups all appear here with their parent-child nesting relationships fully visible. Whether you are building a one-section landing page or a deeply nested multi-breakpoint layout, the Layers panel is your primary tool for understanding and reorganizing what is on the canvas.
Prerequisites
- A Flowmo project open in the editor with at least one element on the canvas.
- Basic familiarity with the editor interface (canvas, left sidebar, right sidebar).
Finding the Layers Panel
The Layers panel is not a tab you switch to. It appears automatically at the bottom of the left sidebar, below the Pages and Canvas tabs, and stays visible at all times. You will see a header that reads "Layers" followed by a count in parentheses showing how many layers are currently visible in the flattened tree, for example "Layers (42)".
If the left sidebar is collapsed, click the Expand Panel bar at the bottom of the sidebar to reveal it.
Navigating the Layer Tree
Understanding layer entries
Each row in the Layers panel displays:
- A type icon that reflects the element's kind and layout mode. For example, frames with flexbox show directional layout icons, grids show a grid icon, text shows a "T" icon, images show an image icon, components show a diamond icon, and pages show a file icon.
- The element name -- either a default like "frame 2" or a custom name you have assigned.
- On hover or selection, action buttons appear on the right side of the row: a lock/unlock toggle and an eye visibility toggle.
Selecting elements
- Click any layer to select that element on the canvas. The canvas highlights the element so you can see exactly where it sits.
- Cmd-click (Mac) or Ctrl-click (Windows) to add or remove individual layers from your selection, building up a multi-selection.
- Shift-click to select a contiguous range of layers between your last-selected layer and the one you click.
- Selection is two-way synchronized: when you select an element on the canvas, the Layers panel automatically expands its parent layers and scrolls to bring it into view.
Expanding and collapsing groups
- Click the chevron arrow next to any parent element to reveal or hide its children.
- When you select a deeply nested element on the canvas, the panel auto-expands all ancestor layers so you can see where that element lives.
- To declutter a complex tree, click the collapse-all icon (appears in the Layers header area when any layers are expanded). This collapses every expanded group in one click.
Hover highlighting
When you hover over a layer in the panel, the corresponding element on the canvas receives a visual highlight. This makes it easy to identify which layer maps to which element without clicking.
Navigating to an element
Double-click a layer's type icon (not its name) to pan the canvas viewport directly to that element. This is helpful when an element is off-screen or lost in a large canvas.
Renaming Layers
Default names like "frame 47" or "text 12" become meaningless as your project grows. Rename layers to keep things manageable:
- Double-click the layer name text.
- Type a descriptive name -- something like "Hero Section", "CTA Button", or "Footer Nav".
- Press Enter to confirm, or Escape to cancel.
If you clear the name and try to confirm, the rename is cancelled and the original name is restored.
Renaming a page-group layer also updates the page name in the Pages tab automatically.
Reordering Layers with Drag and Drop
You can restructure your page directly from the Layers panel:
- Click and hold a layer row.
- Drag it up or down. A blue indicator line shows you exactly where the element will land.
- Drop onto a container (frame, group, or component) to move the element inside it. The target container highlights with a blue ring when you are hovering over its center zone.
- Drop between layers to reorder within the same parent. The top and bottom zones of each row control "before" and "after" placement.
- Release to finalize the move.
If you have multiple layers selected, dragging moves all selected layers together.
The panel also auto-scrolls when you drag near the top or bottom edge, so you can move elements across long layer lists without interruption.
Free mode vs. layout mode
How layer order translates to visual stacking depends on the parent container's positioning mode:
- Free positioning mode: The tree is displayed in reverse stacking order -- the top layer in the panel renders in front (highest z-index). Dragging a layer higher in the list brings it visually forward.
- Auto-layout mode (flex, grid): The order follows the flow direction. The first layer in the list is the first element in the layout flow.
Visibility and Locking
Each layer row shows two action buttons on its right side:
Toggling visibility (Eye icon)
- Click the Eye icon to hide an element. It disappears from the canvas but is not deleted -- the layer remains in the tree with reduced opacity to indicate it is hidden.
- Click the icon again (now shown as a closed eye) to make it visible again.
- Hiding a parent also visually dims all its children in the Layers panel, since they inherit the hidden state.
- Visibility changes sync with the Timeline panel -- if the same element has timeline keyframes, its visibility state stays consistent.
Toggling lock (Lock icon)
- Click the Lock/Unlock icon to prevent accidental selection, movement, or editing on the canvas.
- Locked elements display a locked padlock icon. Unlocked elements display an open padlock.
- Locking a parent visually indicates to children that they are effectively locked as well, but each child's own lock state is tracked independently.
- This is ideal for background images, finalized headers, or any element you do not want to accidentally nudge.
Context Menu
Right-click any layer to open the context menu, which provides the same actions available when right-clicking elements on the canvas -- copy, paste, delete, group, ungroup, and more.
If you right-click an unselected layer, it is automatically selected first, and then the context menu opens.
Multi-Select Actions
When you have multiple layers selected (via Cmd/Ctrl-click or Shift-click), drag-and-drop moves all selected layers together. This lets you batch-reorganize your structure quickly.
Interaction Markers
Layers that have interactions (animations, click handlers, hover effects) attached to them display a small mouse-pointer-click icon on the right side of the row. This gives you a quick visual scan of which elements in your tree have interactive behavior without needing to inspect each one.
Performance
The Layers panel uses virtualized rendering under the hood, meaning it only renders the rows currently visible in the panel viewport. Projects with hundreds or even thousands of layers remain smooth and responsive -- no lag, no freezing, no matter how deep your nesting goes.
Tips
- Name your layers as you build. It takes two seconds now and saves minutes of hunting later. "frame 47" will not mean anything to you tomorrow.
- Use the panel to find buried elements. If something is hidden behind other elements on the canvas, the Layers panel shows you exactly where it lives in the hierarchy.
- Collapse sections you are not working on. Use the collapse-all button to reset the tree, then expand only the branch you need. This reduces visual noise dramatically.
- Double-click the type icon to pan the canvas to a specific element when it is off-screen.
- Use multi-select to batch-move elements. Cmd/Ctrl-click several layers, then drag them all at once into a new container.
Common Issues
"I cannot find my element"
Check whether the element is nested inside a collapsed parent -- select it on the canvas and the Layers panel will auto-expand its ancestors and scroll to it. If you cannot find it on the canvas either, it may be hidden (look for dimmed layers in the tree).
"Dragging a layer broke my layout"
You likely moved the element into a different parent container by accident. Press Cmd/Ctrl + Z to undo immediately. When dragging, watch the blue indicator line carefully: a line between rows means reordering, while a blue ring around a row means you are dropping inside that container.
"The lock or visibility button does not seem to work"
Check the parent layer. If a parent is hidden or locked, its children inherit that state visually even though their own toggle may show a different value. Unlock or show the parent first.
"The panel seems empty"
If you are in Pages mode and have a specific page selected, the Layers panel only shows layers for the current focus. Switch pages or exit focus mode (use the Back to previous view button that appears above the sidebar) to see all layers.