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.

Create new block by writing /react in your docs - And paste any code from your React codebase!

Create new block by writing /react in your docs - And paste any code from your React codebase!

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.

Access different visual variants under Render as ... menu now available on all React blocks

Access different visual variants under Render as ... menu now available on all React blocks

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