Import from Storybook URL

Import stories from Storybook.

You can use one, or multiple, Storybooks as sources for your design system content in Supernova. When you connect a Storybook, it becomes linked to your design system, allowing you to easily select and embed stories in your documentation.

Supernova will automatically update any further changes made to the Storybook in future.

Import from a Storybook URL

Data source: Storybook (Empty)
  1. You can connect a Storybook in Overview or Data sources sections. When visiting a section for the first time, you'll see a screen showing all available integrations. Click Connect Storybook.
  2. In the dialog that opens, paste the URL of the Storybook that you want to import stories from.
  3. You can add a custom name to your Storybook. If you leave this field empty, it will default to "Design System Storybook" (using your design system’s name).
  4. Click Connect. Your Storybook import will begin immediately.
Connect Storybook

Your Storybook stories should now be imported to Supernova!

 

If your storybook is behind login or VPN, we suggest hosting Storybook with Supernova using CLI.

 

Manage Storybook imports

In Data sources section of Supernova, you have an overview of all connected Storybooks. You can manage the integration and view details about the latest imports here.

Data source: Storybook - Manage imports

 

The import summary

Storybook Import summary

When your data has finished importing, you'll see an Import completed message appear. Clicking View summary in this message toast will open your import summary, where you can see exactly what was imported to Supernova from your Storybook and whether any issues occurred.

 

Remove connection

If you no longer want a Storybook repository to be connected to Supernova, you can remove it.

  1. Hover on the relevant repository row. You'll see a ••• button at the end of the row.
  2. Click ••• to open the context menu.
  3. Select Remove connection from this menu.
  4. A dialog will open. Click Disconnect to confirm and remove connection.