Skip to main content

Meta

Ladle exports meta.json with the list of all stories and some additional information. In the serve mode, it is accessible as http://localhost:61000/meta.json and build just outputs meta.json into the build folder. Example:

meta.json
{
"about": {
"homepage": "https://www.ladle.dev",
"github": "https://github.com/tajo/ladle",
"version": 1
},
"stories": {
"control--first": {
"name": "First",
"levels": ["Control"],
"locStart": 12,
"locEnd": 12,
"filePath": "src/control.stories.tsx",
"meta": {}
}
}
}

You can also add additional annotations to each story (or stories) through the meta object. It needs to be statically analyzable.

control.stories.tsx
export default {
meta: {
baseweb: "test",
browsers: ["chrome"],
},
};

export const First = () => <h1>First</h1>;
First.meta = {
browsers: ["firefox"],
};
meta.json
{
"stories": {
"control--first": {
"name": "First",
"levels": ["Control"],
"locStart": 8,
"locEnd": 8,
"filePath": "src/control.stories.tsx",
"meta": { "baseweb": "test", "browsers": ["firefox"] }
}
}
}

This is useful for further automation. For example, you can load this file in your CI and create visual snapshots for each story.

Testing

If you use Ladle for end-to-end testing with a framework as Playwright, make sure your story is fully loaded before you run the test. Stories are code-split and loaded later in the process. Ladle adds data-storyloaded attribute to the <html> tag, so you can await for it in Playwright:

await page.waitForSelector("[data-storyloaded]");