This version was released on August 18, 2022
Ever since we started Supernova, we dreamt of a future where we'll be able to bring live codebases directly to the documentation, without any hassle. We had bits and pieces of this already by integrating with Storybook and other services, but it was never possible to render your codebases just by pointing to a repository and providing a short snippet of code representing your components.
Today, we're happy to announce that we are making it into reality with the introduction of true live components and support of private npm registries.
Introducing: Live code from public and private NPM registries
It's now possible to render your own React libraries coming from either private or public packages inside Supernova.
Configuring package.json
We were already able to render public libraries for some time but we have finally made a system that allows us to use your own codebases as well. To start with your code libraries, go to Settings > Documentation > General and add your own package.json configuration, like this:
Add private packages using scope (for us, that would be @supernova-studio/package) or public ones without it.
Configuring your NPM registry
Then, you need to authorize your NPM registry. Head over to the new settings section called NPM registry and provide your authentication token and scopes you would like to have access to. We can only access the scopes that you will provide through this setting.
You can provide scope with or without @, your choice. Provide more scopes separated by comma.
Using React rendering block
Finally, you can use the now-private library enabled React code block, import the library and enjoy your codebase being rendered in front of you!
This major addition will unlock so many new opportunities to enhance your documentation with live examples and live codebases and we can't wait to see what you can create with it.
Enterprise VPN configuration
For our enterprise clients, we also provide the option to access codebases behind VPN. If you are interested, please reach out to our support or engineering team, and let's discuss your setup and needs so we can explain how this configuration works.
Doc editor design alignment
We're publishing a counterpart to our work done in our last release, this time focused on the design polish of the documentation editor.
The editor will now have precise spacing, padding, font sizes, line heights, and everything else visually aligned with the resulting site — so you don't have to be guessing if you need to add some empty space or a new line somewhere.
With this version, the content will be aligned with the deployed site, making it much easier to write, format, and break content where appropriate, without any guessing games.
Image drag & drop
We've added drag & drop to the documentation, so you can now just drop your image resources into the documentation and they'll be properly rendered as if you have created an image block manually.
We've also added drag ghosts to the documentation editor (low-opacity block preview that follows your mouse as you drag), so you can now see what content you are dragging and where.
Ghosts are scary but sometimes really useful. And we delivered them way before Halloween!
Shift + click docs selection
We've added shift + click selection for blocks to the documentation, allowing you to select multiple blocks across the page very quickly — just select the top one, and shift + click the bottom one, or vice versa.
Improved block menu logic
You might have seen this one often yourself — you start to look for a block at the end of the page, and the block selector gets cut in half (at best) because it hides under the bottom part of the screen, making the block selection impossible. This then required you to scroll up to see the content below.
We've improved the block selector logic so now it will always find the proper direction to show and will show up instead of down when there is not enough space to show properly below, like this:
The menu will now show up, rather than down, if needed.
Improved opacity in tokens
We've removed limitations around opacity tokens - previously, opacity could only be set using dropdown as a multiple of 0.05. We have removed this limitation so the tokens can now have any % value that you want.
Also we've additionally modified behavior of color, border and shadow tokens in this regard.
Improved Figma frames search
Figma frames search has been significantly improved and we thank you for all the feedback you've sent us. We tackled three main complaints:
- When you search for particular, the results will now automatically expand
- When you close the frame, the previously expanded state will remain in place, so when you open the selector again, your state will get restored — no need to search again if you are looking to just add additional frames somewhere nearby
- We have added names of components as groups above their variants, so it is now very easy to understand what frames you are actually inserting into the documentation. We understand that without it, it was almost impossible to use.
We are also working on fixing how variants how in regards to their components, expect this in the release #82
Resizable component columns
It's now possible to resize component columns to your liking. Simply drag the edge of any column and resize it to the desired width. Grab the column in the middle to reorder them.
New Supernova health monitoring page
We've added real-time health monitoring of Supernova systems and also greatly improved internal processes so we can respond to anything out of the ordinary even faster.
You can bookmark the following URL: https://status.supernova.io/ to always tell you if something is wrong. We'll be also adding it to different places around the Supernova ecosystem so it is always there when you need it (we're hoping you'll never need it).
One source of truth for all things health related. For Supernova.io, that is
Additional improvements
Additionally we've improved the following behaviors:
- It's now possible to open Figma source file directly from the source list
- When searching for pages, it's now possible to use keyboard navigation
- Copy pasting text from Google Docs, Confluence and similar editors is now much more intelligent when it comes to preserving styles
- We've moved "add image" button in tables to be close to the cell, so it is always available to you
- We've unified settings section headers
- We've unified context menu item names
Bugfixes
The following annoyances are no longer at all annoying!
- Component properties had incorrect type when switching the type, this is no longer the case
- We've fixed documentation link in Integration page to not go to 404 page, wasn't too useful this way
- It's no longer possible to create references between tokens that don't match
- Back button in token tab now behaves as it should
- Transfering ownership to someone else will no longer throw 403 subscription.inspect error.
That's it for this release, but we'll be back with more soon. As always, if you'd like to see something new, fixed, or improved, join our Discord community — we're always there. You can also request a feature on our Feature Request Portal. Thank you for your support!