Real-time Code Preview

Supernova already boasts one of the most powerful code generators ever created, which generates production-ready code in real-time as you build your project - CodeX.

You can enable or disable CodeX by clicking the CodeX icon in the top bar. When CodeX is enabled, the design editor goes into a split-screen mode:

When you change anything, CodeX picks up the change and regenerates the code immediately - and it's reflected in the righthand split screen.

Multi-screen mode

Developers and designers usually use a multi-screen setup, so Supernova supports this as well. You can disconnect the CodeX window by tapping the double-screen icon on the top right, and then you can reposition the newly created window as you like. The window also remembers its configuration, so when you re-enable CodeX again, it will be immediately set itself up the same way as last time.

CodeX does not just generate code for the current screen, but rather keeps the entire codebase available all the time - so you may want to show more than one file at once on the screen. You can add another code file view by clicking the + button at the bottom right of the code window.

This is especially useful when working with Android and React platforms since those usually require more files to implement a single screen. Now you can copy-paste from two files at the same time.

Code configuration

Since code-generation works in real-time, you can switch between platforms in real-time as well. Just select the platform from the top and watch the code change.

You can also configure the way code looks (spacing, headers, new lines and so on) by going to Supernova Studio > Preferences... and selecting the specific platforms. For each platform, the code and naming section options apply when generating code in real-time.

CodeX options

CodeX always shows all the code needed to generate selected screen, but depending on configuration and platform, the code might be split into multiple files. You can access different files through the top selector of the CodeX window. There are also two additional options:

  • Scroll to selection - when enabled, when the selection changes in the design editor, code will scroll to the first code line that corresponds to the selected component. You can use the up/down arrow icons on the right of the selection panel to move back and forth between different blocks.
  • Highlight selection - when enabled, will highlight every code block needed to implement the selected component. This even highlights things like animations and navigation connected to it.

📘

Fun tip from Supernova developers

Supernova actually buffers the changes and regenerates the code with a small delay - this is to prevent melting your CPU when you're just dragging things around, for example. But if you have a computer powerful enough, head to Supernova Studio > Preferences... > Code Preview > Refresh Speed and switch to Real Time. The code in this mode will be generated quite literally on every frame change. Good luck, explorer!


What’s Next

Learn about the powerful animation options inside Supernova