Bitbucket integration

Plus editable code, and even more speed optimizations!

This version was released on May 12, 2022

Another version is here and it brings two features we wanted to do for a long time - BitBucket and Live-editable React code blocks, alongside small but handy improvements to tables and another batch of speed optimizations. Read more below!

Full BitBucket Integration!

We have added another integration — BitBucket! You are now able to link your BitBucket account in the same way as GitHub, Azure DevOps or GitLab and use your repositories as a destination for builds and hooks:

 

 

With BitBucket set up, you can automatically deliver your tokens, assets, or even documentation to your BitBucket repositories as pull requests, making your developers really, really happy!

 

 

Editable React Widgets

Many of you have asked for this, so we are making it into reality - live-editable React widgets are here! You can spawn live widgets using /react command. Live widgets are enabled by default, and can be disabled in the settings (alongside another new option, more on that below!).

New setting options - live widgets and Codesandbox.io integration

New setting options - live widgets and Codesandbox.io integration

With editable widgets, you can give your users option to play around with the code directly in your documentation - so they see how the code changes impact selected component.

You can now play around with the code by clicking

You can now play around with the code by clicking "Edit Code" button in the bottom-right corner

 

The following widget has live code enabled, so click the new "Edit" button to see it in action!

 

Try changing one of the alerts to error message using the following code:


                                                        
                                                        
                                                            <Alert severity="error">Error!</Alert>
                                                        
                                                            

Codesandbox.io Integration

We have also added integration with Codesandbox.io so you can now open any of your React widget directly and continue more sophisticated editing there. Also, if you make any change into the React widget in your docs and then decide to edit it, it will take your edited state instead.

To open Codesandbox, navigate to the widget above and click the Codesandbox button! This will immediately open up configured sandbox with your component showing there.

More speed optimizations

This week we have focused on our larger clients with medium-to-large design systems and tried to optimize the experience for you as much as possible. You'll see great improvement in loading speeds of several categories, especially when browsing the documentation editor and your design system data.

We have also removed, bundled, or cached remaining code libraries, and removed all that is not necessary to only load on demand. This further decreases time you have to wait when loading Supernova. In fact, there is now very little data transfer happening for any action.

Additional Improvements

  • It is now possible to make your Tables fit the page with one click.

As always, if you would like to see something new, fixed, or improved, join our Discord community — we are always there. Thank you for your support!