Live Demo

    Usage

    There are two ways to add an interactive demo in MDX files: inline and external.

    IMPORTANT

    A demo renders its entry file's default export, or — if there isn't one — its last named export. Named is the usual form: export const App = () => ....

    Inline demo

    For simpler cases, you can use "inline" demos: add live after the language meta string of a code block.

    ```jsx live
export const App = () => {
  /* ... */
};
```

    Which turns into an editable demo:

    Loading demo…
    WARNING

    Demos compile with the automatic JSX runtime, so JSX itself needs no React import — but nothing puts React in scope either. React.useState(...) without an import React from "react" throws "React is not defined". Import the hooks you use, as above.

    External demo

    For more complex code, you can use "external" demos. The code lives in its own file, which declutters the MDX markup and lets your IDE work on it properly.

    ```tsx file="./external/snippets/multiFile/MultiFile.tsx" live
```

    See External demos for what that renders, including multi-file ones.

    WARNING

    file= requires an explicit, supported extension (.tsx, .ts, .jsx, or .js) — file="./Button" doesn't work. This limitation comes from @rspress/core.

    Path prefixes

    file= supports four prefixes, matching @rspress/core's own file code block:

    PrefixResolves relative to
    ./the current MDX file's directory
    ../same, climbing up
    /the doc root (root in rspress.config.ts)
    <root>/the directory the dev server/build was run from

    Deprecated: <code src>

    <code src="./snippets/Component.tsx" /> still works the same way, but is deprecated in favor of file= above and will be removed in a future major version. Unlike file=, <code src> can resolve an extensionless path (<code src="./snippets/Component" />) — that's specific to this deprecated form and isn't coming to file= (see the note above).

    Imports

    react is available in every demo without being listed anywhere. So is Button from @live-demo/rspress/web — the plugin is already a dependency of any site using it. The demo above uses both.

    Beyond those, a demo can import any package your docs site depends on, inline and external alike. Below, qrcode.react renders a real, scannable QR code — edit the text and the code changes with it, which is only possible if the import actually resolved:

    Loading demo…

    Imports are resolved at build time, so a package has to be installed in your docs site's package.json and imported by some demo's source when the site builds. One edit needs a dev server restart: introducing a package no demo on the site imported before. Everything else — editing a demo, adding a brand-new one, dropping an import — is picked up by the normal recompile.

    Limitations covers what that rules out, along with the rest of what demo code can and can't do.