Live Demo

    Custom Layout

    You can customize the default layout using components exported from @live-demo/rspress/web.

    1. Define layout

    src/CustomLiveDemo/LiveDemo.tsx
    // don't forget CSS!
import "@live-demo/rspress/web/index.css";
import {
  LiveDemoControlPanel,
  LiveDemoEditor,
  LiveDemoFileTabs,
  LiveDemoPreview,
  LiveDemoProvider,
  LiveDemoResizablePanels,
  type LiveDemoStringifiedProps,
  LiveDemoWrapper,
} from "@live-demo/rspress/web";
import { useDark } from "@rspress/core/runtime";

const CustomLiveDemo = (props: LiveDemoStringifiedProps) => {
  // the core library doesn't have Rspress context,
  // so we need to let it know when to use dark or light mode
  const isDark = useDark();

  // moved file tabs to bottom
  const editor = (
    <>
      <LiveDemoEditor />
      <LiveDemoFileTabs />
    </>
  );

  // add custom styles, wrappers, elements, etc.
  const preview = (
    <>
      <LiveDemoPreview />
    </>
  );

  return (
    <LiveDemoProvider pluginProps={props} isDark={isDark}>
      <LiveDemoWrapper>
        <LiveDemoResizablePanels editor={editor} preview={preview} />
        {/* moved control panel to bottom */}
        <LiveDemoControlPanel />
      </LiveDemoWrapper>
    </LiveDemoProvider>
  );
};

// needs to be a default export!
export default CustomLiveDemo;

    2. Update config

    NOTE

    customLayout path needs to end with LiveDemo.(jsx|tsx)

    import * as path from "node:path";
// Rspress v1
import { defineConfig } from "rspress/config";
// Rspress v2
import { defineConfig } from "@rspress/core";

import { liveDemoPluginRspress } from "@live-demo/rspress";

export default defineConfig({
  plugins: [
    liveDemoPluginRspress({
      customLayout: path.join(__dirname, "src/CustomLiveDemo/LiveDemo.tsx")
    })
  ]
})