11 ms·

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

316 points by hassanahmad 4y ago

capableweb 4y ago
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 :)
- espadrine 4y ago
  I am impressed that it even supports pasting with "*p
- alex_smart 4y ago
  That's very Emacs of Vim.
  - tomsthumb 4y ago
    bang to run a command is from ed. thats pretty core vi
    - kranner 4y ago
      I think GP meant the self-modifiable editor part
dontchooseanick 4y ago
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) :)
frankzander 4y ago
What's the use case for that?
- codetrotter 4y ago
  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.
  - codetrotter 4y ago
    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.
    - dontchooseanick 4y ago
      +1 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 https://www.vim.org/download.php#pc
    - OkayPhysicist 4y ago
      neovim also has windows builds now, daily driver for me.
- __MatrixMan__ 4y ago
  To see if it's possible.
naillo 4y ago
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.
- brrrrrm 4y ago
  I believe the vim.wasm is pre-compiled and checked in as a "binary." The javascript written is a runtime wrapper
alberth 4y ago
Why can Vim be compiled to WASM but not VSCode?
- tcoff91 4y ago
  why would you compile vscode to wasm when it's basically already a web app? you can run vscode in a browser already.
  - alberth 4y ago
    VSCode can be laggy at times. WASM would help with that.
    - scrollaway 4y ago
      Why do you think that? WASM isn't a magical "make it faster" button.
      - alberth 4y ago
        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 https://www.adservio.fr/post/how-fast-and-efficient-is-wasm
        mkl 4y ago
        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.
        easrng 4y ago
        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.
csdvrx 4y ago
If you are into this, note there's also a JavaScript online Vim: https://wang-lu.com/vim.js/emterpreter/vim.html https://wang-lu.com/vim.js/emterpreter/vim.html
- avnigo 4y ago
  The WASM version does seem considerably more snappy to me.
b33j0r 4y ago
[flagged]
- b33j0r 4y ago
  I’m getting criticized a lot for noticing that the nature of our work has changed. I suggest that we simply converse on the topic, but I guess it sounds like BS to people. Heed my warning, you can get a model of our career to write any program you can phrase. I’m telling you, for you.
  - binarymax 4y ago
    Did you actually use the source suggested and get it running somewhere?
  - alexeldeib 4y ago
    ChatGPT is generative word salad with high accuracy. Your previous comment was somewhat doom and gloom without providing interesting content for discussion — like the conversation, output, and a running example as a peer mentioned. There wasn’t much interesting to discuss which hadn’t been said about chatgpt already. Fwiw, I think it’s a force multiplier, not a replacement. It requires skill to determine the quality of the output, can raise the bar of inexperienced developers by producing output more quickly and accurately than they could, empowers experienced developers by generating boilerplate faster than they can, and can improve learning by providing examples for specific use cases. But when it’s wrong, it has no idea. It often answers riddles with intuitive but wrong answers. It provides code that doesn’t compile. Explains answers with logic that is entirely wrong. Push it and you’ll see. It’s impressive but not apocalyptic. See another highly ranked post on the idea of “AGI hard” if you think I’m moving goalposts.
cassepipe 4y ago
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://github.com/glacambre/firenvim https://addons.mozilla.org/en-US/firefox/addon/firenvim/ https://addons.mozilla.org/en-US/firefox/addon/firenvim/
- finnh 4y ago
  Ah thank you! I've been using wasavi on Chrome but real-vim may be enough to pull me back to Firefox.
  - glacambre 4y ago
    Firenvim is also available on Chrome (although I do recommend using Firefox for browser monoculture avoidance :) ) : https://chrome.google.com/webstore/detail/firenvim/egpjdkipkomnmjhjmdamaniclmdlobbo https://chrome.google.com/webstore/detail/firenvim/egpjdkipk...
    - spurgu 4y ago
      Please give your vote here: https://connect.mozilla.org/t5/ideas/macos-allow-custom-keyboard-shortcut-for-focusing-url-bar/idi-p/10239 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. :)
