docusaurus-sidebar-editor

A Docusaurus plugin that lets you edit your sidebar visually instead of hand-editing sidebars.js.

Open /sidebar-editor in your dev server, drag items to reorder and nest them, and changes are saved back to disk automatically.

---

Features

• Drag-and-drop reordering and nesting at any depth
• Keyboard reordering (arrow keys)
• Create and rename categories
• Remove items to the Unlinked panel; drag or click them back in
• Displays doc titles or raw IDs (toggle with the title button)
• Auto-saves to sidebars.ts / sidebars.js with 600ms debounce

---

Requirements

• Docusaurus 3.x
• Node.js 18+

---

Installation

npm install docusaurus-plugin-sidebar-editor

Then add the plugin to your docusaurus.config.ts:

const config: Config = {
  plugins: [
    'docusaurus-plugin-sidebar-editor',
  ],
  // ...
};

---

Usage

Start your Docusaurus dev server as normal:

npm start

Then open http://localhost:3000/sidebar-editor in your browser.

Editor controls

Action	How
Reorder items	Drag a chip up or down
Nest under a category	Drag onto a category chip, or select and press →
Un-nest an item	Select it and press ←
Move up / down within siblings	Select and press ↑ / ↓
Create a category	Select an item, then click + Category
Rename a category	Double-click the category chip
Remove from sidebar	Click × on any chip — it moves to the Unlinked panel
Add back from Unlinked	Click + on the chip, or drag it into the tree
Toggle title display	Click the title toggle button in the toolbar

Changes are saved automatically to sidebars.ts (or sidebars.js) after a short delay. Docusaurus hot-reloads on every save.

Note: Empty categories are stripped on save (Docusaurus rejects them). If you remove the last item from a category, the category disappears on the next auto-save.

---

Repository structure

docusaurus-sidebar-editor/
  plugin/               # Plugin source
    index.js            # Node.js plugin entry point (reads/writes sidebars file)
    SidebarEditor.tsx   # Main editor UI component
    SortableItem.tsx    # Individual tree chip (doc, category, link, autogenerated)
    OrphanPane.tsx      # Unlinked panel
    treeHelpers.ts      # Tree manipulation utilities
    types.ts            # Shared TypeScript types
  test-projects/
    test-site-1/        # Minimal Docusaurus scaffold for development
    test-site-2/        # Richer content for realistic testing

---

Status

Published on npm as docusaurus-plugin-sidebar-editor. Core editing functionality is complete.