Skip to main content

Docusaurus Live Plugin

Installation​

The docusaurus plugin is based on @docusaurus/theme-live-codeblock, to use this plugin , you need to install it first:

pnpm install @docusaurus/theme-live-codeblock

Configuration​

The plugin integrates with Docusaurus by using the react-live-unplugin package. Ensure the following configuration is added to your docusaurus.config.js:

import type { Config } from "@docusaurus/types";

const config: Config = {
  themeConfig: {
    liveCodeBlock: {
      playgroundPosition: "bottom",
    },
  },
  plugins: ["react-live-unplugin/docusaurus/plugin"],
};

export default config;

This configuration ensures that the live code block is rendered correctly.

Demo​

Source code: packages/docs/src/components/DemoComponent.live.tsx

Live Editor
import { useState } from "react";
import { StyledButton } from "./StyledButton";

const DemoComponent: React.FC = () => {
  const [count, setCount] = useState(0);
  return (
    <StyledButton
      onClick={() => {
        setCount((prev) => prev + 1);
      }}
    >
      <span>Count: {count}</span>
    </StyledButton>
  );
};

export default DemoComponent;
Result
Loading...