docusaurus-plugin-copy-page-button

v0.6.1

Published

14 hours ago

Docusaurus plugin that adds a copy page button to extract documentation content as markdown for AI tools like ChatGPT, Claude, Perplexity, and Gemini

Docusaurus Copy Page Button Plugin

Live Demo

Extract Docusaurus documentation content as markdown for AI tools like ChatGPT, Claude, Perplexity, and Gemini

A lightweight Docusaurus plugin that adds a "Copy page" button to your documentation site. Perfect for developers who want to quickly extract documentation content for AI assistance, code reviews, or content analysis.

Used by

Shipping in production on documentation sites across the ecosystem:

Live on Ethereum execution-apis, Sui, Walrus, Seal, SuiNS, Monad, Flare, Kaia, Nillion, Chronicle, Cardano, and Arbitrum. Using this plugin? Open a PR to add your project.

Why Use This Plugin?

AI-Ready Content: Instantly convert documentation pages to clean markdown for ChatGPT, Claude, Perplexity, or other AI tools
Developer Productivity: Copy entire documentation pages without manual selection and cleanup
Zero Configuration: Works out of the box - just install and go
Documentation Workflow: Streamline the process of getting documentation context for AI assistance

Features

📋 Copy page as markdown - Clean page content extraction
👁️ View as markdown - Preview extracted content in new tab
🤖 AI integration - Direct "Open in ChatGPT", "Open in Claude", "Open in Perplexity", and "Open in Gemini" buttons
⚙️ Configurable actions - Show/hide specific dropdown actions (perfect for private sites)
⚡ Auto-injection - Automatically adds to the docs page (no configuration needed)
🧩 Theme integration - Import the React component directly when your site needs exact placement or no layout shift
🔌 Optional MCP actions - Add Cursor and VS Code MCP install links when your docs expose an MCP server
🎨 Theme-aware - Supports light/dark themes
🎨 Customizable styling - Easy custom CSS classes and inline styles
📱 Mobile-friendly - Responsive design
🛠️ Zero-config - Works out of the box with sensible defaults

Installation

npm install docusaurus-plugin-copy-page-button

Usage

Option 1: Auto-injection

Add the plugin to your docusaurus.config.js:

module.exports = {
  plugins: ["docusaurus-plugin-copy-page-button"],
};

The button automatically appears in the table of contents sidebar when one is visible. On mobile and no-TOC pages, it falls back to the top of the article.

Option 2: Choose placement

Use placement: "article" if your theme header, sidebar, or table of contents layout makes the sidebar placement awkward:

module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        placement: "article",
      },
    ],
  ],
};

Available values:

"auto" - sidebar on desktop when visible, article on mobile/no-TOC pages
"toc" - table of contents only
"article" - top of the article column

Option 3: Custom positioning

Use custom styles to position the button differently:

module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        customStyles: {
          button: {
            style: {
              position: "fixed",
              top: "20px",
              right: "20px",
            },
          },
        },
      },
    ],
  ],
};

Option 4: Render the React component yourself

For high-traffic docs sites that want zero client-side placement shift, disable auto-injection and render the button from a swizzled Docusaurus theme component.

// docusaurus.config.js
module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        injectButton: false,
        generateMarkdownRoutes: true,
      },
    ],
  ],
};

// src/theme/DocItem/Layout/index.tsx
import CopyPageButton from "docusaurus-plugin-copy-page-button/react";

export default function DocItemLayout(props) {
  return (
    <>
      <div style={{display: "flex", justifyContent: "flex-end"}}>
        <CopyPageButton generateMarkdownRoutes />
      </div>
      {/* render your normal Docusaurus DocItem layout here */}
    </>
  );
}

This path is best when maintainers care about first paint, exact visual placement, or avoiding any post-hydration DOM insertion.

Configuration

Enabled Actions

You can control which actions appear in the dropdown menu using the enabledActions option. This is particularly useful for private documentation sites where the AI tool links (ChatGPT/Claude/Perplexity/Gemini) won't work properly.

module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        // Only show copy and view actions (hide AI tools)
        enabledActions: ['copy', 'view'],
      },
    ],
  ],
};

Available actions:

'copy' - Copy page as Markdown
'view' - View as Markdown in new tab
'chatgpt' - Open in ChatGPT
'claude' - Open in Claude
'perplexity' - Open in Perplexity
'gemini' - Open in Gemini
'mcp-copy' - Copy MCP server JSON (shown when mcpServer is configured)
'mcp-cursor' - Install MCP server in Cursor (shown when mcpServer is configured)
'mcp-vscode' - Install MCP server in VS Code (shown when mcpServer is configured)

Default: Standard actions are enabled: ['copy', 'view', 'chatgpt', 'claude', 'perplexity', 'gemini']. MCP actions are enabled automatically only when mcpServer is configured.

Example configurations:

// Only copy functionality
enabledActions: ['copy']

