Desktop App (Windows/Mac)Workspace

Using the App

Interface Overview

The app window is split into three columns:

ColumnPurpose
Files in Sandbox (left)Lists every file you’ve opened, plus your Revision History
Code Editor (middle)Where you view and edit the component’s code
Live Visualizer (right)A live, real-time preview of the component

Along the top-left of the window you’ll also find File, Account, and Help menus, and on the top-right, buttons to show/hide the Files panel, split the view, or focus a single panel.

Customizing Your Workspace

Buttons in the top-right of the window let you adjust the layout:

  • Toggle Files panel: show or hide the left column to reclaim screen space.
  • Split view: shows the Code Editor and Live Visualizer panels side by side (the default).
  • Single pane: focuses on one panel at a time. Clicking it repeatedly cycles Live VisualizerCode EditorLive Visualizer, and so on.