Deprecating addon-knobs

[shilman]

We released Storybook Controls as the successor to Knobs. Now, after a year, we're formally deprecating Knobs.

Unlike Knobs, Controls are built on Args, meaning they:

1. can be auto-generated based on your components' properties for most popular frameworks
2. are compatible with a variety of third-party integrations

Switching to Controls/Args fixed a lot of outstanding Knobs issues, and (in our opinion) was a superior option to knobs from the start. Not all of our users agreed, so over the past year we released a variety of updates to Controls to close feature gaps. While there are still plenty of improvements on deck, after a year we feel confident to formally deprecate Knobs.

We've extracted Knobs from Storybook's monorepo, and it can be independently maintained/released if anybody would like to step up to keep the project going. Meanwhile, we recommend all Knobs users to switch over to Controls, and we've written instructions to help with the migration.

[mctrafik]

Personally I don't understand why you deprecated addon-knobs. It's not ready for prime time for TypeScript users. It's trivial to break controls and lose argTypes when combining them. The design pattern of args is inferior to directly listing both the control/type/default value.

And without type safety, I've already had 2 engineers break controls in our storybook. This is a rash decision to deprecate knobs now without a feature-equivalent replacement and IMHO it should be undone.

[nsaunders]

In case you're interested, I created the Flare library (actually, ported it from PureScript) to help me move away from Storybook due to similar frustrations.

[chikunov]

With knobs following code is perfectly readable and doesn't require any additional ts typings even though it contains a special knob that allows to switch different cases.

const index = () => {
    const noDataMessage = text('someMessage', 'There is no data here.');
    const icon = select('Icon', ['IconAccountIcon', 'IconInboxIcon'], 'IconInboxIcon');
    const IconInboxIcon = <IconInbox marginBottom={10} width={48} height={48} />;
    const IconAccountIcon = <IconAccount marginBottom={10} width={48} height={48} />;
    const icons = { IconAccountIcon, IconInboxIcon };
    
return (
        <Block height={300} width={700} margin={20}>
            <DataStatusMessage text={noDataMessage} icon={icons[icon]} />
        </Block>
    );
};
This is simple and yet powerful concept.

With Args instead I don't have proper typing, the code is spread across the file and plainly speaking it is inferior

[shilman]

@mctrafik @chikunov

Regarding types, we'll be improving Args/Controls typing in 6.x/7.0 #13747 cc @kasperpeulen @yannbf.

Regarding addon-knobs deprecation, if either of you would like to maintain addon-knobs you're welcome to step up. We will continue to invest in Args/Controls and promote it as the preferred way to experiment with your components/stories in Storybook.

[mctrafik]

@mctrafik @chikunov

Regarding types, we'll be improving Args/Controls typing in 6.x/7.0 #13747 cc @kasperpeulen @yannbf.

Regarding addon-knobs deprecation, if either of you would like to maintain addon-knobs you're welcome to step up. We will continue to invest in Args/Controls and promote it as the preferred way to experiment with your components/stories in Storybook.

Yeah. Undeprecate the package and assign any breakages to me.

[shilman]

@mctrafik That's wonderful. There are a bunch of open issues already in the addon-knobs repo. Please let me know how you'd like to proceed. We have a Discord to discuss contributing here in the #contributing channel https://discord.gg/storybook

[mctrafik]

Michael, I've been trying to get a hold of any maintainers to review my PR so I can contribute but you're ignoring the PR and my messages asking for a review. This isn't how you should be forcing a deprecation. Feels like you're inviting people to fork the addon because you aren't willing to review PRs for it.

[shilman]

@mctrafik apologies for the lack of response. i'm not trying to force anything. i announced the move to controls over a year ago and asked for maintenance help repeatedly during the year--on issues, announcement posts, etc. in the end, after months of trying, i deprecated it.

re: forking, would you be open to forking addon-knobs and maintaining the fork? i would be happy to link to your fork in the deprecation message.

[mctrafik]

I don't have interest in forking in and maintaining it. It looks like storybook is moving to have more typescript support, and yet this is still deprecated. What will it take for you to see that this is a better addon and this is the one that should be maintained?

[Bohda-P]

Does this package work with react-native? Because I can't substitute @storybook/addon-knobs with @storybook/addon-controls!!!
How to fix this issue?

[astriskit]

Any update to this, folks?

[shilman]

Yes, there is a v6 prerelease of React native that supports controls

https://github.com/storybookjs/react-native/releases/tag/v6.0.1-beta.1

[astriskit]

Yes, I found that out while reading the thread on one of the issues here. Even got it setup and working nicely so far. Thanks for your reply.

…

On Mon, 28 Mar, 2022, 5:59 am Michael Shilman, ***@***.***> wrote: Yes, there is a v6 alpha of React native that supports controls https://github.com/storybookjs/react-native/releases/tag/v6.0.1-beta.1 — Reply to this email directly, view it on GitHub <#15060 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGZ5WF3BNTDJV7PEXBRU5BLVCD4OXANCNFSM45TNUHRA> . You are receiving this because you commented.Message ID: ***@***.***>

[Frezzle]

...and we've written instructions to help with the migration.

Migration instructions 404, moved to here.

[macko911]

Here's a (hopefully) stable link of the migration guide if you're still using knobs in 2026 😄

[mctrafik]

Thank you for updating the link! I hope someone finds it useful. However, we're still using knobs in 2026, because they are STILL a better addon than controls. In the migration guide you posted there are gems like this: where it proudly replaces 10 lines of readable code with 20 lines of obscure mumbo-jumbo and calls it progress. Ew