Interface Overview

Editor

The Editor is the interface in which you can manage your experience.

Front and center is the Canvas, a backdrop in which you can create and update components and screens, seeing your experience come to life in real-time.

Toolbar

The Toolbar is a bar found at the top of the Editor.

It provides quick and easy access via icons and links to perform actions which include:

• Project Picker to switch between projects (when applicable)
• Viewport Editor which see/manage breakpoints (device icons)
• Data State Override to manage what a screen looks like in various states (loading icon)
• Undo or redo actions (right and left arrows)
• Preview the design (eye icon)
• Save the design (save disk icon)
• Promote changes (promote button)
• Account Menu allows access to Settings and Account Details (name and gravatar)

Navigation Panel

The navigation panel is a panel found on the left side of the Editor which lists tabs which contain modes for building your experience.

The tabs are:

• Components: Access our library of tried and true, best-in-class components and create your own with the Components feature. These are the building blocks for your experience within the canvas.
• Structure: Create new and manage existing screens of your application, add new ones, and reorder elements using the Structure feature.
• Versions: View previously saved versions and revert to older versions of your project if desired.

Inspector Panel

The Inspector Panel is located on the right side of the Editor which has controls that allow users to fine tune the features built from the Navigation panel.

The inspector panel houses tabs that allow you to control key elements of your screen including:

• Appearance (paintbrush icon)
• Data (wrench icon)
• Linking (link icon)
• Tagging

Toolbar

The toolbar is a bar found at the top of the Editor which provides quick and easy access to certain actions.

Project Picker

The project picker provides a list of projects from which you can search or select a project you want to manage. This feature only applies to users with more than one project tied to their account. For users with one project, the project name will display.

Viewport Editor

Use the viewport editor to manage viewport sizes of the canvas. Each viewport size provides a breakpoint which you can use to create responsive designs.

Data State Override

The data state override is a feature which allows you to preview and edit what a screen will look like in various states, such as while it’s loading, has loaded successfully, or has failed to load.

Undo/Redo

Undo or redo changes you’ve made in the Editor using the undo / redo commands. You can undo a change you recently made if the change was unintended. And if you change your mind, you can redo the change.

Preview

View the experience you’ve created in the Editor in advance of publishing by using preview mode.

Save

Save changes you’ve made to a screen in the Editor using the save command.

Publish

Promote the current, saved version of a screen to the next higher environment using the publish feature. For example, publishing the current draft version of a screen to staging.

Account Menu

To view the account menu, click on the dropdown with your avatar and name in the toolbar. When the menu is expanded, you can access Settings, Account Details, or Sign Out.