Code mode and right toolbar

The right side of the toolbar covers: code mode, instruments panel ( console and issues), share and collaboration, publish button, and zoom tool.

Views and Collaboration

Code Mode

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

Instruments

It 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.

Profile avatar, Project Permissions, and Sharing 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