What's Possible

Supernova converts any design from Sketch or Adobe XD into a specific, robust data model that can be accessed from the Blazar language to create any kind of output you can dream up. That output can take many forms: CSS stylesheets, iOS animations, flexbox layouts, or even entire projects fully describing the application as seen in the design editor. We call the Blazar code sets that define exporter outputs "blueprints."

Blueprints

Blueprints are where all the magic happens. Blueprints are a powerful code templating technology that defines how an exporter should behave, and what to produce under certain situations. For example, a blueprint can define how to generate styles for a website, but it can also contain the header to be used in every generated file, or it can even provide computed data. A simple blueprint might look like this:

{* Get screen data *}
{[ var screenData @project.screenById(screenId) /]}
{* Output base class *}
class {{ screenData.name.camelcased(true) }} {
init() {}
}

Which, when run, would produce following code (or similar, depending on the context in which it runs - here, our project contained a screen named "Welcome"):

class Welcome {
init() {}
}

Blueprints have full access to the entire data model of Supernova Studio and the Supernova Design System Manager and allow for unprecedented output versatility.

Blueprint Language

Blueprints are powered by a templating engine and programming language called Blazar. If you ever used any templating engine such as handlebars or even things like React JSX, you'll feel right at home as the syntax and concepts are very similar. The main difference (and the main advantage) of Blazar is that it was purpose-built with code-generation in mind.

It contains many features that you'll find in other programming languages such as conditions, loops, scoped variables and many more, but also some additional ones that make code-generation a breeze. Most importantly, it enables some truly wild concepts which are built directly into the language, such as merging generated code with existing code written by hand - via "portals" - enabling the safe use of code generation in iterative, production developer workflows and at scale in large teams.

Blueprint editor

The best programming languages have robust toolchain support and Blazar is no exception. Supernova provides a complete set of tools including a compiler, debugging tools, console, autocomplete, output sandbox, and built-in code editor.

Blueprint editor bundled within Supernova Studio

To make blueprint creation even more accessible and quick, the blueprint editor's autocomplete function contains many pre-made snippets for all of the most common tasks, and suggests these intelligently from your editing context.

Exporter Packages

Packages build upon blueprints and bundle them together to form complete exporters. Exporters can and do differ wildly in what they do - from the simplest ones generating web styles to the most complex ones generating entire projects - where one click of the button generates all the code necessary to convert a design into a working application.

Exporter Customization

Not happy with how an existing exporter works, or is there something you need it to generate differently to better suit your needs or the needs of your team? All exporters are fully open, as an exporter package is nothing more than a specially-structured folder - you can browse the code and blueprints used to build it and you can change them freely as well - from overall configuration down to each character they output.

Creating and Publishing New Exporters

Of course, it is also completely possible to create a new exporter from scratch. This is useful when you want to use Supernova with a technology/language/framework not yet supported by default, or when you want to build support for a technology not publicly available, such as an internal enterprise framework or component library.

When you create an exporter and you think others would benefit from it as well, Supernova also supports remote exporters that can be installed from GitHub. Simply by publishing the folder as a repository, Supernova recognizes it as a package and manages everything including download, versioning and checking for new updates.

Exporter editor

Similar to blueprints, exporters also have their own editor which makes configuration a breeze. This editor allows configuring everything from basic information to how exporters behave, what blueprints they use, and how the blueprints map to files when writing to the file system. Unless you want to, you will never have to touch the internal structure of the exporter as everything is available through the interface for you.

The exporter editor allows for easy visual editing of all aspects of any exporter package

Now, let's explore how exporters work and what all is possible!