Embed a working Vim editor inside a web page or web app using the npm package.
Give users a browser-based Vim for editing files locally without any server-side component.
Add a Vim editor widget to a React application using the React component wrapper.
Integrate Vim into a Jupyter Notebook environment for editing code cells with Vim keybindings.
Packaged as an npm module, experimental project so some features may have rough edges.
vim.wasm is an experimental project that takes Vim, a well-known text editor with a long history, and compiles it so it runs directly in a web browser. Normally Vim runs as a program on your computer, but WebAssembly is a technology that lets compiled software run inside a browser tab at near-native speed. This project uses that technology to bring a functioning Vim into the browser without a server doing the editing work. The result is a Vim instance that runs entirely on your machine, inside the browser page. It supports most of Vim's features including syntax highlighting, Vim scripting, text objects, and the popup window system added in Vim 8.2. You can drag and drop files onto the browser tab to open them. Pasting from and copying to your system clipboard works through Vim's register system. Your personal configuration file can be saved in the browser's built-in storage so it persists between visits. Because the editor runs in the browser rather than on a filesystem, saving files works differently. The write command keeps the file in memory only, and a separate export command lets you download the file to your computer. The editor cannot execute system programs because browsers do not expose that capability, though running JavaScript from within Vim is supported as a workaround. The technical approach involves running Vim in a Web Worker, which is a background thread separate from the main browser tab. Keyboard input travels from the main thread to the worker through a shared memory buffer. Vim processes the input and sends drawing instructions back to the main thread, which renders them onto an HTML canvas element. This design keeps the editor logic isolated from the user interface layer. The project is packaged as an npm module so web developers can embed Vim in their own applications. Related packages provide a React component wrapper and a Jupyter Notebook integration. The project is described as experimental, so some rough edges are expected.
← rhysd on gitmyhub — every repo by this author, as a profile.
Verify against the repo before relying on details.