Show HN: Vim online editor using WebAssembly, storing files using IndexedDB | Hacker News Reader

Show HN: Vim online editor using WebAssembly, storing files using IndexedDB

vimonlineeditor.com

316 pointshassanahmad65 comments

That's great ! I have been looking for such a quick online vim experience for quite some time.

A month ago I did find what I consider to be even better : make of any textarea on any page a neovim instance with the firenvim extension (thanks to which I am writing this comment in neovim in my browser!)

It's not even a vim-like experience, it's literally your configured neovim in the browser !

Somehow I haven't managed to get it to the front page (this is not my creation but I am a big fan since I have been looking for this for so long)

I even get autocompletion and all coding niceties in the little code playgrounds that are all the rage in nowadays tutorials

https://github.com/glacambre/firenvim

https://addons.mozilla.org/en-US/firefox/addon/firenvim/

Ah thank you! I've been using wasavi on Chrome but real-vim may be enough to pull me back to Firefox.

Firenvim is also available on Chrome (although I do recommend using Firefox for browser monoculture avoidance :) ) : https://chrome.google.com/webstore/detail/firenvim/egpjdkipk...

Please give your vote here: https://connect.mozilla.org/t5/ideas/macos-allow-custom-keyb...

If that simple feature gets implemented there'll be at least one more FF user in yours truly. :)

Wow I just looked into that project and it really seems to work great. I really struggled a lot when typing longer responses in my Browser when trying to input my vim commands, so hopefully that will help.

Love Firenvim. Although I think there are different usecases for a vim-in-a-website and something like firenvim (or emacs-anywhere[1], which is what I'm using nowadays, after I've crossed over to the evil side) - as you can use vim-in-a-website from another machine without any setup, like vscode.dev for vscode, for instance. Self-hosting something like this could mean you could add your dotfiles, or maybe even have the website be able to pull a .vimrc from a publicly available dotfile repository, that would be pretty neat.

[1] https://github.com/zachcurry/emacs-anywhere

That's pretty cool!

Wrote a file to test.js with the following:

    console.log(navigator)
    document.querySelector("#pastebtn").innerText = "PASTE"

And then run it with `:!test.js` and it executes it in the current browser context. Editor editing itself :)

I am impressed that it even supports pasting with "*p

That's very Emacs of Vim.

bang to run a command is from ed. thats pretty core vi

I think GP meant the self-modifiable editor part

Is safari still evicting indexeddb after 7 days? https://web.dev/storage-for-the-web/

If so, Indexeddb should only be used to store “unsaved” files for safari.

Chrome and Firefox support https://caniuse.com/mdn-api_permissions_persistent-storage_p...

But that implies if the user denies persistent storage, then indexedb should be again only used to store “unsaved” files

If I recall (need to Google it but am out and about at the moment), Safari won’t evict if you’ve installed it as their version of a progressive web app (share button -> “add to Home Screen”).

(I say “their version” because they still lack a number of things most PWAs use, like more robust service workers for background operations, notification support, etc)

A few months ago, I decided to play around with IndexedDb (for the first time) and PWAs and created a Stable Diffusion web interface that stores data in your browser. [1]

I have thousand of images stored as base64 strings in Safari on iOS since the beginning of October and it’s all still there!

Granted… this is a web app installed as an “app” on my iPhone’s Home Screen. So, IndexedDb inside Safari itself may still behave as you say.

It was recently written up in PC World [2] as part of an article about a distributed cluster of Stable Diffusion instances [3].

[1] https://tinybots.net/artbot

[2] https://www.pcworld.com/article/1431633/meet-stable-horde-th...

[3] https://stablehorde.net/

Does kinda work

Perfect :

* Using :left and V , set ts=4 sts=4 sw=4

* Recording macros with q

* Main vim combos - it's definitely vim

Fails :

* Typing { or } on a MacBook Air under Firefox - don't know which of this settings cause the bug. Reproducibly, { does not work

* Replaying a macro containing { or any error

Kudos for the compilation (emscripten ?) and Brace for impact (the incoming bugs) :)

Looks cool, if it wasn't for the SharedArrayBuffer usage I would use this one over the current one I used for my desktop environment in the browser. I have Vim on there if anyone is interested in checking out a different version.

https://dustinbrett.com/?app=Vim

That is very cool, nice to see vintage editors hosted in a modern environment.

What I'd really like to see return is an online version of EDIT.COM, and maybe also its host binary QBASIC.EXE, not just for the nostalgia but because it was a pretty decent editor for the time, it even supported editing binary files if you didn't have a hex editor to hand, though you had to use Alt+(numpad) for most characters.

