Skip to content

Playground doesn't use decorators #95

Closed

Description

@githrdw

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

  1. JeremyRH commented on Jul 28, 2026

    @JeremyRH
    Owner

    @githrdw does this PR solve your issue?

  2. githrdw commented on Jul 28, 2026

    @githrdw
    Author

    Yes this would fit our use case perfectly. Thank you for work 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions