Search

Keyboard Shortcuts

toc

Introduction

tiptap comes with sensible keyboard shortcut defaults. Depending on what you want to use it for, you’ll probably want to change those keyboard shortcuts to your liking. Let’s have a look at what we defined for you, and show you how to change it then!

Funfact: We built a keyboard shortcut learning app, to which we manually added exercises for thousands of keyboard shortcuts for a bunch of tools.

Predefined keyboard shortcuts

Most of the core extensions register their own keyboard shortcuts. Depending on what set of extension you use, not all of the below listed keyboard shortcuts work for your editor.

Essentials

ActionWindows/LinuxmacOS
CopyControl CCmd C
CutControl XCmd X
PasteControl VCmd V
Paste without formattingControl Shift VCmd Shift V
UndoControl ZCmd Z
RedoControl Shift ZCmd Shift Z
Add a line breakShift EnterShift Enter

Text Formatting

ActionWindows/LinuxmacOS
BoldControl BCmd B
ItalicizeControl ICmd I
UnderlineControl UCmd U
StrikethroughControl Shift XCmd Shift X
HighlightControl Shift HCmd Shift H
CodeControl ECmd E

Paragraph Formatting

ActionWindows/LinuxmacOS
Apply normal text styleControl Alt 0Cmd Alt 0
Apply heading style 1Control Alt 1Cmd Alt 1
Apply heading style 2Control Alt 2Cmd Alt 2
Apply heading style 3Control Alt 3Cmd Alt 3
Apply heading style 4Control Alt 4Cmd Alt 4
Apply heading style 5Control Alt 5Cmd Alt 5
Apply heading style 6Control Alt 6Cmd Alt 6
Ordered listControl Shift 7Cmd Shift 7
Bullet listControl Shift 8Cmd Shift 8
Task listControl Shift 9Cmd Shift 9
BlockquoteControl Shift BCmd Shift B
Left alignControl Shift LCmd Shift L
Center alignControl Shift ECmd Shift E
Right alignControl Shift RCmd Shift R
JustifyControl Shift JCmd Shift J
Code blockControl Alt CCmd Alt C

Text Selection

ActionWindows/LinuxmacOS
Select allControl ACmd A
Extend selection one character to leftShift Shift 
Extend selection one character to rightShift Shift 
Extend selection one line upShift Shift 
Extend selection one line downShift Shift 
Extend selection to the beginning of the documentControl Shift Cmd Shift 
Extend selection to the end of the documentControl Shift Cmd Shift 

Overwrite keyboard shortcuts

Keyboard shortcuts may be strings like 'Shift-Control-Enter'. Keys are based on the strings that can appear in event.key, concatenated with a -. There is a little tool called keycode.info, which shows the event.key interactively.

Use lowercase letters to refer to letter keys (or uppercase letters if you want shift to be held). You may use Space as an alias for the  .

Modifiers can be given in any order. Shift, Alt, Control and Cmd are recognized. For characters that are created by holding shift, the Shift prefix is implied, and should not be added explicitly.

You can use Mod as a shorthand for Cmd on Mac and Control on other platforms.

Here is an example how you can overwrite the keyboard shortcuts for an existing extension:

// 1. Import the extension
import BulletList from '@tiptap/extension-bullet-list'

// 2. Overwrite the keyboard shortcuts
const CustomBulletList = BulletList.extend({
  addKeyboardShortcuts() {
    return {
      // ↓ your new keyboard shortcut
      'Mod-l': () => this.editor.commands.toggleBulletList(),
    }
  },
})

// 3. Add the custom extension to your editor
new Editor({
  extensions: [
    CustomBulletList(),
    // …
  ],
})