Export Modes

There are 3 ways how you can get your projects files - code, assets, configuration files, project files, and others, depending on the targeted platforms.

  • Project Export - Where you export all the files required to run the entire project
  • Screen Export - Where you export only the selected files
  • Real-time Export - Where you get the exported files for the currently selected screen inside Supernova. You can read more about the real-time code generation in dedicated section.

Project Export (export all screens)

Supernova allows you to export the entire project which can be immediately compiled and run on a real device using an IDE of your choice. You invoke the project export by clicking the Export option in the toolbar or by selecting the Top Menu > Export > Platform.

Project mode allows you to export production-ready projectProject mode allows you to export production-ready project

Project mode allows you to export production-ready project

When exporting the entire project, "project" option needs to be enabled in the export window. This locks you from selecting which screens you want to export - all of them will be exported. The export window itself allows you to configure the project settings and is shared with the project configuration.

Depending on the platform of the choice, the project export outputs the following artifacts:

Flutter:

  • App Widget definition
  • Screen Widget definitions
  • Cell Widget definitions
  • Custom Widget definitions for animated components
  • Scaled PNG assets for images
  • Custom fonts not present on the target filesystem
  • I18n files for localized apps
  • Pubspec file for project configuration and dependencies

iOS:

  • Storyboards, XIBs or Interface Code, depending on project settings
  • Controller Definitions
  • Cell Definitions for dynamic list components
  • Assets, both vector and bitmaps, depending on project settings, in Asset Catalog
  • Custom Fonts not present on the target filesystem
  • Localization Files if localization is enabled
  • XCode Project that binds everything together with configured schemas and targets

Android:

  • Activity or Fragment classes for screens
  • RecyclerView Adapters for dynamic list components
  • XML Layout files for Activities, Fragments, and ViewHolders
  • XML Drawable files for background shapes and ripple touch effects
  • PNG assets for images
  • XML Value files for dimensions, colors, and strings used in the project
  • Additional XML Values files with strings for localized apps
  • Font files with XML font definitions for custom fonts
  • Gradle files and Android Manifest XML file for project configuration

React Native:

  • App Component definition
  • Screen Component definitions
  • Cell Component definitions
  • Scaled PNG assets for images
  • Custom fonts
  • I18n files for localized apps
  • Package.json file for project configuration and dependencies

Screen Export (export specific screens)

Sometimes, especially if you are iterating through an n-th version of the project, you don't really want to produce the entire project - what you are interested in are the screens that changed from the last version, and Supernova allows you to export just that.

First, switch to Files mode on the left side and then select what screens you want to export. Use the zoom slider if there is a large number of screens so you can see them more easily.

Files mode allows you to export production-ready code and assets to implement specific screensFiles mode allows you to export production-ready code and assets to implement specific screens

Files mode allows you to export production-ready code and assets to implement specific screens

Screen export produces the same assets as the project export with one important distinction - only assets required to build specified screens are exported, the rest is ignored. For example, the XCode project will not be created and most of the assets are omitted as well.