- antonmosich 4y ago
  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.
feklest 4y ago
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.
pyrolistical 4y ago
Is safari still evicting indexeddb after 7 days? https://web.dev/storage-for-the-web/ 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_permission 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
- davely 4y ago
  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 https://tinybots.net/artbot [2] https://www.pcworld.com/article/1431633/meet-stable-horde-the-setihome-of-ai-art.html https://www.pcworld.com/article/1431633/meet-stable-horde-th... [3] https://stablehorde.net/ https://stablehorde.net/
rav 4y ago
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).
andirk 4y ago
Am I the only person on earth who uses plain vi?
- yakshaving_jgt 4y ago
  You don’t want any modern conveniences? Not even stuff from here[0]? [0]: https://github.com/tpope/vim-sensible/blob/master/plugin/sensible.vim https://github.com/tpope/vim-sensible/blob/master/plugin/sen...
  - andirk 4y ago
    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
    - quesera 4y ago
      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.
      - andirk 4y ago
        So you mean i've been using vim this whole time?? Why didn't anyone tell me?
        yakshaving_jgt 4y ago
        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)”.
        wruza 4y ago
        Telling you now: your /bin/sh is probably bash.
- thih9 4y ago
hpen 4y ago
Yay, it's like vim only shittier!
miket 4y ago
Much easier to exit than standard vim!
varunkmohan 4y ago
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.
DustinBrett 4y ago
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 https://dustinbrett.com/?app=Vim
mcbuilder 4y ago
Great, but how long before we get a proper emacs version in WASM.
colordrops 4y ago
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.
jay-anderson 4y ago
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.
zlatan99 4y ago
The only Vim which can be quit easily.
deafpolygon 4y ago
Interesting about the security note and WASM re: the Neovim version. (see here: https://github.com/glacambre/firenvim https://github.com/glacambre/firenvim. More specifically here: https://github.com/glacambre/firenvim/blob/master/SECURITY.md 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?
gloosx 4y ago
Real vim weirdos turn it way around and put the browser into vim!
- justusthane 4y ago
  Nah, that's emacs you're thinking of ;)
john_the_writer 4y ago
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.
rcdwealth 4y ago
[dead]
donaldbough 4y ago
Wow this is amazing! Why not charge money for it?

316 points by hassanahmad 4y ago

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 :)

espadrine 4y ago
I am impressed that it even supports pasting with "*p
alex_smart 4y ago
That's very Emacs of Vim.
- tomsthumb 4y ago
  bang to run a command is from ed. thats pretty core vi
  - kranner 4y ago
    I think GP meant the self-modifiable editor part

dontchooseanick 4y ago

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) :)

frankzander 4y ago

What's the use case for that?

codetrotter 4y ago
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.
- codetrotter 4y ago
  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.
  - dontchooseanick 4y ago
    +1 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 https://www.vim.org/download.php#pc
  - OkayPhysicist 4y ago
    neovim also has windows builds now, daily driver for me.
__MatrixMan__ 4y ago
To see if it's possible.

naillo 4y ago

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.

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

alberth 4y ago

Why can Vim be compiled to WASM but not VSCode?

tcoff91 4y ago
why would you compile vscode to wasm when it's basically already a web app? you can run vscode in a browser already.
- alberth 4y ago
  VSCode can be laggy at times. WASM would help with that.
  - scrollaway 4y ago
    Why do you think that? WASM isn't a magical "make it faster" button.
    - alberth 4y ago
      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 https://www.adservio.fr/post/how-fast-and-efficient-is-wasm
      - mkl 4y ago
        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.
      - easrng 4y ago
        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.

csdvrx 4y ago

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

avnigo 4y ago
The WASM version does seem considerably more snappy to me.

b33j0r 4y ago

[flagged]

b33j0r 4y ago
I’m getting criticized a lot for noticing that the nature of our work has changed. I suggest that we simply converse on the topic, but I guess it sounds like BS to people. Heed my warning, you can get a model of our career to write any program you can phrase. I’m telling you, for you.
- binarymax 4y ago
  Did you actually use the source suggested and get it running somewhere?
