🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

monaco-vim

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

monaco-vim

Vim keybindings for monaco-editor

latest
npmnpm
Version
0.4.2
Version published
Maintainers
1
Created
Source

monaco-vim

Vim keybindings for monaco-editor demo

npm version

Install

Webpack/browserify

npm install monaco-vim
As global

This package will only work when bundled using webpack/browserify or using AMD. Including globally is not possible due to the use of an internal dependency of monaco-editor which is not exposed in the API. Loading 'monaco' globally is also not possible as you'll have to use its loader.js file. If you are using that, then there will be no problem. See AMD.

Usage

import { initVimMode } from 'monaco-vim';

const vimMode = initVimMode(editor, document.getElementById('my-statusbar'))

Here, editor is initialized instance of monaco editor and the 2nd argument should be the node where you would like to place/show the VIM status info.

To remove the attached VIM bindings, call

vimMode.dispose();

Handling key presses

If you would like a particular keypress to not be handled by this extension, add your onKeyDown handler before initializing monaco-vim and call preventDefault() on it. monaco-vim will ignore such events and won't do anything. This can be useful if you want to handle events like running code on CTRL/CMD+Enter which otherwise would have been eaten up by monaco-vim. (Available from v0.0.14 onwards).

AMD

If you are following the official guide and integrating the AMD version of monaco-editor, you can follow this -

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<div id="status"></div>

<script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
<script>
  require.config({
    paths: {
      'vs': 'https://unpkg.com/monaco-editor/min/vs',
      'monaco-vim': 'https://unpkg.com/monaco-vim/dist/monaco-vim',
    }
  });
  require(['vs/editor/editor.main', 'monaco-vim'], function(a, MonacoVim) {
    var editor = monaco.editor.create(document.getElementById('container'), {
      value: [
        'function x() {',
        '\tconsole.log("Hello world!");',
        '}'
      ].join('\n'),
      language: 'javascript'
    });
    var statusNode = document.getElementById('status');
    var vimMode = MonacoVim.initVimMode(editor, statusNode);

    // remove vim mode by calling
    // vimMode.dispose();
  });
</script>
</body>
</html>

See demo.js for full usage.

If you would like to customize the statusbar or provide your own implementation, see initVimMode's implementation in src/index.js.

Adding custom key bindings

Actual vim implementation can be imported as:

import { VimMode } from 'monaco-vim';

Defining ex mode command

// VimMode.Vim.defineEx(name, shorthand, callback);
VimMode.Vim.defineEx('write', 'w', function() {
  // your own implementation on what you want to do when :w is pressed
  localStorage.setItem('editorvalue', editor.getValue());
});

For advanced usage, refer codemirror. CodeMirror.Vim is available as VimMode.Vim;

This implementaion of VIM is a layer between Codemirror's VIM keybindings and monaco. There may be issues in some of the keybindings, especially those that expect extra input like the Ex commands or search/replace. If you encounter such bugs, create a new issue. PRs to resolve those are welcome too.

Keywords

monaco-editor
vim

FAQs

Package last updated on 08 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

The Changelog Podcast: Practical Steps to Stay Safe on npm

Security News

The Changelog Podcast: Practical Steps to Stay Safe on npm

Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.

By Sarah Gooding  -  Oct 31, 2025