Preview

The Preview is your app, running live in your Workspace. It is a real build of your code with its Data Twin standing in for your backend, so every edit you or Soffi make shows up in it as soon as it is saved. It is also where everything else in the Workspace starts: you select elements in it to style them, pin comments to it, and point Soffi at the part you mean.

Each Workspace has its own Preview at its own address, so what you see is your work and nobody else's. See Previews and deployments for how that works.

Moving around your app

Use the app the way your users would: click links, fill in forms, open menus. The toolbar above the Preview has Go back, Go forward and Refresh, and a path bar that shows where you are inside your app. Click the path to type a different one. As you type, the path bar suggests routes Soffi found in your code along with the pages you visited recently, so you can jump to a screen without clicking your way there.

When you come back to a Workspace, the Preview opens on the page you left it on.

Because the Preview runs on your Workspace's Data Twin, the data you see is the Data Twin's realistic data, not production. To show a state the Data Twin doesn't have yet, like an empty list or an error, have Soffi add it to your Workspace's Data Twin.

Selecting elements

The select tool in the toolbar, or ⌘E, lets you click any element in the Preview. You can style a selected element in the Style Editor, and from the small toolbar that appears next to it you can view its code, leave a comment on it, or send it to Soffi as context. Press Esc to stop selecting.

Screen sizes

To see your app at another width, resize the Preview. In the Grid layout, drag the edges between panels, and the Preview reflows the way a browser window would, so you can check a change at phone, tablet and desktop widths without leaving the Workspace.

The Preview follows Soffi's light or dark setting rather than offering a theme switcher of its own. Theme values for your tokens are in the Design System panel.

When the Preview isn't showing your app

The Preview tells you what your app is doing when it isn't ready:

• Deploying or building. A new Workspace, or a redeploy, shows progress until your app responds. After an edit that needs a rebuild, a progress bar shows the rebuild.
• Asleep. A sleeping Preview wakes on its own when you open it, and says "Bringing it back up for you" while it does. If the environment is busy, it starts as soon as there is room.
• Stopped. Click Deploy to start it again.
• Unreachable or not starting. Click Redeploy, or have Soffi look into it. When your app keeps stopping as it starts, the Preview shows the end of its log and a Restart app button.

If a build stays stuck, you'll get a Retry build button.