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.
- Navigate to the VS Code extension marketplace
- Search for Supernova
- 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
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.
- Make sure you have a Supernova user account created first
- Navigate to Supernova Cloud > Your personal profile (top right corner) > Authentication
- 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
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