storybook: Addon-docs: DocsPage Controls don't update iframe stories
Controls don’t update iframed stories on the Docs tab, but do update on the Canvas tab.

For frameworks that support inline rendering (react, vue, web-components, etc.), making the docs stories render inline is a workaround.
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 31
- Comments: 45 (22 by maintainers)
@lucas-labs you need to opt into inline rendering by configuring
.storybook/preview.js:with this PR it will work https://github.com/storybookjs/storybook/pull/13525
So for me i also have this issue with angular -> here is an example repo: https://github.com/flobiber/storybook-angular
No quick fix yet @seriouz
Here you go: https://stackblitz.com/edit/github-yxuht3?file=src%2Fstories%2FButton.tsx,src%2Fstories%2FButton.stories.ts&preset=node
If you go to the Buttons “Docs” story you can see that I added the following to the meta config:
After adding this, changing the controls for the primary story has no effect.
I noticed Storybook styles colliding into the inline stories, so I then thought to use the iframe mode to prevent that. And now I’m faced with the realization that controls do not working with iframe stories in docs page.
I’ve created a PR that would let users know of this current iframe stories + docs + controls limitation in the docs https://github.com/storybookjs/storybook/pull/25593
@jamesjenkinsjr if you needed to do this it’s due to a configuration problem and not related to the iframe issue here. I just want to clarify for anybody who stumbles across this to avoid confusion.
@shilman No repro; my observation was a hiccup on my upgrade from 5 to 6. My apologies!