Project Settings, Code mode, Sharing, Publishing, and Zoom
The right side of the toolbar covers: code mode, instruments panel ( console and issues), share and collaboration, publish button, and zoom tool.
Project Settings
The Project Settings menu is for setting up environments and environment variables. This is similar to setting up a .env
file to store any API keys needed in your project.

Project Settings (Environments)
Clutch provides two environments for you, a development and a production environment. Feel free to add other environments if needed.

Project Settings (Variables)
You can add as many variables as needed.

Adding a variable to the project settings
When you select the add variable button, a form will appear where you can fill out the name values for individual environments and provide any necessary documentation information.
Code Mode
Get a view of your project's directory structure and modify its files.

Code Mode window
Views and Collaboration
Avatars, Permissions, and Share Settings
- Profile Avatar Your Profile avatar indicates your logged-in status. Other users' avatars will show here if they are working on the project.
- Share option Available if you own the project you are working on, the
share
button opens a modal that allows you to change your current project's sharing and permission settings.
Publish Button
Publish to npm, our Clutch hosting, and more. The publish pane is a hub of destinations for your work. For more information, click here
Zoom Menu
Jump to preset zoom sizes or fill/fit content to zoom.

Zoom Menu
You can zoom in and out of the canvas in the following ways:
Holding Ctrl / Cmd ⌘ while scrolling with a mouse or trackpad
- Ctrl / Cmd ⌘ + + or -
- Ctrl / Cmd ⌘ + Alt + 1 to fit the canvas content
- Ctrl / Cmd ⌘ + Alt + 2 to fit the selected frame
- Using the zoom control found in the application bar
Note: Pinch-to-Zoom
The Selection tool must be activated for correct functionality.
More info
Watch on YouTube an overview of Application bar and Toolbar
Updated 7 days ago