Skip to main content

​
Overview

The command menu is triggered by pressing / in the editor. It provides a searchable list of components and content types you can insert.

​
Triggering the command menu

Press / when:
  • The cursor is in an empty paragraph
  • The cursor is at the very beginning of a line
The menu appears at your cursor position: 
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";

function App() {
  return <WebEditor />;
}

// In the editor:
// 1. Press / in an empty line
// 2. Command menu appears
// 3. Type to search or use arrow keys to navigate
The command menu will not trigger if you’re typing inside a CodeMirror code editor (inside a code snippet component).
1

Open menu

Press / in an empty line or at the start of a line
2

Search

Type to filter commands by name or description
3

Navigate

Use Arrow Up/Down keys to select commands
4

Select

Press Enter to insert the selected command
5

Cancel

Press Escape to close the menu

​
Available commands

​
Text formatting

Description: Big section headingShortcut: Type # (hash followed by space)Usage:
# This becomes a heading 1
Description: Medium section headingShortcut: Type ## (two hashes followed by space)Usage:
## This becomes a heading 2
Description: Small section headingShortcut: Type ### (three hashes followed by space)Usage:
### This becomes a heading 3
Description: Just start writing with plain textUsage: Creates a plain paragraph (this is the default)
Description: Create a simple bulleted listShortcut: Type - (dash followed by space)Usage:
- First item
- Second item
- Third item
Description: Capture a quoteShortcut: Type > (greater than followed by space)Usage:
> This is a blockquote

​
Code components

Description: Capture a code snippet with syntax highlightingComponent: code_snippetAttributes: language, codeUsage: Insert via command menu, then click to edit code and select language
Description: Create a mermaid diagramComponent: mermaidAttributes: codeUsage:
<mermaid>
graph TD
  A[Start] --> B[Process]
  B --> C[End]
</mermaid>

​
Container components

Description: Create a horizontal or vertical cardComponent: cardAttributes: title, icon, showIcon, horizontal, hrefUsage:
  • Insert via command menu
  • Click title or icon to edit
  • Hover to toggle layout
  • Supports nested content
Description: Add a callout (info, warning, caution, etc.)Component: calloutAttributes: type (info | warning | caution | important | tip)Usage:
  • Insert via command menu
  • Click icon to change callout type
  • Type inside to add content
Description: Add a collapsible accordion sectionComponent: accordionAttributes: titleUsage:
  • Insert via command menu
  • Click title to edit
  • Type inside to add content
  • Users can expand/collapse in read-only mode
Description: Add a frame with padding and optional captionComponent: frameAttributes: captionUsage:
  • Insert via command menu
  • Click caption area to edit
  • Type inside to add framed content
Description: Create a numbered step (for tutorials)Component: stepAttributes: titleUsage:
  • Insert via command menu
  • Multiple steps auto-number sequentially
  • Click title to edit
Description: Create a responsive columns/grid layoutComponent: columnsAttributes: cols (number of columns)Usage:
  • Insert via command menu
  • Contains column child components
  • Responsive layout collapses on mobile
Description: Create a tabbed interfaceComponent: tabsAttributes: tabs (array of tab labels)Usage:
  • Insert via command menu
  • Edit tab labels in modal
  • Add content for each tab
Description: Document a parameter with name, type, and descriptionComponent: fieldAttributes: name, type, requiredUsage:
  • Insert via command menu
  • Perfect for API documentation
  • Shows type and required badge

​
Inline components

Description: Insert an icon from Lucide iconsComponent: iconAttributes: icon, sizeUsage:
  • Insert via command menu
  • Click to change icon or size
  • All Lucide icons supported
Description: Add a badge with custom text and stylingComponent: badgeAttributes: label, variant (default | secondary | destructive | outline)Usage:
  • Insert via command menu
  • Click to edit label and style
  • Inline element
Description: Add spacing between contentComponent: breakAttributes: size (small | medium | large)Usage:
  • Insert via command menu
  • Creates vertical spacing
  • Useful for visual separation

​
Command filtering

The command menu supports real-time search: 
// Type "/card" to filter:
// ✓ Card - Create a horizontal or vertical card
// ✗ Callout - (hidden, doesn't match)
// ✗ Accordion - (hidden, doesn't match)
The search matches:
  • Command name (e.g., “Card”)
  • Command description (e.g., “horizontal or vertical”)
  • Command ID (e.g., “card”)
Search is case-insensitive and matches partial strings. Type “/code” to see both “Code” and “Code Snippet”.

​
Command menu implementation

The command menu is defined in command-system.tsx and includes: 
export const commandMenuSetup: CommandItem[] = [
  { id: "h1", name: "Heading 1", icon: Heading1, description: "Big section heading", write: "# " },
  { id: "h2", name: "Heading 2", icon: Heading2, description: "Medium section heading", write: "## " },
  { id: "h3", name: "Heading 3", icon: Heading3, description: "Small section heading", write: "### " },
  { id: "paragraph", name: "Text", icon: AlignLeft, description: "Just start writing with plain text", write: "" },
  { id: "bullet", name: "Bulleted list", icon: List, description: "Create a simple bulleted list", write: "- " },
  { id: "code", name: "Code", icon: Code, description: "Capture a code snippet", componentName: "code_snippet" },
  { id: "mermaid", name: "Mermaid", icon: Network, description: "Create a mermaid diagram", componentName: "mermaid" },
  { id: "quote", name: "Quote", icon: Quote, description: "Capture a quote", write: "> " },
  { separator: true },
  // ... component commands
];
Each command is one of three types:
  1. SimpleCommand - Writes text (e.g., "# " for Heading 1)
  2. ComponentCommand - Inserts a component node (e.g., card, callout)
  3. CommandSeparator - Visual separator in the menu

​
Keyboard shortcuts

Command menu keyboard controls (index.tsx:425-485):
KeyAction
/Open command menu
Arrow DownSelect next command
Arrow UpSelect previous command
EnterInsert selected command
EscapeClose menu
TypeFilter commands
The menu automatically skips separator items when navigating with arrow keys.

​
Custom command hint

When the cursor is in an empty paragraph, a hint appears: 
Press '/' for commands and marks
This hint (index.tsx:714-729):
  • Appears only when editable={true}
  • Positions at the cursor location
  • Disappears when typing begins
  • Updates on scroll and resize
The hint helps new users discover the command menu feature.

​
Extending the command menu

To add new commands, modify command-system.tsx:60-162: 
export const commandMenuSetup: CommandItem[] = [
  // ... existing commands
  {
    id: "my-component",
    name: "My Component",
    icon: MyIcon,
    description: "Insert my custom component",
    componentName: "my_component",
  },
];
Adding custom commands requires modifying the source code and implementing the corresponding NodeView and insert function.

Build docs developers (and LLMs) love

Get started for freeTalk to us