- alexeldeib 4y ago
  ChatGPT is generative word salad with high accuracy. Your previous comment was somewhat doom and gloom without providing interesting content for discussion — like the conversation, output, and a running example as a peer mentioned. There wasn’t much interesting to discuss which hadn’t been said about chatgpt already. Fwiw, I think it’s a force multiplier, not a replacement. It requires skill to determine the quality of the output, can raise the bar of inexperienced developers by producing output more quickly and accurately than they could, empowers experienced developers by generating boilerplate faster than they can, and can improve learning by providing examples for specific use cases. But when it’s wrong, it has no idea. It often answers riddles with intuitive but wrong answers. It provides code that doesn’t compile. Explains answers with logic that is entirely wrong. Push it and you’ll see. It’s impressive but not apocalyptic. See another highly ranked post on the idea of “AGI hard” if you think I’m moving goalposts.

cassepipe 4y ago

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://github.com/glacambre/firenvim https://addons.mozilla.org/en-US/firefox/addon/firenvim/ https://addons.mozilla.org/en-US/firefox/addon/firenvim/

finnh 4y ago
Ah thank you! I've been using wasavi on Chrome but real-vim may be enough to pull me back to Firefox.
- glacambre 4y ago
  Firenvim is also available on Chrome (although I do recommend using Firefox for browser monoculture avoidance :) ) : https://chrome.google.com/webstore/detail/firenvim/egpjdkipkomnmjhjmdamaniclmdlobbo https://chrome.google.com/webstore/detail/firenvim/egpjdkipk...
  - spurgu 4y ago
    Please give your vote here: https://connect.mozilla.org/t5/ideas/macos-allow-custom-keyboard-shortcut-for-focusing-url-bar/idi-p/10239 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. :)
antonmosich 4y ago
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.

feklest 4y ago

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.

pyrolistical 4y ago

Is safari still evicting indexeddb after 7 days? https://web.dev/storage-for-the-web/ 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_permission 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

davely 4y ago
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 https://tinybots.net/artbot [2] https://www.pcworld.com/article/1431633/meet-stable-horde-the-setihome-of-ai-art.html https://www.pcworld.com/article/1431633/meet-stable-horde-th... [3] https://stablehorde.net/ https://stablehorde.net/

rav 4y ago

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).

andirk 4y ago

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

yakshaving_jgt 4y ago
You don’t want any modern conveniences? Not even stuff from here[0]? [0]: https://github.com/tpope/vim-sensible/blob/master/plugin/sensible.vim https://github.com/tpope/vim-sensible/blob/master/plugin/sen...
- andirk 4y ago
  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
  - quesera 4y ago
    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.
    - andirk 4y ago
      So you mean i've been using vim this whole time?? Why didn't anyone tell me?
      - yakshaving_jgt 4y ago
        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)”.
      - wruza 4y ago
        Telling you now: your /bin/sh is probably bash.
thih9 4y ago

hpen 4y ago

Yay, it's like vim only shittier!

miket 4y ago

Much easier to exit than standard vim!

varunkmohan 4y ago

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.

DustinBrett 4y ago

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 https://dustinbrett.com/?app=Vim

mcbuilder 4y ago

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

colordrops 4y ago

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.

jay-anderson 4y ago

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.

zlatan99 4y ago

The only Vim which can be quit easily.

deafpolygon 4y ago

Interesting about the security note and WASM re: the Neovim version. (see here: https://github.com/glacambre/firenvim https://github.com/glacambre/firenvim. More specifically here: https://github.com/glacambre/firenvim/blob/master/SECURITY.md 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?

gloosx 4y ago

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

justusthane 4y ago
Nah, that's emacs you're thinking of ;)

john_the_writer 4y ago

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.

rcdwealth 4y ago

[dead]

donaldbough 4y ago

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