Vim Online Editor

Hey! LOTS of exciting new features are being still developed! And yes, it's OPEN SOURCED! You can check it out on Github: programmerhat/vim-online-editor

Got a feature request? I'd love to hear it! I'm on Twitter @programmerhat. I will occasionally do product decisions via polling on Twitter! You can also send an email to hello@programmerhat.com.

NOTE that this is downloading 2 MB, so give it a second for it to fully download.

To open a file, you can drag & drop file into the canvas/vim frame, and it will open. I'm working on adding a "Open From Computer" button.

Changelog

We used github.com/rhysd/vim.wasm as a starting point. However there were a lot of missing stuff. This is a changelog of stuff we added.

Rename vim.data.bmp to fs.txt, because bmp files were not getting compressed by the web server for some reason.
different starting screen
make vim's starting directory $HOME instead of `/`
Make NEW files persist between edit sessions
Make "tryit.js" persist between edit sessions
Make vimrc persist on WRITE and not on vim quit
Focus the editor properly to top of canvas instead of top of webpage when the canvas is clicked on.
Make vim canvas fill up as much of the screen as possible
One button click "Load vimrc" to configure vimrc. This was a dealbreaker for me to personally use vim online
One button click to paste into vim. Make it super easy to paste a custom vimrc in

Vim Editor Online TODO

"github.com/rhysd/vim.wasm" is a great starting point. However we plan on adding a lot more features to make this as good as the vim you're used to. This is our TODO list.

TODO: Able to open a remote repository like how vscode.dev does it
TODO: "Upload file" button
TODO: implement delete file, which should correspondingly delete file in IndexedDB
TODO: Able to directly edit the filesystem.
TODO: Implement loading of vim sessions from a persistent file.
TODO: Implement support for a plugin such as Vundle.
TODO: mouse support
TODO: vim command history (`:e ~/.vim` and uparrow should go up history)
TODO: vim account management. Be able to open source code from anywhere in the world. Use vimrc across machines/browsers
TODO: allow creation of new directories.
TODO: When user loads a file not in filesystem, then load NEW files from IndexedDB. This is VERY technically challenging. Requires a sleep in the Web Worker to make IndexedDB call look synchronous.
TODO: Make paste work in Vim's command line mode `:`
TODO: check what is the string limit on Web Worker name, which impacts how large the filesytem can be.

Is this also a "Vi Online Editor"?

Yes, this is a "Vi Online Editor", or "Vi Editor Online" if you prefer that order. This web app is a direct compilation of vim, which has all the features of normal Vi, but more. This means that all the normal actions, keyboard shortcuts, motions that you are used to in Vi will also work in this Vi Online Editor. Because this web app will easily work in any web browser that supports wasm (which is most modern web browsers), you can also easily use this as a vi editor online for practice no matter where you are, whether it be a public library, on your phone, or at school. The best part is that this online vi editor is totally free.

What is the Vim Online Editor?

This is "Vim Online", a vim editor in browser. It's a online vim editor that allows you can install your vimrc, and this app will remember your vimrc between visits to a vim editor online.

The Online Vim Editor is building off groundbreaking efforts by @rhysd and @coolwanglu to bring vim to the browser.

While those projects did a great job getting started on an online vim editor, there are still many missing pieces. The most important missing feature in my opinion is being able to install a vimrc to your vim editor online get back all the keybindings you're used to.

Another really important missing feature of a vim editor online is being able to save files easily and navigate between files easily.

Another really important feature of a vim editor online is being able to git clone a repo into the browser.

What would really be cool is being able to edit files from the filesystem, using the WASI API.

Even if direct access to the filesystem isn't possible, an autosync with the source code so that you could easily test the code would be super cool.

What is the vision for the Vim Editor Online?

I'm thinking this is going to take inspiration from these projects:

gvim
online notepad

This project is going to use vim.wasm as a starting point because that project actually supports clipboard.

Unfortunately, the vim.wasm project by rhysd appears not to have had any serious progress for several years. Not since Sep 18, 2021. I last checked Dec 16, 2022.

Who made the Vim Online Editor?

"Vim Online" was built by the lovely folks at programmerhat.com.

We happen to be huge Vim enthusiasts ourselves. Using Vim for many years. It's the best editor in the world.

And of course we're software engineers! We like building software.

What we'd LOVE to hear from you are FEATURE REQUESTS! We know there's a lot of work needed to make this as good as the Vim you're used to in the terminal. So interact with me on Twitter @programmerhat or send an email to hello@programmerhat.com

How to use Vim Online Editor?

If you've got your own vimrc, you'll probably want to install that straight away. Click on "Load vimrc", then copy your vimrc, and click "Paste" to install your vimrc. Do ":write" and reload the tab. The vimrc will be installed.

Caveat is that this app currently does not support plugins.

Then just click the vim box and you're good to go!

It's free. Doesn't cost anything. There will be some ads to help fund feature development. There are a lot of features I want to build.

Why use Vim Online Editor?

Because you love vim.
Because you don't have access to vim somehow (maybe you're on a Chromebook that doesn't allow access to the system)
Especially if you're on Windows and you still want to use vim.
Because you want a notepad of some sort in the browser, and you want to use vim bindings instead of normal notepad.

Terms