New React component blocks

We’ve reworked our React component blocks so you can display your components however you like — private, public, with or without code, or even editable live.

This version was released on August 23, 2022

If you haven't seen our latest version where we announced support for public, private React packages and private NPM registries that you can pull your code from, don't miss out on that!

With today's release, we are enhancing viewer experience of components with introduction of completely reworked React component blocks! Enjoy a little showcase of what all is possible :)

Introducing: React Live Code Block 2.0

With new React blocks, your viewers can enjoy live components directly from your codebases like never before. Edit code live, bring code to Codesandbox for ultimate "sandbox" experience, and, of course, get code directly from the documentation.

But that is not all. We are additionally bringing 5 different ways to render your code blocks so you can always pick the visualisation that suits you the best.

We have prepared several examples of full React examples for each rendering mode - enjoy!

Component Top, Code Left

With this mode, we can render component in a nice, full-width mode.

Component Bottom, Code Top

With this mode, we can render component in nice fullscreen mode.

Component Right, Code Left

With this mode, we can render component in nice split screen mode, saving space.

Component Left, Code Right

With this mode, we can render component in nice split screen mode, saving space.

No code

With this mode, we can render only previews, without editable code. Yay!

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, we are having blast with every release we do for you!

 

With love and eternal gratitude,

Team Supernova