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
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.
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 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.
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 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.
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.
Updated over 2 years ago