Skip to main content

​
Function Signature

function vim(options?: { status?: boolean }): Extension
Creates a CodeMirror 6 extension that enables Vim keybindings and modal editing.

​
Parameters

​
options
object
Configuration options for the Vim extension.
​
status
boolean
When true, displays a status bar showing the current Vim mode (NORMAL, INSERT, VISUAL, etc.). Defaults to false.

​
Returns

​
Extension
Extension
A CodeMirror 6 extension that includes:
  • Vim keybindings and modal editing
  • Visual block cursor styling
  • Native selection hiding in normal/visual modes
  • Optional status bar panel

​
Description

The vim() function returns a CodeMirror 6 extension that enables Vim-style modal editing with support for normal, insert, visual, and command modes. It provides a comprehensive Vim experience including:
  • All standard Vim motions and operators
  • Visual mode (character, line, and block)
  • Ex commands
  • Registers and marks
  • Search with highlighting
  • Custom block cursor rendering

​
Usage

import { basicSetup, EditorView } from 'codemirror';
import { vim } from '@replit/codemirror-vim';

let view = new EditorView({
  doc: "",
  extensions: [
    // Include vim before other keymaps
    vim(),
    basicSetup,
  ],
  parent: document.querySelector('#editor'),
});

​
Important Notes

The vim() extension should be included before other keymap extensions in your extensions array. This ensures that Vim keybindings take precedence in normal and visual modes, while allowing other keymaps to work in insert mode.
If you are not using basicSetup, make sure to include the drawSelection plugin from @codemirror/view to correctly render selections in visual mode.

​
Extension Ordering

Correct extension ordering is crucial for proper Vim functionality: 
// ✓ Correct: vim before other keymaps
const extensions = [
  vim(),
  basicSetup,
  // ... other extensions
];

// ✗ Incorrect: vim after other keymaps may cause conflicts
const extensions = [
  basicSetup,
  vim(), // May not work correctly
];

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us