Customization#

Two ways to customize how demos look and behave: the ui plugin option (what shows, and CodeMirror config), and CSS custom properties (colors, border, and corner radius). Both apply site-wide, to every demo — there's no per-demo override.

#ui option

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

export default defineConfig({
  plugins: [
    liveDemoPluginRspress({
      ui: {
        controlPanel: { hide: false },
        fileTabs: { hide: false, hideSingleTab: false },
        editor: { tabSize: 2 },
        resizablePanels: {
          autoSaveId: "my-site-demo-layout",
          defaultPanelSizes: { editor: "50%", preview: "50%" },
        },
      },
    }),
  ],
  // ...
});

#controlPanel.hide

Hides the whole toolbar above the editor/preview: the split/editor/preview view toggle, the wrap-code button, and the fullscreen button together. There's no way to hide just one of them.

#fileTabs

• hide: always hides the file-tab bar.
• hideSingleTab: hides it only when the demo has exactly one file. With two or more files, tabs still show even if this is true.

#editor

• tabSize: number of spaces per indent level. Defaults to 2.

#resizablePanels

• defaultPanelSizes: initial split, { editor: "50%", preview: "50%" } by default. Percentage strings or pixel numbers.
• autoSaveId: when set, the user's dragged panel sizes persist to localStorage under this key and are restored on reload. When omitted, sizes reset every page load — nothing is persisted.

#Typing the config separately

LiveDemoPluginOptions, ResizablePanelsOptions, and FileTabsOptions are exported from @live-demo/rspress, so a ui object can be hoisted out of the liveDemoPluginRspress() call and still be typed:

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

const liveDemoOptions: LiveDemoPluginOptions = {
  ui: { controlPanel: { hide: false } },
};

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

#Theming

Colors come from CSS custom properties, defined for light mode on html and overridden under html.dark — the class Rspress's own theme toggle applies.

Each one resolves to an Rspress theme variable, so a demo picks up your site's theme without any configuration. The literal after the comma is Rspress's own value for that mode, used only when its theme CSS isn't loaded at all:

To restyle, set these under both html and html.dark (or a selector at least as specific) so your override stays in sync with the site's own light/dark toggle instead of freezing one mode:

html {
  --live-demo-colors-accent: #6366f1;
}

html.dark {
  --live-demo-colors-accent: #818cf8;
}

An override replaces the Rspress variable entirely for that property — the rest keep tracking the theme. --live-demo-radius is the one to reach for first if the demo box looks rounder than the surrounding page: it follows --rp-radius, which Rspress also uses for code blocks and tabs.