Getting Started

Getting everything set up and connected to start using the Supernova developer platform.

Download Supernova VS Code Extension

Supernova integrates tightly with your Microsoft VS Code environment and we have published an extension that you can download right now to get started.

  1. Navigate to the VS Code extension marketplace
  2. Search for Supernova
  3. Install the extension

Once you install the extension, you will see its icon pop up on the left side - that way, you can always access it anytime you need to generate code out of your design system.​

The Supernova extension shows up right after installing


Currently, only VS Code is supported. However, we strongly recommend using VS Code for the best experience possible. Join our community Discord to get more information about upcoming releases of Supernova extension for more platforms!

Obtain Your Developer Key

The extension must be authorized to communicate with your design systems on your behalf. For this reason, you must generate a persistent developer key on our cloud before you start developing. This key allows you to access any design systems within workspaces of which you are a member.

  1. Make sure you have a Supernova user account created first
  2. Navigate to Supernova Cloud > Your personal profile (top right corner) > Authentication
  3. Generate the authentication token and safely store it so you don't lose it

Providing a custom name will help you differentiate between different tokens easily

Once you confirm and create the token, you will only get one chance to see the key. If you lose the token, you will have to generate it again.

Login in VS Code

Once you have obtained your key, you must authorize the extension itself. Navigate to the extension and switch to the Supernova panel. You will see only one option (Login). Click the Login button and copy-paste the key into the text box. This will log you in and also securely store your key locally so your developer session persists as you are working.

Login by copy-pasting the developer key into the provided input field

At this point, you should be able to see the Supernova panel with different options, like the ability to select a default exporter, the ability to choose from your design systems, etc. You are now ready to start developing with Supernova!

Your panel content will vary depending on if you already selected design system and so on