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.

Code Mode opened

Code Mode opened


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.

Instruments Panel Tool open displaying logs and errors

Instruments Panel Tool open displaying logs and errors

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.

Zoom Menu

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