Design Modes

There are two distinct modes in the design editor - Edit and Preview.

Edit Mode

In edit mode, everything you see in the design view is editable - from components to their structure to how they look. An edit mode screen is always shown in the size in which it was imported - for example, if the source design is intended for iPhone X, then Supernova will properly use this size.

Preview Mode

Since all components are backed by production code, Supernova can immediately run a simulation showing you how the entire application behaves. You can enable this behavior by switching from edit to preview at the bottom of the design editor.

In preview mode, your screen behaves like a real app - buttons will be clickable, animations will start playing, and you'll have the option to navigate to different screens if you have set the connections.

Not only does Supernova simulate the behavior of components, but it also simulates the behavior of the app in general. Things like layout are immediately applied - and since the Starlight layout engine in Supernova works in real time, you can drag the edges of the screen to freely resize the application and watch the resizing behavior change right away.

There are also some additional presets you can use:

  • Device size allows you to select a specific size from a list of predefined devices
  • Device orientation allows you to select either portrait or landscape orientation
  • Device language allows you to switch the language of the device, simulating different text configurations

What’s Next

Read about the third major presentation mode - real-time code generation