// Copy and view only (no AI tools)
enabledActions: ['copy', 'view']

// All standard AI actions (default)
enabledActions: ['copy', 'view', 'chatgpt', 'claude', 'perplexity', 'gemini']

MCP server actions

If your documentation site exposes an MCP server, configure it to add MCP actions to the dropdown:

module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        mcpServer: {
          name: "my-docs",
          url: "https://docs.example.com/mcp",
        },
      },
    ],
  ],
};

The plugin can copy the MCP JSON config and generate install links for Cursor and VS Code. Cursor install links follow Cursor's MCP deeplink format, and VS Code install links use vscode:mcp/install.

Custom Styling

You can customize the appearance of the copy page button by passing a customStyles option:

module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        customStyles: {
          button: {
            className: "my-custom-button",
            style: {
              backgroundColor: "#4CAF50",
              color: "white",
              borderRadius: "8px",
            },
          },
          dropdown: {
            className: "my-custom-dropdown",
            style: {
              backgroundColor: "#f8f9fa",
              border: "2px solid #4CAF50",
            },
          },
          dropdownItem: {
            style: {
              padding: "12px 20px",
              fontSize: "16px",
            },
          },
          container: {
            className: "my-button-container",
          },
        },
      },
    ],
  ],
};

Available Style Targets

button - The main copy page button (positioning styles like position, top, left are automatically applied to the container)
dropdown - The dropdown menu that appears when clicking the button
dropdownItem - Individual items in the dropdown menu
container - The wrapper container around the button

Style Options

Each target accepts:

className - CSS class name(s) to add to the element
style - Inline styles object (React style format)

Custom styles are merged with the default styles, so you only need to specify what you want to change.

Example: Custom positioning

module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        customStyles: {
          button: {
            style: {
              position: "fixed",
              top: "100px",
              left: "100px",
              zIndex: 1000,
            },
          },
        },
      },
    ],
  ],
};

Note: Positioning styles (position, top, right, bottom, left, zIndex, transform) specified in the button configuration are automatically applied to the container element for proper positioning control.

Example: Styling without positioning

module.exports = {
  plugins: [
    [
      "docusaurus-plugin-copy-page-button",
      {
        customStyles: {
          button: {
            style: {
              backgroundColor: "transparent",
              border: "2px solid #007acc",
              color: "#007acc",
              borderRadius: "12px",
              fontWeight: "bold",
            },
          },
        },
      },
    ],
  ],
};

Markdown URL routes

Set generateMarkdownRoutes: true to emit a plain-markdown URL for each generated documentation page:

module.exports = {
  plugins: [["docusaurus-plugin-copy-page-button", { generateMarkdownRoutes: true }]],
};

For a Docusaurus page rendered at build/page/index.html, the plugin writes build/page.md, so static hosts serve it at https://your-docs.com/page.md. Users can now share https://your-docs.com/page.md directly with Claude, ChatGPT, or any tool that can fetch URLs as context. When this option is enabled, the AI tool actions also point at the .md URL.

Local Development

To test this plugin locally during development:

1. Clone and setup

git clone https://github.com/portdeveloper/docusaurus-plugin-copy-page-button.git
cd docusaurus-plugin-copy-page-button
npm install

2. Link the package

npm link

3. Use in your Docusaurus project

Navigate to your Docusaurus project and link the local plugin:

cd /path/to/your/docusaurus/project
npm link docusaurus-plugin-copy-page-button

4. Configure in docusaurus.config.js

Add the plugin to your config:

module.exports = {
  plugins: ["docusaurus-plugin-copy-page-button"],
};

5. Start development server

npm start

The locally linked plugin will now be active in your Docusaurus site. Any changes you make to the plugin source will require restarting the Docusaurus development server.

How It Works

The plugin intelligently extracts page content by:

Smart Content Selection: Automatically identifies the main documentation content area
Clean Extraction: Removes navigation, sidebars, headers, footers, and UI elements
Markdown Conversion: Converts HTML to properly formatted markdown with preserved structure
AI-Optimized Format: Includes page title, URL, and clean content perfect for AI tool input

Use Cases

AI-Assisted Development: Quickly share documentation context with ChatGPT, Claude, Perplexity, or Gemini for coding help
Code Reviews: Extract relevant documentation for code review discussions
Content Analysis: Analyze documentation structure and content for improvements
Knowledge Sharing: Easily share specific documentation sections with team members
Documentation Migration: Extract content for migrating to other documentation platforms

SEO Keywords

Docusaurus plugin, copy page button, extract documentation, markdown conversion, AI tools integration, ChatGPT documentation, Claude AI, Perplexity AI, Gemini AI, MCP, content extraction, developer tools, documentation productivity, React plugin, JavaScript documentation tools.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Support

Reach out to me for faster replies!

My telegram username is portdev, feel free to dm me whenever (and bug me if I don't reply)