Exploring Studio

If you've ever used any design tool, the Supernova Studio interface will feel like home. The main window is split into 4 different parts:

  • (1) The top toolbar where you can find all the handy shortcuts for actions you usually need the most
  • (2) The left panel where you can find lists of screens, components, navigation chains, animations and assets
  • (3) The right panel where you can find details about your selected object
  • (4) The design editor where the visual preview is displayed and you can edit and play around with your currently selected screen

In addition to the basic modes, there are 2 additional ones worth mentioning:

  • (5) When enabled, the CodeX window splits the working area in half and shows real-time generated production-ready code for the selected screen on the right
  • (6) When enabled, the Navigation map window replaces the design editor view and allows you to create connections from screen to screen, manipulate the navigation connections and so on.

There are also many popup windows, usually for managing some specific functionality like localizations which are described in their respective chapters.

Context Menus

Each screen, component, animation, navigation or asset can be right-clicked (or shift-left clicked) to bring up the context menu for that object.

Context menus allow direct access to operations specific for that object type - for example, right-clicking a component allows adding animations to it, converting it to a different component type or even deleting the component if needed.

Keyboards Shortcuts

Supernova provides keyboard shortcuts for all the common operations you can do in Studio. You can find the complete list of shortcuts here.

Color Schemes

Supernova allows you to pick a color scheme of your liking. It offers 3 modes: White, Dark, Obsidian. You can change the color at any point by navigating to "View" > "Color scheme" in the top menu. You can also change the color scheme from the welcome screen by clicking on the sun or moon icon in the upper right corner.

Here's how Supernova looks with white mode on:

Dark mode on:

And obsidian mode on (default):


What’s Next

Learn about different panels you'll encounter and their purposes: