Slash Commands

Quick start

Add SlashCommand with the default command set:

import { StarterKit } from '@react-email/editor/extensions';
import { defaultSlashCommands, SlashCommand } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <SlashCommand items={defaultSlashCommands} />
    </EditorProvider>
  );
}

Type / in the editor to open the command menu. Use arrow keys to navigate and Enter to select.

Even though you can add custom commands and style them that way, the default can also be styled using
CSS variables and data-re-* selectors.

Default commands

The defaultSlashCommands array includes these built-in commands:

Command	Category	Description
`TEXT`	Text	Plain text block
`H1`	Text	Large heading
`H2`	Text	Medium heading
`H3`	Text	Small heading
`BULLET_LIST`	Text	Unordered list
`NUMBERED_LIST`	Text	Ordered list
`QUOTE`	Text	Block quote
`CODE`	Text	Code snippet
`BUTTON`	Layout	Clickable button
`DIVIDER`	Layout	Horizontal separator
`SECTION`	Layout	Content section
`TWO_COLUMNS`	Layout	Two column layout
`THREE_COLUMNS`	Layout	Three column layout
`FOUR_COLUMNS`	Layout	Four column layout

Each command is also exported individually, so you can cherry-pick:

import { BUTTON, H1, H2, TEXT } from '@react-email/editor/ui';

<SlashCommand items={[TEXT, H1, H2, BUTTON]} />

Adding custom commands

Create a SlashCommandItem and include it in the items array:

import {
  defaultSlashCommands,
  SlashCommand,
  type SlashCommandItem,
} from '@react-email/editor/ui';
import { Star } from 'lucide-react';

const GREETING: SlashCommandItem = {
  title: 'Greeting',
  description: 'Insert a greeting block',
  icon: <Star size={20} />,
  category: 'Custom',
  searchTerms: ['hello', 'greeting', 'welcome'],
  command: ({ editor, range }) => {
    editor
      .chain()
      .focus()
      .deleteRange(range)
      .insertContent({
        type: 'paragraph',
        content: [{ type: 'text', text: 'Hello! Welcome to our newsletter.' }],
      })
      .run();
  },
};

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <SlashCommand
        items={[...defaultSlashCommands, GREETING]}
      />
    </EditorProvider>
  );
}

The SlashCommandItem interface:

string

required

Display name shown in the command list.

string

required

Help text shown below the title.

ReactNode

required

Icon displayed next to the command.

string

required

Category for grouping commands in the list.

string[]

Additional terms for fuzzy search matching.

(props: { editor, range }) => void

required

Function called when the command is selected. Receives the editor instance and the range to replace.

Using individual commands

You can cherry-pick from the default commands to show only specific options:

import { BUTTON, SlashCommand } from '@react-email/editor/ui';

<SlashCommand items={[BUTTON]} />

This is useful when you want a minimal command palette. For example, only allowing button insertion.

Controlling visibility

string

default:"/"

Character that triggers the command menu.

(props: { editor }) => boolean

Function to control when the command menu can appear. Return false to prevent it.

<SlashCommand
  items={defaultSlashCommands}
  char="/"
  allow={({ editor }) => !editor.isActive('codeBlock')}
/>

Examples

See slash commands in action with a runnable example:

Default commands plus a custom Greeting command.

Overview

Features

Advanced

API Reference

Slash Commands

Quick start

Default commands

Adding custom commands

Using individual commands

Controlling visibility

Examples

Slash Commands