diff --git a/.changeset/config.json b/.changeset/config.json
index da8e3264..58431989 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -2,7 +2,7 @@
   "$schema": "https://unpkg.com/@changesets/config@4.0.0/schema.json",
   "changelog": [
     "@changesets/changelog-github",
-    { "repo": "FormidableLabs/react-live" }
+    { "repo": "FormidableLabs/react-live", "disableThanks": true }
   ],
   "access": "public",
   "baseBranch": "master",
diff --git a/.changeset/olive-otters-listen.md b/.changeset/olive-otters-listen.md
new file mode 100644
index 00000000..2f8dc136
--- /dev/null
+++ b/.changeset/olive-otters-listen.md
@@ -0,0 +1,21 @@
+---
+"react-live": major
+---
+
+Type the `live` prop that `withLive` injects, instead of `Record<string, unknown>`.
+
+Wrapped components saw `unknown` for every key, so `live.element` could not be
+rendered and `live.error` could not be read without casting first. The prop now
+uses the same type the context is created with, which is the shape
+[the docs](https://github.com/FormidableLabs/react-live/blob/main/docs/api.md)
+have always described: `code`, `error`, `element`, `onError`, `onChange`.
+
+```tsx
+const Panel = withLive(({ live }) => {
+  const Result = live.element; // was `unknown`, now a component
+  return Result ? <Result /> : <pre>{live.error}</pre>;
+});
+```
+
+Types only, with no runtime change. It is a narrowing, so a wrapped component
+that reads a key outside that shape off `live` will now fail to compile.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 83618f04..6f072ea0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -63,24 +63,49 @@ Two things to know when writing tests:
 ## Stories
 
 Stories live in [`packages/react-live/stories`](packages/react-live/stories) as
-`*.stories.jsx`. A story is an object:
+`*.stories.tsx`. A story names a component and the props to render it with:
 
-```jsx
+```tsx
 export const title = "Live";
 
-export const Inline = {
+export const Inline = story(LiveProvider, {
   args: { code: "<strong>Hello World!</strong>" },
-  render: (args) => <Playground {...args} />,
-};
+});
 ```
 
-Add a file matching `*.stories.jsx` and it appears in the sidebar automatically. The dev
+`args` is typed as that component's props, so a renamed, missing, or mistyped prop fails
+`npm run typecheck` instead of surfacing during a manual browse. Pass `render` only when a
+scenario needs more than a single element — local state, sibling markup, a different
+composition:
+
+```tsx
+export const TabFocus = story(Editor, {
+  args: {
+    code: "// press Tab to leave",
+    language: "javascript",
+    tabMode: "focus",
+  },
+  render: (args) => (
+    <>
+      <Editor {...args} />
+      <button>Tab should reach me</button>
+    </>
+  ),
+});
+```
+
+Add a file matching `*.stories.tsx` and it appears in the sidebar automatically. The dev
 server aliases `react-live` to source, so library edits hot-reload with no build step.
-`npm run stories:test` smoke-renders every story through the same glob, so a broken story
+`npm run stories:test` smoke-renders every story through the same loader, so a broken story
 fails CI.
 
 A story that throws on purpose sets `expectsError: true`.
 
+Two modules back the harness, kept apart deliberately: `story.ts` defines a story and
+`load.ts` discovers them. Merging them makes the eager glob import the story files while
+`story()` is still initialising, which fails at import time — where no type-check would
+have caught it.
+
 ## Changesets
 
 If your change affects published behaviour, add a changeset and commit it with your PR:
diff --git a/packages/react-live/package.json b/packages/react-live/package.json
index 2ffe7bcc..0741c112 100644
--- a/packages/react-live/package.json
+++ b/packages/react-live/package.json
@@ -49,7 +49,7 @@
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.stories.json"
   },
   "dependencies": {
     "prism-react-renderer": "^2.4.1",
diff --git a/packages/react-live/src/components/Live/LiveContext.ts b/packages/react-live/src/components/Live/LiveContext.ts
index e2300231..ff9a3ce9 100644
--- a/packages/react-live/src/components/Live/LiveContext.ts
+++ b/packages/react-live/src/components/Live/LiveContext.ts
@@ -1,7 +1,7 @@
 import { themes } from "prism-react-renderer";
 import { ComponentType, createContext } from "react";
 
-type ContextValue = {
+export type LiveContextValue = {
   error?: string;
   element?: ComponentType | null;
   code: string;
@@ -13,6 +13,6 @@ type ContextValue = {
   onChange(value: string): void;
 };
 
-const LiveContext = createContext<ContextValue>({} as ContextValue);
+const LiveContext = createContext<LiveContextValue>({} as LiveContextValue);
 
 export default LiveContext;
diff --git a/packages/react-live/src/hoc/withLive.tsx b/packages/react-live/src/hoc/withLive.tsx
index 713c303f..d5044561 100644
--- a/packages/react-live/src/hoc/withLive.tsx
+++ b/packages/react-live/src/hoc/withLive.tsx
@@ -1,8 +1,12 @@
 import React, { ComponentType } from "react";
 import LiveContext from "../components/Live/LiveContext";
+import type { LiveContextValue } from "../components/Live/LiveContext";
 
+// The context already describes itself precisely; `Record<string, unknown>`
+// handed every wrapped component an `unknown` for `live.element` and
+// `live.error`, neither of which is usable without a cast.
 type Props = {
-  live: Record<string, unknown>;
+  live: LiveContextValue;
 };
 
 export default function withLive<T>(
diff --git a/packages/react-live/stories/editor.stories.jsx b/packages/react-live/stories/editor.stories.tsx
similarity index 70%
rename from packages/react-live/stories/editor.stories.jsx
rename to packages/react-live/stories/editor.stories.tsx
index 4d6288da..6eb8b13f 100644
--- a/packages/react-live/stories/editor.stories.jsx
+++ b/packages/react-live/stories/editor.stories.tsx
@@ -1,68 +1,63 @@
 import { themes } from "prism-react-renderer";
 import { Editor } from "react-live";
 
+import { story } from "./story";
+
 export const title = "Editor";
 
-export const Default = {
+export const Default = story(Editor, {
   args: { code: "const greeting = 'Hello World!';", language: "javascript" },
-  render: (args) => <Editor {...args} />,
-};
+});
 
-export const MultiLine = {
+export const MultiLine = story(Editor, {
   args: {
     code: "function add(a, b) {\n  return a + b;\n}\n\nadd(1, 2);",
     language: "javascript",
   },
-  render: (args) => <Editor {...args} />,
-};
+});
 
-export const TypeScript = {
+export const TypeScript = story(Editor, {
   args: {
     code: "const add = (a: number, b: number): number => a + b;",
     language: "typescript",
   },
-  render: (args) => <Editor {...args} />,
-};
+});
 
-export const CustomFontFamily = {
+export const CustomFontFamily = story(Editor, {
   args: {
     code: "const greeting = 'Hello World!';",
     language: "javascript",
     style: { fontFamily: "'Courier New', monospace", fontSize: 18 },
   },
-  render: (args) => <Editor {...args} />,
-};
+});
 
-export const LightTheme = {
+export const LightTheme = story(Editor, {
   args: {
     code: "const greeting = 'Hello World!';",
     language: "javascript",
     theme: themes.github,
   },
-  render: (args) => <Editor {...args} />,
-};
+});
 
-export const Disabled = {
+export const Disabled = story(Editor, {
   args: {
     code: "// read only",
     language: "javascript",
     disabled: true,
   },
-  render: (args) => <Editor {...args} />,
-};
+});
 
 /** Tab inserts two spaces. This is the default. */
-export const TabIndentation = {
+export const TabIndentation = story(Editor, {
   args: {
     code: "function indented() {\n  return true;\n}",
     language: "javascript",
     tabMode: "indentation",
   },
-  render: (args) => <Editor {...args} />,
-};
+});
 
 /** Tab moves focus out of the editor instead of indenting -- better for a11y. */
-export const TabFocus = {
+export const TabFocus = story(Editor, {
   args: {
     code: "// press Tab to leave the editor",
     language: "javascript",
@@ -74,4 +69,4 @@ export const TabFocus = {
       <button style={{ marginTop: 8 }}>Tab should reach me</button>
     </>
   ),
-};
+});
diff --git a/packages/react-live/stories/index.html b/packages/react-live/stories/index.html
index b8829b84..27a2d8d6 100644
--- a/packages/react-live/stories/index.html
+++ b/packages/react-live/stories/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./main.jsx"></script>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>
diff --git a/packages/react-live/stories/live.stories.jsx b/packages/react-live/stories/live.stories.tsx
similarity index 78%
rename from packages/react-live/stories/live.stories.jsx
rename to packages/react-live/stories/live.stories.tsx
index e813467d..baa9270a 100644
--- a/packages/react-live/stories/live.stories.jsx
+++ b/packages/react-live/stories/live.stories.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import type { ComponentProps } from "react";
 import { themes } from "prism-react-renderer";
 import {
   LiveProvider,
@@ -8,10 +9,12 @@ import {
   withLive,
 } from "react-live";
 
+import { story } from "./story";
+
 export const title = "Live";
 
 /** The standard editor + preview + error layout. */
-const Playground = (props) => (
+const Playground = (props: ComponentProps<typeof LiveProvider>) => (
   <LiveProvider {...props}>
     <LiveEditor />
     <LivePreview />
@@ -19,17 +22,15 @@ const Playground = (props) => (
   </LiveProvider>
 );
 
-export const Inline = {
+export const Inline = story(Playground, {
   args: { code: "<strong>\n  Hello World!\n    Next Indent Level\n</strong>" },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const FunctionComponent = {
+export const FunctionComponent = story(Playground, {
   args: { code: "() => (\n  <h3>\n    So functional. Much wow!\n  </h3>\n)" },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const NoInline = {
+export const NoInline = story(Playground, {
   args: {
     noInline: true,
     code: `const Counter = () => {
@@ -43,10 +44,9 @@ export const NoInline = {
 }
 render(<Counter />)`,
   },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const ClassComponent = {
+export const ClassComponent = story(Playground, {
   args: {
     code: `class Counter extends React.Component {
   constructor() {
@@ -62,10 +62,9 @@ export const ClassComponent = {
   }
 }`,
   },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const TypeScriptComponent = {
+export const TypeScriptComponent = story(Playground, {
   args: {
     noInline: true,
     code: `interface Props { name: string }
@@ -74,20 +73,18 @@ const Greeting = ({ name }: Props) => <h3>Hello {name}</h3>
 
 render(<Greeting name="TypeScript" />)`,
   },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const TypeScriptDisabled = {
+export const TypeScriptDisabled = story(Playground, {
   args: {
     enableTypeScript: false,
     noInline: true,
     code: `const greet = (name: string) => name
 render(<h3>{greet("this should error")}</h3>)`,
   },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const Hooks = {
+export const Hooks = story(Playground, {
   args: {
     code: `function LikeButton() {
   const [likes, increaseLikes] = React.useState(0)
@@ -99,58 +96,51 @@ export const Hooks = {
   )
 }`,
   },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const WithScope = {
+export const WithScope = story(Playground, {
   args: {
     code: "<h3>{greeting} from scope</h3>",
     scope: { greeting: "Hello" },
   },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const WithTheme = {
+export const WithTheme = story(Playground, {
   args: {
     code: "<strong>Hello World!</strong>",
     theme: themes.github,
   },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const SyntaxError = {
+export const SyntaxError = story(Playground, {
   args: { code: "<div>" },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const RuntimeError = {
+export const RuntimeError = story(Playground, {
   args: { code: "() => { throw new Error('boom') }" },
   // Throwing is the point of this story. The flag tells the smoke test to
   // expect the console noise React emits for a caught render error, so a
   // *genuine* error in any other story still stands out.
   expectsError: true,
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const Disabled = {
+export const Disabled = story(Playground, {
   args: { code: "<strong>You cannot edit me</strong>", disabled: true },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const TransformCode = {
+export const TransformCode = story(Playground, {
   args: {
     code: "Hello World!",
     noInline: true,
     transformCode: (code) => `render(<h3>${code}</h3>)`,
   },
-  render: (args) => <Playground {...args} />,
-};
+});
 
 /** A custom editing surface driven by the same provider. */
-export const CustomEditor = {
+export const CustomEditor = story(LiveProvider, {
   args: { code: "<h3>Edit me in the textarea</h3>" },
   render: ({ code: initial }) => {
-    const [code, setCode] = useState(initial);
+    const [code, setCode] = useState(initial ?? "");
     return (
       <LiveProvider code={code}>
         <textarea
@@ -163,7 +153,7 @@ export const CustomEditor = {
       </LiveProvider>
     );
   },
-};
+});
 
 const LiveConsumer = withLive(({ live }) => {
   const Result = live.element;
@@ -176,21 +166,21 @@ const LiveConsumer = withLive(({ live }) => {
   );
 });
 
-export const WithLiveHoc = {
+export const WithLiveHoc = story(LiveProvider, {
   args: { code: "<strong>Rendered through withLive</strong>" },
   render: (args) => (
     <LiveProvider {...args}>
       <LiveConsumer />
     </LiveProvider>
   ),
-};
+});
 
 /**
  * `LivePreview`, `LiveEditor`, and `LiveError` all forward `className` and
  * `style` to their root element. The original Storybook proved this with
  * styled-components; a plain stylesheet does the same job without the dep.
  */
-export const StyledSubcomponents = {
+export const StyledSubcomponents = story(LiveProvider, {
   args: { code: "<strong>Styled subcomponents</strong>" },
   render: (args) => (
     <>
@@ -206,18 +196,18 @@ export const StyledSubcomponents = {
       </LiveProvider>
     </>
   ),
-};
+});
 
 /**
  * A real `LiveEditor` whose `onChange` lifts code into the parent, rather than
  * replacing the editor wholesale as `CustomEditor` does.
  */
-export const ControlledEditor = {
+export const ControlledEditor = story(LiveProvider, {
   args: {
     code: "<em>Editing here updates the heading below</em>",
   },
   render: ({ code: initial }) => {
-    const [code, setCode] = useState(initial);
+    const [code, setCode] = useState(initial ?? "");
     return (
       <LiveProvider code={code}>
         <LiveEditor onChange={setCode} />
@@ -229,18 +219,17 @@ export const ControlledEditor = {
       </LiveProvider>
     );
   },
-};
+});
 
 /** The editor's syntax highlighting follows the `language` prop. */
-export const CustomLanguage = {
+export const CustomLanguage = story(Playground, {
   args: {
     language: "jsx",
     code: "<strong>Highlighted as jsx rather than the default tsx</strong>",
   },
-  render: (args) => <Playground {...args} />,
-};
+});
 
-export const WithLiveHocTypeScript = {
+export const WithLiveHocTypeScript = story(LiveProvider, {
   args: {
     noInline: true,
     code: `function LikeButton(): React.JSX.Element {
@@ -254,4 +243,4 @@ render(<LikeButton />)`,
       <LiveConsumer />
     </LiveProvider>
   ),
-};
+});
diff --git a/packages/react-live/stories/load.ts b/packages/react-live/stories/load.ts
new file mode 100644
index 00000000..34225776
--- /dev/null
+++ b/packages/react-live/stories/load.ts
@@ -0,0 +1,37 @@
+import type { StoredStory } from "./story";
+
+/**
+ * Discovery lives apart from `story()` on purpose: this module imports every
+ * `*.stories.tsx`, and those import `story()` back. In one file that is a
+ * cycle, and the eager glob then reads `story` before it is initialised --
+ * which fails at import time, where no type-check would have caught it.
+ */
+export type LoadedStory = StoredStory & {
+  id: string;
+  group: string;
+  name: string;
+};
+
+type StoryModule = { title?: string; [name: string]: unknown };
+
+const isStory = (value: unknown): value is StoredStory =>
+  typeof value === "object" &&
+  value !== null &&
+  typeof (value as StoredStory).render === "function";
+
+/**
+ * Discover every story once, for both the dev harness and the smoke test --
+ * adding a `*.stories.tsx` file puts it in the sidebar and under test together.
+ */
+export const loadStories = (): LoadedStory[] => {
+  const modules = import.meta.glob<StoryModule>("./*.stories.tsx", {
+    eager: true,
+  });
+
+  return Object.entries(modules).flatMap(([path, mod]) => {
+    const group = mod.title ?? path;
+    return Object.entries(mod).flatMap(([name, value]) =>
+      isStory(value) ? [{ ...value, id: `${group}/${name}`, group, name }] : [],
+    );
+  });
+};
diff --git a/packages/react-live/stories/main.jsx b/packages/react-live/stories/main.tsx
similarity index 83%
rename from packages/react-live/stories/main.jsx
rename to packages/react-live/stories/main.tsx
index 984841bb..08c26d31 100644
--- a/packages/react-live/stories/main.jsx
+++ b/packages/react-live/stories/main.tsx
@@ -1,42 +1,26 @@
 import { createRoot } from "react-dom/client";
 
 import { colors, globalCss } from "./theme";
+import { loadStories } from "./load";
 
 /**
  * A small stand-in for Storybook: browse component scenarios in a dev server,
  * and let the browser tests import the very same modules.
  *
- * A story is `{ args, render }`. Add a `*.stories.jsx` file and it shows up.
+ * A story is `story(Component, { args })`. Add a `*.stories.tsx` file and it
+ * shows up.
  *
  *   ?story=<id>   select a story
  *   ?only=1       render it bare, with no chrome (what the tests load)
  */
-const modules = import.meta.glob("./*.stories.jsx", { eager: true });
-
-export const stories = Object.entries(modules).flatMap(([path, mod]) =>
-  Object.entries(mod)
-    .filter(
-      ([name, value]) =>
-        name !== "title" &&
-        value &&
-        typeof value === "object" &&
-        typeof value.render === "function",
-    )
-    .map(([name, story]) => ({
-      id: `${mod.title ?? path}/${name}`,
-      group: mod.title ?? path,
-      name,
-      story,
-    })),
-);
+const stories = loadStories();
 
 const params = new URLSearchParams(window.location.search);
 const selectedId = params.get("story") ?? stories[0]?.id;
 const selected = stories.find((entry) => entry.id === selectedId);
 
 // Render through a component so stories are free to use hooks.
-const Story = () =>
-  selected ? selected.story.render(selected.story.args ?? {}) : null;
+const Story = () => selected?.render() ?? null;
 
 function Header() {
   return (
@@ -162,4 +146,7 @@ function App() {
   );
 }
 
-createRoot(document.getElementById("root")).render(<App />);
+const container = document.getElementById("root");
+if (!container) throw new Error("stories/index.html is missing #root");
+
+createRoot(container).render(<App />);
diff --git a/packages/react-live/stories/stories.browser.test.jsx b/packages/react-live/stories/stories.browser.test.tsx
similarity index 66%
rename from packages/react-live/stories/stories.browser.test.jsx
rename to packages/react-live/stories/stories.browser.test.tsx
index 64b75509..a9af5dfd 100644
--- a/packages/react-live/stories/stories.browser.test.jsx
+++ b/packages/react-live/stories/stories.browser.test.tsx
@@ -1,25 +1,15 @@
 import { act, render } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
+import { loadStories } from "./load";
+
 /**
  * Smoke test: every story must render without throwing.
  *
- * This is the same glob the dev harness uses, so adding a story to
- * `main.jsx`'s sidebar also adds it here -- one definition, two consumers.
+ * This is the same loader the dev harness uses, so adding a story to
+ * `main.tsx`'s sidebar also adds it here -- one definition, two consumers.
  */
-const modules = import.meta.glob("./*.stories.jsx", { eager: true });
-
-const stories = Object.entries(modules).flatMap(([path, mod]) =>
-  Object.entries(mod)
-    .filter(
-      ([name, value]) =>
-        name !== "title" &&
-        value &&
-        typeof value === "object" &&
-        typeof value.render === "function",
-    )
-    .map(([name, story]) => ({ id: `${mod.title ?? path}/${name}`, story })),
-);
+const stories = loadStories();
 
 /**
  * A story marked `expectsError` throws on purpose. React reports a caught
@@ -27,7 +17,7 @@ const stories = Object.entries(modules).flatMap(([path, mod]) =>
  * warning -- and none of that is a failure here. Suppression is scoped to
  * those stories so unexpected output from any other story stays visible.
  */
-const swallowErrorEvent = (event) => event.preventDefault();
+const swallowErrorEvent = (event: ErrorEvent) => event.preventDefault();
 let suppressing = false;
 
 const suppressExpectedErrors = () => {
@@ -45,18 +35,18 @@ afterEach(() => {
 });
 
 describe("stories", () => {
-  it("discovers stories through the shared glob", () => {
+  it("discovers stories through the shared loader", () => {
     expect(stories.length).toBeGreaterThan(0);
   });
 
-  it.each(stories.map((entry) => [entry.id, entry.story]))(
+  it.each(stories.map((entry) => [entry.id, entry] as const))(
     "%s renders",
     async (_id, story) => {
       if (story.expectsError) {
         suppressExpectedErrors();
       }
 
-      const Story = () => story.render(story.args ?? {});
+      const Story = () => story.render();
       const { container } = render(<Story />);
 
       // LiveProvider transpiles in an effect, so a story is not really
diff --git a/packages/react-live/stories/story.ts b/packages/react-live/stories/story.ts
new file mode 100644
index 00000000..56a9e99b
--- /dev/null
+++ b/packages/react-live/stories/story.ts
@@ -0,0 +1,41 @@
+import { createElement } from "react";
+import type { ComponentProps, ComponentType, ReactNode } from "react";
+
+/**
+ * A story is a component plus the props to render it with.
+ *
+ * `args` is typed as that component's props, which is the point of the
+ * exercise: a renamed or mistyped prop fails `npm run typecheck` rather than
+ * surfacing during a manual browse.
+ *
+ * `render` is optional, and only spelled out when a scenario needs more than a
+ * single element -- local state, sibling markup, a different composition.
+ */
+export type Story<C extends ComponentType<any>> = {
+  args?: ComponentProps<C>;
+  render?: (args: ComponentProps<C>) => ReactNode;
+  /** This story throws on purpose; the smoke test mutes the console for it. */
+  expectsError?: boolean;
+};
+
+/**
+ * A story with its props type erased. Args are baked into a zero-argument
+ * `render`, so the harness and the smoke test never have to name a props type
+ * they cannot know -- the single unchecked step stays here, at the boundary,
+ * rather than spreading into both consumers.
+ */
+export type StoredStory = {
+  render: () => ReactNode;
+  expectsError?: boolean;
+};
+
+export const story = <C extends ComponentType<any>>(
+  Component: C,
+  { args, render, expectsError }: Story<C> = {},
+): StoredStory => ({
+  expectsError,
+  render: () =>
+    render
+      ? render(args ?? ({} as ComponentProps<C>))
+      : createElement(Component, args),
+});
diff --git a/packages/react-live/stories/theme.js b/packages/react-live/stories/theme.ts
similarity index 100%
rename from packages/react-live/stories/theme.js
rename to packages/react-live/stories/theme.ts
diff --git a/packages/react-live/stories/vite-env.d.ts b/packages/react-live/stories/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/packages/react-live/stories/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/react-live/tsconfig.stories.json b/packages/react-live/tsconfig.stories.json
new file mode 100644
index 00000000..1a47c25d
--- /dev/null
+++ b/packages/react-live/tsconfig.stories.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "paths": { "react-live": ["./src/index.ts"] }
+  },
+  "include": ["stories"]
+}