Live Mode

Supernova uses real, production-ready components to build the designs and everything you see on screen. But what you see when editing the design is much more than just a preview. Supernova is able to fully simulate the entire running app right within the preview window. We call it a live mode.

The canvas allows you to seamlessly switch between edit mode (where you can move, add, modify or remove components) and live mode. In live mode, each component behaves exactly as you'd expect it to - buttons are clickable, you can freely write into text fields or preview animations. Because everything you do in Supernova is backed by the production code, you'll see it exactly as it will appear on a real device.

Switch to live mode by clicking on "Preview"Switch to live mode by clicking on "Preview"

Switch to live mode by clicking on "Preview"

📘

Platform-specific looks

Supernova currently simulates iOS-specific look. For example, native components like switches will look like iOS, even when the targeted platform is Android. This though only applies to the simulation - when you export it to a real device, the components will look like they should. We are planning to change this sometime down the road.

When the live mode is enabled, you can further customize the simulation with the following properties. You can find the configuration easily accessible under the main toolbar.

Device Type

Device type allows you to resize the device to test the layout, component behavior, text wrapping and more. You can either select from a predefined size - such as iPhone X, iPhone 8, or make a custom device size suiting your needs.

Live mode works in unisync with Starlight engine 
to create a real experience right within your working environmentLive mode works in unisync with Starlight engine 
to create a real experience right within your working environment

Live mode works in unisync with Starlight engine
to create a real experience right within your working environment

You can optionally resize the device by dragging the corner of the simulated screen. This only works in live mode, screens can't be resized in edit mode.

Device Orientation

Device orientation allows you to test your design in portrait or landscape mode, again properly simulating all the behaviors such as the layout. You can enable or disable portrait/landscape mode for your application in the project configuration or when exporting.

Our application looking good even in the landscape modeOur application looking good even in the landscape mode

Our application looking good even in the landscape mode

Device Language

Lastly, the live mode works with localizations so you can immediately test how your application looks like in different languages. In order to test the localization, first, have it enabled in your current project. Then, switch to the language you've already translated and watch your application completely change.


What’s Next

Time to export to production! Select your desired platform and learn how to get the most out of our super-powered exporters for iOS, Android, React Native and Flutter