Storybook: Examples of storybook demos with possible codesandbox links

Created on 2 Dec 2019 · 12Comments · Source: storybookjs/storybook

Is your feature request related to a problem? Please describe.
Thanks to storybook you can see an example of how to use the component, but I often want to try it on codesandbox.
Storybook has the story menu where you can see the code that was used.

Describe the solution you'd like
My suggestion would be the possibility of integrating an "edit to codesandbox" button, so if the user wants can directly try the code, even with different data or settings different from those initially set by the type of element selected by the storybook, but starting from the base that user wanted to try.

Example: Link
For each code, there is a section to try it on codesandbox.

feature request

Source

Angelk90

👍3

Most helpful comment

I believe @kevin940726 just added a nice example to https://reaviz.io

shilman on 25 Jan 2020

❤1 👍1

All 12 comments

I am unable to get storybook to work for me in a codesandbox though I see plenty of links on google for codesandboxes that seems configured. There must be something I'm misunderstanding about stoybook's bundling and serving in that environment?

dvnrsn on 10 Dec 2019

The reason this is relevant to me is that I'm trying to understand and replicate the basic badge docspage locally without success. I need to get it working in a siloed env to wrap my mind around how the story docs are generated

dvnrsn on 10 Dec 2019

https://github.com/codesandbox/codesandbox-client/issues/1603

Looks like this might not be worth the lift. Let me discover or create a simple github repo that can illustrate docspage

dvnrsn on 10 Dec 2019

@shilman , @dvnrsn : Are there any news?

Angelk90 on 22 Dec 2019

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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 12 Jan 2020

This would be great it seems shopify do this but I'm not sure how. Perhaps something like this could be used.
https://www.npmjs.com/package/remark-codesandbox
I tried to use this package by registering the addon-docs manually but the render seems to hang after a successful webpack build.