Are there some opinionated keybindings configured with this? I find that typing ctrl puts it into visual mode immediately. ctrl-v doesn't work.

Also, I use ctrl-[ as escape, and it seems to catch it sometimes, otherwise inserting an actual "ctrl-[" character.

On Firefox btw.

Interesting about the security note and WASM re: the Neovim version. (see here: https://github.com/glacambre/firenvim. More specifically here: https://github.com/glacambre/firenvim/blob/master/SECURITY.m...)

Does this open up an attack surface on users using vim/neovim? This page seems to indicate that neovim (and this) do not run in a sandbox already.

Can anyone with more knowledge on this expand on that?

Really cool! Excuse me for my naivete but is there a benefit to writing normal JS but then compiling it to wasm? Does that make it faster? Was kinda expecting C or some other language when viewing through the source on github.

I believe the vim.wasm is pre-compiled and checked in as a "binary." The javascript written is a runtime wrapper

It makes me sad every time I try a Vim with a non-zero 'scrolloff' setting. Since I started using Vim I have learned to use H and L efficiently when navigating, but non-zero 'scrolloff' changes where H and L move the cursor to - and somehow non-zero 'scrolloff' is now the default in Ubuntu if a user hasn't created a vimrc file (even an empty file will do).

Note that this seems to work much better in Chrome than in Firefox - when I press Ctrl in Firefox, it activates Visual Block mode (so e.g. Ctrl-D, Ctrl-U, Ctrl-O, Ctrl-I won't work).

Much easier to exit than standard vim!

Pretty cool. There's a lot of vim nuances to implement. Everyone is going to have their subset that doesn't work quite right. In my short experimenting with it <shift> in command mode moves the caret up a line which is incorrect.

If you are into this, note there's also a JavaScript online Vim: https://wang-lu.com/vim.js/emterpreter/vim.html

The WASM version does seem considerably more snappy to me.

Wow, very smooth to use! Would be extra neat if this could support plugins as well.

We're building out a free AI code completion tool, Codeium that will support Neovim as an IDE and would love to hook into this as well.

IndexedDB can be purged at any time by the browsers. They all have different rates, but I believe Safari will dump a db if it needs space and that DB hasn't been touched for a week.

Am I the only person on earth who uses plain vi?

You don’t want any modern conveniences? Not even stuff from here[0]?

[0]: https://github.com/tpope/vim-sensible/blob/master/plugin/sen...

I'm not promoting vi just that I never felt the need to move away from it. I'm sure I'm missing tons of goodies that would make me more productive

When I run vi, I get vim (Linux, macOS, illumos).

Only FreeBSD, in my easily ssh'able world, has real Bill Joy (et al) vi.

So you mean i've been using vim this whole time?? Why didn't anyone tell me?

The editor should tell you. If you open vim without any configuration and without opening a file directly, it shows you a welcome screen saying “vim: vi (improved)”.

Telling you now: your /bin/sh is probably bash.

Sounds interesting. Could you tell more? How do you like plain vi? Why vi and not vim? What do you do on a daily basis in the editor?

Never bothered to learn the other ones. All I do is insert, find, find/replace, start/end of line, save, don't save. Only for when I'm on a server via cli. On my local, I use VSCode, PHPStorm.

If you SSH into a kindle device it ships with VI. Now that I think is very cool

Got it, thanks for the explanation.

I use vim locally, for everyday coding; it didn't occur to me that you could be using vi/vim only occasionally, I assumed vi is your main editor (:

Probably not, but I'm not sure why you would. Doesn't vi not support multi-level undo? That's kind of a dealbreaker for me.

Why can Vim be compiled to WASM but not VSCode?

why would you compile vscode to wasm when it's basically already a web app? you can run vscode in a browser already.

VSCode can be laggy at times.

WASM would help with that.

Why do you think that? WASM isn't a magical "make it faster" button.

Benchmarks indicate as such:

> Wasm is 1.95-11.71x faster than JavaScript on Firefox

> Wasm is 1.15-1.67x faster than JavaScript on Google Chrome

> Wasm is 1.02-1.38x faster than JavaScript on Safari on

https://www.adservio.fr/post/how-fast-and-efficient-is-wasm

But VS Code is already JavaScript, running it in a WASM-based JS interpreter instead of a native JS interpreter would just slow things down.

That's all a bit beside the point. VSCode is written in TypeScript, and there's no easy way to compile TypeScript to Wasm as it is designed to rely on a full JavaScript runtime.

Your benchmarks are analogous to Toyota on highway 0-60 8sec Porche on highway 0-60 3sec But Tell me how they perform with load, bumpy terrain, tyre wear. Just because something runs faster on WASM doesnt mean u have to use it, there are othet things to consider to see if its even worth it. Vscode is based on mono and is written on top of JS/TS. Why woukd you compile it to something and run it on top of WASM, rather than just running it using the native browser engine.

There's nothing here that says that the project in the article is faster than Vim, just that it runs in the browser. To answer your original question: VSCode's internals _already run_ in the browser, so compiling them to WASM for the purposes of portability is moot.

To answer the question that you implied ("why can't vscode be compiled to wasm for performance"): vscode is built at least in part on dynamic languages. There's no compiler for JavaScript (or Python, or Ruby) to WASM, you can only compile the interpreter for these languages to WASM and then run your code in the compiled interpreter. This would be slower than what exists today because it's not replacing the traditionally-slow bits with WASM, it's replacing the fast, native bits with WASM.

The reason there are no compilers for dynamic languages is the same reason you can't compile (the full, canonical) JavaScript/Python/etc. to native code: the dynamic nature of the language prevents the generation of efficient CPU instructions. You'd need to do one of a few things:

1. Rewrite the dynamic code to not use the features that do not compile well to native code. Then write a compiler to compile the efficient subset of your language to native code. This is hard and bad because why use a dynamic language in the first place? You can see examples of this in projects like AssemblyScript and LLJS (for Python, see RPython).

2. Compile everything you can to efficient native code, then make the dynamic bits use less efficient code that does work at runtime that other languages could do at compile time. This is AOT compilation, and building an AOT compiler is hard. Building an AOT compiler that works well for most code is extremely hard. Additionally, you couldn't do things like load dynamic code at runtime (e.g., plugins).

3. Write a compiler that interprets the dynamic code at runtime, and dynamically compiles that code to native code as it is able to identify bits that can be efficiently run on the CPU. This is JIT compilation, and building a JIT compiler is hard. Moreover, you can't do JIT compilation in WASM because it would require WASM to have an API for this, and that seems unlikely right now.

4. Just use a different, more efficient language.

So to answer your question, "why not compile vscode to wasm for performance improvements?" You could, but it wouldn't be faster. Or, you'd rewrite it in a different language, but then it wouldn't be vscode anymore.

Because VSCode relies on garbage collection, but WASM doesn't support garbage collection yet. Vim is written in C and manages its memory manually.

VSCode has a web app: https://vscode.dev

You can even use the VSCodeVim extension (minus neovim-powered features) inside it. You can turn on Settings sync and it will share as many extensions as it can with your Desktop setup, and also your theme and other stuff.

VSCode.dev has a really cool Theme Playground. For instance, if you were curious to see what my current "synthwave-inspired" theme that I like to use looks like (with a variety of different file types open): https://vscode.dev/theme/jaredkent.laserwave

The more interesting and generally most useful way to get to VSCode.dev is from GitHub or Azure Repos. Use the keyboard shortcut "." in a repo file listing to open that Repo on the web in VSCode.dev (or GitHub uses GitHub.dev but it is the same VS Code tech).

The only Vim which can be quit easily.

Real vim weirdos turn it way around and put the browser into vim!

Nah, that's emacs you're thinking of ;)

Great, but how long before we get a proper emacs version in WASM.

Wow this is amazing! Why not charge money for it?

Yay, it's like vim only shittier!

What's the use case for that?

From the linked page:

> Why use Vim Online Editor?

> 1. Because you love vim.

> 2. Because you don't have access to vim somehow (maybe you're on a Chromebook that doesn't allow access to the system)

> 3. Especially if you're on Windows and you still want to use vim.

> 4. Because you want a notepad of some sort in the browser, and you want to use vim bindings instead of normal notepad.

Point 3 I don’t quite understand though. Last time I was using Windows, several years ago, I was perfectly able to run gVim on it. I can only imagine that with the subsystem for Linux and other things that have been added since then, surely it has only become easier to run Vim.

Last time I was actively using Windows was in the late WinXP / early Win7 era. But I don’t see why Win 10 / 11 would make running Vim difficult.

I do agree with all of the other points though.

As a heavy vim user, I've literally been using gvim.exe every day on Windows for the past decade

https://www.vim.org/download.php#pc

neovim also has windows builds now, daily driver for me.

To see if it's possible.

Reply on news.ycombinator.com