Multiple Preview Windows

[shilman]

why

It is nice to be able to see many story previews at once. I can think of two main use cases for this:

1. I've seen many Storybooks that contain stories like this one:

Lonely Planet implements this as a single story, but it would be a lot cleaner if it could be implemented as five different stories, that are displayed on the same page.

2. A second use case is something like https://sizzy.co/, but for components, where we can show a single component rendered responsively on multiple device sizes at once:

what

I don't have a particular implementation in mind, but am writing this up for @alexandrebodin who is interested in making the Storybook UI pluggable. I think this could be layered as a plugin on top of a deeper story hierarchy, such as #1329

[alexandrebodin]

❤️

[ghost]

+1

I was just going to suggest this idea but chose to check the issues in case someone else got there first. I basically would like something similar to what Chrome offers when dev tools are open: a configurable set (probably with some common sizes out of the box) of sized preview panes/boxes/viewports for showing the same component in multiple things at once like an iPhone 5 and an iPhone 7 and a Samsung S6, etc.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale]

Hey there, it's me again! I am going to help our maintainers close this issue so they can focus on development efforts instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[OliverJAsh]

A second use case is something like https://sizzy.co/, but for components, where we can show a single component rendered responsively on multiple device sizes at once:

I really want this feature, but I'm not sure how it would work.

We would need to "mock" the window width for each size variation of the component. The only way I know of achieving this is with iframes. However, the issue with iframes is that are isolated from the page's styles, so we'd have to inject styles into each iframe, somehow. This could quickly become a performance problem, if you're rendering several iframes at the same time, each with their own styling (+ any logic for HMR).

[arthur5005]

Working on components with multiple viewports at once would be great.

[shilman]

You can hack addon-docs to do something like this pretty easily, although it's not what the feature is intended for: https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/mdx.md

[PutziSan]

A second use case is something like https://sizzy.co/, but for components, where we can show a single component rendered responsively on multiple device sizes at once:

Yep, this would be really awesome!

You can hack addon-docs to do something like this pretty easily, although it's not what the feature is intended for: https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/mdx.md

I don't know this, I took a quick look at it, but unfortunately I have no idea how to use it straightaway.
Could you perhaps give a first kick-off or mini example of how and where to use addon-docs to display multiple viewports in a storbook?

[shilman]

@PutziSan Sure, I can do that. Can you provide some static HTML of what a good implementation might look like, and I can privide a POC using SB Docs?

[PutziSan]

@shilman That would be really awesome!
I made the most basic variant I came up with in a code-sandbox in react. If you only wanted the static HTML, you could copy it out with the dev-tools, otherwise let me know if you need something else or if it's not what you imagined.
https://codesandbox.io/s/gifted-brattain-1fxwf