How to add a slash command menu to a React editor

Type "/" at the start of a line and a command menu pops up — insert a heading, a list, a callout, whatever. It's one of those features that feels like magic until you look at how little machinery it actually needs.

What the trigger is actually doing

Under the hood it's three plain steps, no extra state library involved:

1. Watch keystrokes in the focused block for a "/" typed at the start of an empty run.
2. On match, open a floating menu positioned at the caret and collect every registered slashCommand across the block and inline registries, filtered by whatever the user types after the "/".
3. On selecting a command, call its run(store, ctx) function, which replaces the current block or inserts a new one, then closes the menu.

Registering your own command

A slash command is just a field on your block's registration — the same object every built-in block uses, nothing internal-only about it:

registry.register('quote-card', {
  component: QuoteCardBlock,
  isLeaf: true,
  toHTML(block, ctx) { /* ... */ },
  slashCommand: {
    label: 'Quote card',
    keywords: ['quote', 'testimonial'],
    run(store, ctx) {
      // replace the current empty block with a new 'quote-card' block
      store.replaceBlock(ctx.blockId, { type: 'quote-card', props: {} });
    },
  },
});

That's the entire surface area. The menu itself doesn't know or care whether "Quote card" is a built-in block or one you just registered — it reads the same slashCommand field either way.

Why this is worth getting right

A slash menu is the difference between an editor that feels like a text field and one that feels like a real writing tool — it turns "I have to know a formatting toolbar exists" into "I can just keep typing." Making it a plain registry lookup rather than a hardcoded list is what lets custom blocks feel first-class instead of bolted on.

Try it yourself in the Playground — press "/" anywhere — or read the full Custom blocks guide for the rest of the registration API.