You can render your react components in your styleguides. This will allow you to see your components and code side by side.

Import NPM packages

1) Copy your NPM package from your package registry

2) In Code Resources in the Styleguide settings, paste your NPM package in the NPM Dependencies box

3) Your react code will render properly in the code block.

Add React preview

1) In the toolbar, click Code

2) Select React Preview

3) Paste your code

4) You can now render your react components.

👉 Note: Viewers can play with and edit the code, but it won’t save or change the code for anyone else viewing the documentation.

FAQs

Can I render components that are supported by private NPM packages?

At the moment, we only support public NPM packages. Supporting private NPM packages may be something we extend in the future.

Do I still need to use Storybook if I can preview my React code in zeroheight?

Storybook is helpful as a sandbox and QA tool. While the preview tool may reduce the need to use Storybook, you will still need to manually maintain your code snippets in both the code base and zeroheight.

Can I hide the code from viewers?

You can collapse the code panel and set it as the default; however, viewers can still expand the panel to view the code.