explaingit

rhysd/vim.wasm

5,623Vim ScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

An experimental project that compiles Vim into WebAssembly so it runs fully inside a browser tab, with no server needed and most Vim features intact.

Mindmap

mindmap
  root((vim.wasm))
    What it does
      Vim in the browser
      No server needed
      WebAssembly runtime
      Canvas rendering
    Features
      Syntax highlighting
      Vim scripting
      Clipboard support
      Drag and drop files
    Embed Options
      npm package
      React component
      Jupyter integration
    Audience
      Web developers
      Vim enthusiasts
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Embed a working Vim editor inside a web page or web app using the npm package.

USE CASE 2

Give users a browser-based Vim for editing files locally without any server-side component.

USE CASE 3

Add a Vim editor widget to a React application using the React component wrapper.

USE CASE 4

Integrate Vim into a Jupyter Notebook environment for editing code cells with Vim keybindings.

Tech stack

Vim ScriptWebAssemblyJavaScriptnpmReact

Getting it running

Difficulty · moderate Time to first run · 30min

Packaged as an npm module, experimental project so some features may have rough edges.

License information is not specified in the explanation.

In plain English

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.

Copy-paste prompts

Prompt 1
How do I embed vim.wasm into my React web app so users can edit files directly in the browser? Show me the component setup.
Prompt 2
I want to use vim.wasm as a standalone demo page. How do I set it up so users can drag and drop a file onto the browser tab and edit it in Vim?
Prompt 3
How does vim.wasm handle saving files since there is no filesystem? Walk me through the write command and the export-to-download workflow.
Prompt 4
I want users to be able to paste from their system clipboard into the vim.wasm editor. How does that work?
Prompt 5
Show me how to persist a user's .vimrc configuration between browser sessions using vim.wasm's built-in storage support.
Open on GitHub → Explain another repo

← rhysd on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.