Skip to main content

Layout and panels

The editor uses the whole browser window.

The sidebar​

On the far left, the app's sidebar is collapsed to a narrow strip. Hover over it or click to expand; use the close control or click outside to collapse. It is the same sidebar as everywhere else in the app; see A tour of the app.

The chat panel​

Roughly the left third of the screen.

  • Tab bar at the top: one tab per conversation, a + to add one.
  • Conversation in the middle, newest at the bottom. Scroll up to load earlier messages.
  • Composer at the bottom: an optional selected-element chip, an attached-image thumbnail, suggestion chips, the credit banner when relevant, the message box, and the toolbar.

The preview panel​

The rest of the screen.

  • Toolbar: Preview / Code tabs, the page switcher, the address bar, device buttons, refresh, Edit and Deploy.
  • Banners: the free-preview banner, and when relevant a refund notice or a remaining-pages status pill.
  • The site, framed at the chosen device width.

Responsiveness​

The editor is designed for desktop widths. On narrow screens the two panels do not fit; use a laptop or larger.