Skip to main content
Slash commands provide a fast, keyboard-driven way to insert blocks and format content without reaching for the toolbar.

​
How to Use

Type / at the start of a line to open the slash command menu:
1

Type /

Press / at the beginning of a new line or paragraph
2

Filter Commands

Start typing to filter available commands (e.g., /head shows heading options)
3

Select Command

Use arrow keys (↑ ↓) to navigate, press Enter to insert
4

Escape to Close

Press Esc to dismiss the menu without inserting
Slash commands only work at the start of a line and are disabled inside code blocks.

​
Available Commands

​
Text & Headings

Aliases: paragraph, body, plain, normalConverts the current block to plain body text (removes heading/list formatting).
Aliases: h1, heading, titleInserts a large section heading (equivalent to # Heading in markdown).
Aliases: h2, heading, subtitleInserts a medium section heading (equivalent to ## Heading in markdown).
Aliases: h3, headingInserts a small section heading (equivalent to ### Heading in markdown).
Aliases: h4, headingInserts the smallest section heading (equivalent to #### Heading in markdown).

​
Lists

Aliases: ul, unordered, listCreates an unordered list with bullet points.
- First item
- Second item
- Third item
Aliases: ol, ordered, list, numberedCreates a numbered list.
1. First item
2. Second item
3. Third item
Aliases: todo, checklist, checkboxCreates a list with interactive checkboxes.
- [ ] Task 1
- [x] Task 2 (completed)
- [ ] Task 3

​
Blocks

Aliases: quoteCreates a block quotation for highlighting text.
> This is a quote.
> It can span multiple lines.
Aliases: code, fenced, preInserts a fenced code block for displaying code snippets.
```
function example() {
  return "Hello, world!";
}
```
Aliases: divider, separator, hr, lineInserts a horizontal divider line.
---

​
Rich Content

Aliases: picture, photo, imgOpens the image file picker to insert an image from disk. Images are automatically copied to the assets/ folder.
This command triggers the same image picker as the toolbar button.
Aliases: gridInserts a 3×3 table with a header row.
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
|          |          |          |
|          |          |          |

​
Intelligent Filtering

The slash command menu uses fuzzy matching across multiple fields:
  • Title - Matches the command name (e.g., “Heading 1”)
  • Description - Matches the description text (e.g., “Large section heading”)
  • Aliases - Matches alternative names (e.g., h1, title, heading)
Typing /h shows:
  • Heading 1, 2, 3, 4
  • Horizontal Rule (alias: hr)

​
Implementation

Slash commands are implemented as a TipTap extension using the Suggestion plugin: 
const SLASH_COMMANDS: SlashCommandItem[] = [
  {
    title: "Heading 1",
    description: "Large section heading",
    icon: <Heading1Icon />,
    aliases: ["h1", "heading", "title"],
    command: (editor) => {
      editor.chain().focus().toggleHeading({ level: 1 }).run();
    },
  },
  {
    title: "Code Block",
    description: "Fenced code block",
    icon: <CodeIcon />,
    aliases: ["code", "fenced", "pre"],
    command: (editor) => {
      editor.chain().focus().toggleCodeBlock().run();
    },
  },
  // ... more commands
];

export const SlashCommand = Extension.create({
  name: "slashCommand",

  addProseMirrorPlugins() {
    return [
      Suggestion<SlashCommandItem>({
        editor: this.editor,
        char: "/",
        pluginKey: slashCommandPluginKey,
        allowSpaces: false,
        startOfLine: true,

        allow: ({ editor }) => {
          return (
            !editor.isActive("codeBlock") && !editor.isActive("frontmatter")
          );
        },

        items: ({ query }) => {
          const q = query.toLowerCase();
          return SLASH_COMMANDS.filter(
            (item) =>
              item.title.toLowerCase().includes(q) ||
              item.description.toLowerCase().includes(q) ||
              item.aliases.some((alias) => alias.includes(q)),
          );
        },

        command: ({ editor, range, props: item }) => {
          editor.chain().focus().deleteRange(range).run();
          item.command(editor);
        },
      }),
    ];
  },
});

​
Tips

Fast Navigation

Use slash commands to format without leaving the keyboard

Aliases

Type short aliases like /h1, /ul, /hr for speed

Fuzzy Search

Partial matches work - try /quo for Blockquote

Escape Hatch

Press Esc if you accidentally trigger the menu
Combine slash commands with keyboard shortcuts for maximum efficiency.

Build docs developers (and LLMs) love

Get started for freeTalk to us