diff --git a/packages/website/docs/a11y.mdx b/packages/website/docs/a11y.mdx
index d7b53280..b7bc53ea 100644
--- a/packages/website/docs/a11y.mdx
+++ b/packages/website/docs/a11y.mdx
@@ -10,4 +10,17 @@ Ladle is accessible. If you want to build accessible component, the wrapping env
Ladle also includes an a11y testing through [axe-core](https://github.com/dequelabs/axe-core), so you can fix any a11y violations in your components.
+You have to enable it in your `.ladle/config.mjs`:
+
+```js
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+ addons: {
+ a11y: {
+ enabled: true,
+ },
+ },
+};
+```
+
diff --git a/packages/website/docs/addons.md b/packages/website/docs/addons.md
index ed3583c0..6fab0847 100644
--- a/packages/website/docs/addons.md
+++ b/packages/website/docs/addons.md
@@ -10,6 +10,7 @@ Ladle currently does not support third-party addons, but it might in the future.
- [Controls](./controls) (only if `args` or `argTypes` are defined)
- Dark theme
- [Links](./links)
+- [MSW](./msw) (API mocking)
- Preview mode
- Right-to-left
- [Story source code](./source)
diff --git a/packages/website/docs/config.md b/packages/website/docs/config.md
index 394a1e2b..32c7ce99 100644
--- a/packages/website/docs/config.md
+++ b/packages/website/docs/config.md
@@ -231,7 +231,7 @@ You can enable or disable all Ladle addons (the buttons in the left bottom corne
export default {
addons: {
a11y: {
- enabled: true,
+ enabled: false,
},
action: {
enabled: false,
@@ -248,6 +248,9 @@ export default {
enabled: true,
defaultState: "full",
},
+ msw: {
+ enabled: false,
+ },
rtl: {
enabled: true,
defaultState: false,
diff --git a/packages/website/docs/msw.mdx b/packages/website/docs/msw.mdx
new file mode 100644
index 00000000..a32e7cb6
--- /dev/null
+++ b/packages/website/docs/msw.mdx
@@ -0,0 +1,68 @@
+---
+id: msw
+title: MSW
+---
+
+Ladle has a build-in support for [MSW](https://mswjs.io/). It allows API mocking by intercepting requests on the network level.
+
+You just have to enable it in your `.ladle/config.mjs`:
+
+```js
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+ addons: {
+ msw: {
+ enabled: true,
+ },
+ },
+};
+```
+
+Ladle automatically sets up the MSW service worker for you - copying it over into the public folder. Ladle also re-exports MSW library so you don't have to install it yourself.
+
+## Usage
+
+```tsx
+import type { Story } from "@ladle/react";
+import { msw } from "@ladle/react";
+import { useEffect, useState } from "react";
+
+const FETCH_URL = "/api-url.json";
+
+// Set default handlers for all stories
+export default {
+ msw: [
+ msw.rest.get(FETCH_URL, (_, res, ctx) => {
+ return res(ctx.json([{ id: 1, title: "msw post default" }]));
+ }),
+ ],
+};
+
+export const Mocked: Story = () => {
+ const [posts, setPosts] = useState([]);
+ useEffect(() => {
+ try {
+ const data = await fetch(FETCH_URL);
+ const json = await data.json();
+ setPosts(json);
+ } catch (e) {
+ console.error(e);
+ }
+ }, []);
+ return (
+ <>
+
Posts
+
+ {posts.map((post: { id: number; title: string }) => (
+ - {post.title}
+ ))}
+
+ >
+ );
+};
+
+// handlers for this story only
+// Mocked.msw = [];
+```
+
+You can also use MSW to mock GraphQL requests. Check their [documentation](https://mswjs.io/docs/).
diff --git a/packages/website/sidebars.js b/packages/website/sidebars.js
index f266af93..6eddcf9d 100644
--- a/packages/website/sidebars.js
+++ b/packages/website/sidebars.js
@@ -30,6 +30,7 @@ module.exports = {
"background",
"controls",
"links",
+ "msw",
"source",
"width",
],