Supernova.io - Design System of the Future

Supernova takes your design system data and allows you to use them directly inside your VS Code, represented in any language, technology, or tech stack you are developing for, from the convenience of your beloved IDE.

With Supernova, you can explore, build and publish exporters - packages that define how the code should be exported from your design systems and control them down to the last character.

Lastly, this extension bundles Pulsar, a state-of-the-art templating language built with code generation in mind, alongside powerful javascript integration that makes building exporters a breeze.

Extension already installed and configured? Then feel free to skip all the rest content here and dive into our developer documentation to learn how to make the most out of Supernova! Here are some topics to help you awe your colleagues with some code superpowers:

• Explore what all can be done with exporters
• Run exporters to get code from design system automatically
• Build your first exporter
• Contribute to community creations

Configuring Extension

Before you can access your design system data and export the code, you need to configure this extension with your personal Supernova Developer Access Key.

Obtaining Supernova Key

Navigate to Supernova Cloud and log in with your credentials. Then, navigate to your personal settings using the top-right menu and into the security section. There, you can generate the access key using the provided interface.

Please note that the access key is only visible once and must be generated again if you lose it, for security reasons.

Authorizing VSCode

Launch the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and type > Supernova: Login. Select the command and paste the key you just generated into the console. This authorizes the extension to access your design systems and allows you to immediately start exporting the code.

Features

Currently, you can do the following:

• [x] Login with your Supernova account
• [x] Explore organizations and design systems you have access to
• [x] Export design elements such as colors, fonts, gradients, and so on to any platform
• [x] Use Supernova Exporter Store to find the code output that works for you
• [x] Set default exporters for your project so the entire development team can use them
• [x] Maintain an unlimited number of exporters tailored to your organization
• [x] Create a default project to help you get started with exporters

This extension also allows you to build the exporters, packages that define how the code should be exported in regards to your codebase. As an example, you can generate CSS files with color tokens, Android theme definitions, React styles, or pretty much anything you can imagine - and code, because you are in charge of how the design data will be exported.

To help with exporter development, this extension brings a full suite of the required language functionality for the Pulsar, state-of-the-art templating language built with code generation in mind, so you can develop your export procedures quickly and easily:

• [x] Full autocomplete support
• [x] Full syntax highlight support
• [x] Debug console integration
• [x] Static syntax analysis
• [x] UI integration
• [x] Runtime error reporting
• [ ] Step-by-step execution and breakpoints (work in progress)

Example use-cases

There are several amazing things you can achieve using this extension, from generating styles using the design system data to producing dynamic instantiation code for your components to building complex exporters that can produce entire codebases - the choice is yours.

Navigate to Supernova developer documentation to learn how to build and use exporters to automate and kill code hand-off for good.

Contact Us

Have questions? Feel free to join our community over at Supernova Discord and we will help you right away!