Application Bar and Toolbar

The Application Bar's Toolbar section (the center section) changes depending on what you have selected in your workspace.

It has the tools to select and interact with components and frames, enter code mode, view the debugging tool, and publish your project.

Depending on what you selected, the application bar will be slightly different.

Application bar with no Frame or components selectedApplication bar with no Frame or components selected

Application bar with no Frame or components selected

Application bar with a Frame or component selectedApplication bar with a Frame or component selected

Application bar with a Frame or component selected

Application bar if a component in composition is selectedApplication bar if a component in composition is selected

Application bar if a component in composition is selected

Application Bar

The Application bar contains three sections, the Main Menu and Tools, a Context-aware toolbar, and the Views and Collaboration.

On the left side of the toolbar we have: main menu, frame tool, select and interact tool, pan tool
and logic primitives.

Main Menu

Main MenuMain Menu

Main Menu

Clicking on the Clutch Logo opens the Main Menu pop-up where you can find these options:

  • Back to projects - returns you to your dashboard
  • Version history - opens the version history menu
  • Package manager - opens the Package manager modal where you can manage your NPM dependencies
  • Keyboard shortcuts - shows a list of available keyboard shortcuts
  • Documentation - opens a new tab that navigates to our documentation
  • YouTube channel - opens a new tab that navigates to our YouTube channel
  • Discord community - opens a new tab that navigates to our Discord community
  • Clutch website - opens a new tab that navigates to our website
  • Give feedback - opens a modal to report a bug or submit a feature request
  • Support chat - opens a chat box to begin communication with someone from our support team
  • Version - Shows the current Clutch version. You can find release notes in the Announcements channel on our Discord server.

Tools

Tools to navigate in the Canvas, where you will create and organize frames for the given workspace.

Frame Tool (F)

The frame tool allows you to draw rectangles on the canvas to create new frames.

Library (I)

It opens your project library to allow you to quickly add a component from either an installed package or from a list of components created in your current project.

Selection Tool (V )

The selection tool allows users to select components in their project using their pointer device on the canvas.

Interaction Too (B )

The interaction tool allows users to use their application while it runs. Interaction mode also removes all component highlighting.

Panning (Spacebar )

You can pan the canvas in the following ways:

  • Scrolling with a mouse or trackpad
  • Holding Space to activate the hand tool
  • Using the hand tool found in the application bar

Logic Primitives

Contains the If and Loop logic primitives. For more info, click here