Away with the old and in with the new — we have something amazing in store for you today! Supernova has been a leader in design-to-code hand-off, and most recently also design system tooling, pushing the boundaries of what is possible — and we couldn’t be more happy with what we have achieved so far.
However, we have felt for a while now (and I am sure everyone reading this feels it too) that design system tooling has reached its full potential and there is just not much to improve anymore. Tokens, components, documentation and the entire ecosystem — it is all as it should be! Congrats everyone, we’re done!
Introducing Supermail!
After much deliberation and looking into what we could do next, we’ve discovered an area that is primed for revolution — something that creators love to spend time on, users love to read and also something that has a huge potential for innovation — marketing emails!
Supermail is a platform for your juicy marketing emails. Now you can write your marketing emails similarly to how you would write your Notion documents — but much better!
When you are happy with your email, simply click Publish and you will be able to see the email exactly how it will show on your devices. You can also keep all your emails in one place, creating a database of them!
Best yet, by clicking on the “Code” icon, the code for that email will be instantly generated — based on best practices, optimized for all inboxes.
And that is not all — the code is generated using our flexible templates, and you can change them all just by using Javascript and HTML! You can even contribute your own custom functionality to the editor by using our powerful VS Code extension.
Finally, the entire editor is fully connected to Figma, so you can pull in any frame from a Figma doc — directly. As in regular Supernova docs, the resulting image is static, not a Figma embed, and if you update your content in Figma, it will update inside your emails as well — talk about saving time and removing hassle for your marketers!
There is so much more that we’d like to show you here, but we believe you will want to explore it yourself! Go ahead — start with Supermail right now!
We can’t wait to see what you can create with it!
This was a great fun project to make and we can’t wait to see what you can do with it. Of course, if we managed to fool you, we’d like to wish you an amazing April 1st — stay safe out there, it is a jungle! And rest assured, Supernova is not going anywhere!
However, what originally started as a joke is actually a very real exporter mini-product that we are releasing today so your marketing teams can use it right away - to make creation of custom-coded HTML emails a breeze.
🤔 How did we make Supermail?
Supermail uses Supernova technology called Exporters that define not only visuals but also the functionality of your design system documentation site using a combination of Javascript, HTML and our own simple-yet-powerful templating language. We have created Supermail as a showcase of just how extensively you can modify your documentation site when you use exporters to their fullest potential.
Thinking of creating documentation similar to Stripe? Or maybe Adobe Spectrum, IBM Carbon or Salesforce Lightning Design System? Or just something completely custom? Wouldn’t you love to write and edit in a really powerful Notion-like documentation editor, while still keeping full control of how the documentation looks when published? This, my friends, is Supernova.
🚀 Try Supermail yourself!
Now for the best part, something that we promise will blow your mind — you can start using Supermail yourself right now within Supernova! To get started, create an account first if you haven’t already. We recommend creating a separate design system, dedicated just to your emails, if you've already used Supernova before:
Then, switch to Code Integration (left), select Store (top) and click “Install” next to Supermail. You have now Supermail available in your workspace, and can start using it.
Finally, switch to Settings (left bottom), select the Documentation /General section, and switch “Active Exporter” to Supermail.
This switches how the resulting documentation is rendered — as you will see later, it will change rather drastically. From this point forward, you only need to care about creating content.
✍️ Creating Content
Creating emails is the same as writing your documentation pages. Just remember, one documentation page = one email. Try writing /email inside your documentation editor to see email-specific blocks (which are defined as part of the custom Supermail exporter - something you can also do - extend our editor experience and published site with your own extra blocks and functionality).
Keep in mind that not all blocks inside the editor are supported for the export of the emails, so when you are writing content, use only text, image or Figma blocks for best results (something we might improve over time, or you can help us by contributing into this project as we have made Supermail exporter package open-source).
Once you are ready to see your emails, click “Publish” and view your documentation site! Since this is using the extensively-modified Supermail template, the generated site is now a special portal for accessing all of your generated emails! A cool example of what is possible with exporters — your imagination is the limit.
🙏 Closing thoughts
There is so much more our exporter technology enables going forward — and it is amazing to see and also showcase just how powerful the customization behind Supernova is.
If you hate tools that you can’t customize exactly to your liking or you find yourself locked into particular way of doing things, then Supernova was tailored specifically for you. However, if you love simplicity and want to have your design systems, token libraries, component integrations, brand guidelines and spectacular documentation working out of the box — we have that for you too, and so much more.
For more about Supernova:
- Join our amazing community
- Give Supernova a shot
- Watch what all is possible with Supernova
- Give us a shoutout on Twitter
We are doing wild things like this all the time! Finally, if you liked Supermail, we’d really appreciate if you shared it with the world — on Twitter, Slack or anywhere else. We love to push far beyond what is thought to be possible, and we would love to invite everyone to participate!
Have a great April and we will be back soon with more!
Team Supernova.io
