Hide and Show Components

Component visibility management serves several purposes in the design workflow:

  • Focus on specific components by temporarily concealing others
  • Preserve partially completed components without displaying them
  • Isolate problematic components during debugging
  • Evaluate component retention decisions without permanent deletion

The hide functionality provides a non-destructive approach to temporarily remove components from view while preserving their properties and structure for later use.

Components can be hidden through multiple interfaces:

  • Right-click context menu on the component tree or canvas
  • Click the visibility toggle Eye in the component tree

Hidden components can be restored using the same interaction patterns.

Info

Starting from v0.21.0, component visibility states are persisted when the project is saved.

Hidden Component Interactions

Hidden components maintain limited functionality within the design environment:

Available Operations:

  • Hover over entries in the component tree to highlight their position on the canvas
  • Select entries in the component tree to modify their attributes and styles

Warning

While hidden components remain selectable in the component tree for property modifications, editing invisible components is not recommended as it can lead to unintended design inconsistencies.

Restricted Operations:

  • Canvas hover highlighting and selection
  • Drag selection on the canvas
  • Alignment operations with hidden components

Info

Hidden components are excluded from code generation and build processes, effectively treating them as non-existent in the output.

For screens marked as hidden, they are not included in code generation and build processes despite not being visually concealed in the editor.

Lock and Unlock Components

Component locking prevents unintended modifications when working with complex interfaces containing numerous components.

Components can be locked using several methods:

  • Click the lock icon Lock in the component tree
  • Right-click context menu with the Lock option
  • System menu navigation: Edit → Lock

Locked components can be unlocked using the corresponding inverse operations.

Info

Component locking is a session-only state that resets upon project reload. Locked components will be automatically unlocked when the project is reopened.