You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Storybook decorators (context providers, locale/i18n wrappers, themes, etc., configured via preview.tsx's decorators array) only get applied when Storybook's own story-rendering pipeline renders a story: via <Story of={...} /> or the normal canvas/iframe render.
It looks like Playground is just a plain React component that is dropped into the docs (MDX) page.
Our workaround, to get our custom i18n decorator to work for code previews, is to discard the preview by doing Container={({ editor }) => <>{editor}</>} in the Playground. Then we reuse our stories (created with makeLiveEditStory) and render it using <Story of={of} />, because that is using the story pipeline with decorators included.
This all works nicely, but now we encounter the problem that we have to keep the editor in sync with the preview. The only way to do this is by using your createStore. So we now initialize our own store and that works, but as the createStore is not exported from your package, it is hard to use it (due to npm it's hoisting).
We also use the store to fetch the code from a story.
Easiest way for this project would be to expose the createStore so people can sync code with their custom preview themself, this would help us greatly.
The nice, but more complex, solution would be to find out how to pass Storybook its decorators (bonus would be to load code from an existing Story so Playground behaves like <Canvas of={...} /> like our wrapper does now).
I think passing the decorators correctly and keeping their connection with Storybook its event bus can be cumbersome.
Activity
JeremyRH commentedon Jul 28, 2026
@githrdw does this PR solve your issue?
githrdw commentedon Jul 28, 2026
Yes this would fit our use case perfectly. Thank you for work 👍
feat: link Playground and makeLiveEditStory through a shared id