Live Demo

    Get started

    @live-demo/rspress

    This plugin turns MDX code blocks and external files into interactive demos with a live code editor and preview. Try editing the code below:

    Loading demo…

    Install

    npm
    yarn
    pnpm
    bun
    deno
    npm install @live-demo/rspress -D
    TIP

    Still on Rspress v1? Install the last version that supports it instead: @live-demo/rspress@1, and import defineConfig from rspress/config rather than @rspress/core below.

    Not ready for 3.0's breaking changes yet? @live-demo/rspress@2 still works with Rspress v2.

    Register

    rspress.config.ts
    import { liveDemoPluginRspress } from "@live-demo/rspress";
import { defineConfig } from "@rspress/core";

export default defineConfig({
	plugins: [liveDemoPluginRspress()],
});

    Next: Usage for the two ways to write a demo.

    Coming from @rspress/plugin-playground

    Swapping the plugin registration is the whole migration — playground is accepted as an alias for live, so existing fences keep working unchanged.

    The two plugins can't be registered on the same site, since both would claim the same fence keyword. Upstream's defaultRenderMode option exists so @rspress/plugin-playground can coexist with other tools; this plugin is meant as a drop-in replacement instead, not a companion to it.