Application Bar and Toolbar

The Application Bar provides access to the following features:


Top: Application bar with no Frame or components selected

Bottom: Application bar with a Frame or component selected

Application Bar

1. Main Menu

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

  • Back to projects - returns you back 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 running Clutch version, release notes can be found in the Announcements channel on our Discord server.

2. Frame Tool

Create frames from predefined sizes or choose your own custom size.

3. Selection Tool

Select components and frames while using this tool as opposed to triggering interactions.

4. Interaction Tool

Trigger interactions with components rather than selecting them.

5. Pan Tool

Navigate your canvas in two dimensions by clicking and dragging.

6. Insert Menu

Opens the marketplace menu that allows you to quickly add a component from either an installed package or from a list of component templates created in the current project.


7. Code Mode

Get a view of your project's directory structure and modify its files.

8. Instruments

Opens a Developer Console to help you debug issues in your project, you can view all logs or logs from just a single selected frame.

9. Profile avatar, Project Permissions, and Sharing Settings

  • Profile Avatar Your Profile avatar indicates your logged-in status.
  • Share option If the project you are working on is owned by you, you will have the option to select the share button, this opens a modal that allows you to change the sharing and permission settings of your current project.

10. Zoom Menu

Jump to preset zoom sizes, or fill/fit content to zoom.

Toolbar with nothing selected

When you do not have a frame or a component selected, the Toolbar will show the Project Name/ Version history and the Publish Button.



To stop selecting a frame or component, you can press the Esc Key or Click anywhere on the blank canvas to show this Toolbar.


11. Project Name/ Version History dropdown

Indicates which project you are currently in. Clicking here will also open up the version history dropdown allowing you to select a past version of the project.

12. Publish Pane

Publish to npm, our own hosting, and more. The publish pane is a hub of destinations for your work.

Toolbar with a Frame or Component selected

When you have a Frame or Component selected the toolbar will switch to showing you the Frame Tools.


13. Frame Home

Navigates to the frames home URL

14. Frame History

Navigates backward or forward through the selected frame URL history

15. Refresh

Refreshes the frame

16. Frame Address URL

Points the frame to the URL entered in the bar. This can direct the frame to render specific routes set up in your project.

17. Pop-up frame

Pops your frame out into a separate window

Did this page help you?