Accessing storybook csf metadata for external tooling

[allforabit]

Summary

Hi, I'm just wondering what the recommended way is to access storybook csf metadata for use outside of storybook. The use case is to generate Playwright VRTs for all stories in a file (once we have the id we can visit the correct url and take a screenshot).

The current approach we're taking is to build the storybook and use the index.json file to pull out the relevant information. I don't see this documented anywhere so there's a risk that this would stop working in future upgrades.

Note: we have tried the new Playwright Component testing but it currently won't fully work with our setup due to issues with bundlers.

Thanks any help greatly appreciated!

Additional information

No response

Create a reproduction

No response

[smlimasu]

I am doing it the same way. I have set the id attribute on every stories meta (or story level), so I have a list of static IDs that don't change when moving files.

To make the screenshots better, I am using the id to populate the link that you'll get when you open the story without storybooks ui.

Every Story I want to test is then a fixture setup.

Instead of the index.json which I think is totally fine you could of course set the stories IDs to like an ascending number + component name or something.

With tools like crawlee you could also visit all urls in a site automatically.

[shilman]

@allforabit we consider index.json to be an API and it has a version key v that we bump any time there's a breaking change. I recently bumped it in a minor release so it's not semver. But if your script checks the version, it should be fine to use. And I don't expect any changes that would affect you in the foreseeable future.

We also have an API @storybook/csf-tools that can be used to analyze CSF in code. but i would recommend index.json unless you need more flexibility.

[allforabit]

Ok thank you very much @shilman we probably don't need to worry then and we will continue using index.json.

[shilman]

@kylegach WDYT about adding index.json to our API docs?

[Omar-Assadi-copilot]

@shilman Thanks for this! I have 2 questions:

• Is there a way to get that index.json without the need of building a static storybook? Would be great to have a way of doing so.
• You aware that custom tags added in stories are not reflected in the tags attribute within index.json of the relative story object?

[shilman]

@Omar-Assadi-copilot

Is there a way to get that index.json without the need of building a static storybook?

Not currently. You can do it yourself with @storybook/csf-tools but there's actually quite a bit of going on in storybook and it's not well-encapsulated. I can imagine splitting it out better in the future. In the meantime, you might be able to run storybook build --test to dramatically speed up the generation.

You aware that custom tags added in stories are not reflected in the tags attribute within index.json of the relative story object?

They should be included. If you're not seeing them please upgrade to Storybook 8.1+ where I did a lot of work on tags. And if you're not seeing them on 8.1+, please create an issue with a reproduction and I'd be happy to fix it.

[Omar-Assadi-copilot]

@shilman thanks a lot!

[Omar-Assadi-copilot]

we are at You are on Storybook 8.1.6 already.

[shilman]

@Omar-Assadi-copilot do you have a reproduction? I just tried it out in a sample project and it's working fine for me.

[Omar-Assadi-copilot]

:( not now. Will try again thanks!