Generate code snippets based on Storybook Controls

[maxhot]

Is your feature request related to a problem? Please describe.

Hello, Storybook Community!

I'm curious to know if there exists a plugin or a method within Storybook that allows for the exporting of code that replicates the exact state as set in a Storybook Controls block.

In practice, this could streamline the process of sharing and replicating components with specific prop configurations, potentially speeding up UI development quite a bit.

I'm aware of the Storysource addon, which lets us view the source code for stories, bit it doesn't quite capture the dynamic, real-time changes made through Controls. What I envision is a more integrated solution that would automatically generate and allow for the export of code snippets based on the current Controls state.

If such a plugin or feature does not currently exist, I'd be interested in hearing if others find this potential feature valuable and whether there are any ongoing efforts to implement it. And if no one is working on this, I'd consider contributing to its creation.

Thanks!

Describe the solution you'd like

I'm picturing an add-on or feature that enhances the existing Controls block to generate code snippets based on the type of component being rendered.

Describe alternatives you've considered

I couldn't find any existing plugins that achieve this, so I was considering custom tooling to achieve the same end

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[shilman]

Hi @maxhot . The Canvas/Source blocks in addon-docs already do this. My hope is to deprecate Storysource and create a new Source addon that puts this in the addon panel. In the meantime you can get this on the Docs page for a component, which is autogenerated if you configure your Storybook for it:

• Autodocs
• Canvas block
• Source block

[maxhot]

Thanks, I'll take a look!

[JamesIves]

Is there a plan formalized for that deprecation or still a WIP?

[noranda]

This is exactly what I'm looking for. I want to be able to copy source code, just the rendered code including any props, for each of my stories. Right now that can only be done in an mdx doc page, but I'd love to be able to extend it the addon panel for each story. The storysource addon isn't quite what I'm looking for.

[JamesIves]

If you are building Web Components, the HTML Preview add on may be a suitable stopgap here: https://storybook.js.org/addons/@whitespace/storybook-addon-html