Composition Tree

Composition Tree

The composition tree is composed of frames and components.

composition tree

composition tree


A frame is where your components are added, which will then be rendered to the visual frame in the canvas. They cannot be nested and may contain only components. In the composition tree, frames are represented by a Frame icon # followed by the frame's name.

A frame labeled "My Frame"

A frame labeled "My Frame."


Additional infromation on frames and what they are can be found in the Canvas and Frames section.

Canvas and Frames

Frame Actions

Right-clicking a Frame, presents the following actions:

  • Copy
  • Paste
  • Duplicate
  • Rename
  • Delete
  • Set as Project Cover - Choose a frame for your dashboard to use as the project tile.
  • Add to the library - Adds the frame, including its components, as a template, selectable from the library.
Frame options menu

Frame options menu


Renaming Frames

When renaming a Frame in Clutch, most characters are allowed with the exception of / and \. These are reserved and will not allow the name change to save.


Components will live in the composition tree in 3 different ways:

  1. In the composition tree of a frame.
a component in a frame

A component in a frame

  1. nested in other components as children.
nested component

Nested component

  1. or as part of a component's composition.
components part of the composition of a component.

Components in the composition of a component.

More info


Learn more about Composition


Watch on YouTube an overview of Composition Panel