Composition Panel

The composition panel reflects the component hierarchy of frames in a workspace.

Workspace Switcher

The first item in the composition panel the workspace switcher. It shows the currently active workspace and when expanded, shows a list of available workspaces. Workspaces can be re-arranged and created here as well.

Workspace switcher with "Main workspace" activeWorkspace switcher with "Main workspace" active

Workspace switcher with "Main workspace" active

Workspaces

Workspace Actions

Right clicking, or clicking on the context menu of each Workspace row, presents the following actions:

  • Rename
  • Delete

Composition Items

Frames

Frames are the only top-level items allowed in compositions. Frames are spaces into which you can drop components to see them rendered. They cannot be nested into other items and may contain only components. In the composition view, frames are labelled with the Frame icon followed by the frame name.

A frame labeled "Todo"A frame labeled "Todo"

A frame labeled "Todo"

Frame Actions

Right clicking, or clicking on the context menu of each Frame's row, presents the following actions:

  • Cut
  • Copy
  • Duplicate
  • Rename
  • Frame Settings - Access the current frames properties.
  • Delete
  • Set as Project Cover - Choose a frame to use as the project tile in your dashboard.

Components

Components in a composition view may exist in frames, nested in other components as children, or as part of a component's composition. Components in the composition view are shown as rows which feature the Component Name in a pill alongside the instance name. If the component accepts children, it will have a leading collapse-arrow indicator. Likewise, if the component has its own composition, the pill will be solid instead of outlined, meaning this component can edited.

Component Hierarchies

Nesting Components

Components that accept children will be denoted with a collapsible arrow indicator to the left of their name.

A frame labelled "Todo" containing a Box component which itself contains a Text component (notice the absence of a collapse indicator on the Text component).A frame labelled "Todo" containing a Box component which itself contains a Text component (notice the absence of a collapse indicator on the Text component).

A frame labelled "Todo" containing a Box component which itself contains a Text component (notice the absence of a collapse indicator on the Text component).

Multiple Slots

Some components accept multiple children in various slots, a common example would be something like an IfElse component that renders one set of children if a condition is met and a whole other set of children otherwise.

An IfElse component with both an 'if' slot and an 'else' slot.An IfElse component with both an 'if' slot and an 'else' slot.

An IfElse component with both an 'if' slot and an 'else' slot.

Component Composition

Components whose compositions can be edited in the current project can be double clicked to be edited. At this point, instead of showing the components children, the hierarchy of its composition will be shown instead. The component label will feature a "back" button to allow users to exit the in-context editing experience.

TodoItemDeleteButton is being edited, what is seen is its composition. not it's children.TodoItemDeleteButton is being edited, what is seen is its composition. not it's children.

TodoItemDeleteButton is being edited, what is seen is its composition. not it's children.

Component Actions

Right clicking, or clicking on the context menu of each Component's row, presents the following actions:

  • Create New Component - Take the current selected component and create a new component from it and its children.
  • Cut
  • Copy
  • Paste
  • Duplicate
  • Rename Instance - Change the component instance name in the project
  • Remove Template - If component is marked as a template, delete the template.
  • Set as (Default) Template - If no templates for the component exist it will say "default" otherwise, it will set additional templates.
  • Delete Instance - Removes instance from the composition but does not delete the component from the project.

Additionally, if the current selected component is being edited, meaning its composition is showing, additional options will be present in the context menu:

  • Hide composition - This is the same as clicking the back arrow.
  • Rename Component - this renames the component, not the instance, project-wide.
  • Edit documentation - opens the documentation pane.
  • Edit definition - opens the component code
  • Remove component - removes the component from the project.