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.

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

You can add as many variables as needed.

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.

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.

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