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:

{
  "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 some additional annotations to each story (or stories) through its meta parameter. 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"],
};

{
  "stories": {
    "control--first": {
      "name": "First",
      "levels": ["Control"],
      "locStart": 8,
      "locEnd": 8,
      "filePath": "src/control.stories.tsx",
      "meta": { "baseweb": "test", "browsers": ["firefox"] }
    }
  }
}

This is very useful for further automatization. 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 framework as Playwright, make sure that your story is fully loaded before you run the test. Stories are code-splitted and loaded later in the process. Ladle adds data-storyloaded attribute to the <html> tag so you can await it:

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

Testing​

Testing