Vim.js - JavaScript port of Vim

http://coolwanglu.github.io/vim.js/web/vim.html

by sebg • 13 years ago

199 100 13 years ago

coolwanglu.github.io

xcyu• 13 years ago

This is pretty cool. Backspace not working for me though in Chrome.

bromagosa• 13 years ago

Same here, Chrome on Debian.

Backspace and ESC not working, so after I enter a mode I'm stuck in it forever.

bilalq• 13 years ago

Really cool! It even supported doing things like:

    inoremap jj <Esc>`^

Backspace ended up triggering the browser's back action though. Other than that, this is really nice.

Edit: After looking at the source, this seems to make use of emscripten to reuse Vim's existing source code. This really makes me wonder what other cool things we can bring over to the client side.

chrismorgan• 13 years ago

… There are still browsers that use backspace for navigation?

(I'm a little surprised by this because I've seen so many complaints about it leading to data loss.)

wging2• 13 years ago

Chrome and Firefox. Probably IE too.

markburns• 13 years ago

_I_ use backspace for navigation. What's the alternative? Use a mouse?

oneeyedpigeon• 13 years ago

There are still browsers that don't maintain form state across back/forward history?

(I'm a little surprised by this because I thought all browsers used backspace for back)

dlau1• 13 years ago

I tried typing some gibberish and one shortcut that seems to be a bit broken for me is yiw diw

Hmm, actually it seems all the motions I tried didn't work :-(

http://vimdoc.sourceforge.net/htmldoc/motion.html#word-motio...

waitingkuo• 13 years ago

Wow, I can use hjkl to move my cursor !!!

yepguy• 13 years ago

Kinda cool as a demo, but too many vim shortcuts are hijacked by the browser for this to be useful to me.

taf2• 13 years ago

fantastic! One issue - I keep hitting is using the backspace key in chrome is mapped to the back button... so it keeps taking me back here..

cauliturtle• 13 years ago

nice but `backspace` then I returned to > https://news.ycombinator.com/item?id=6899072

pyramation• 13 years ago

same here, cool idea though.

marveller• 13 years ago

I use Vim for everything, this is great!

couchand• 13 years ago

so... what exactly am i supposed to do with no file system?

klapinat0r• 13 years ago

Fork it and have it save in localStorage, or POST (ajax or <form>) it to your host site for saving.

One idea could be to bundle it with haste[1] or similar.

[1] https://github.com/seejohnrun/haste-server

andypants• 13 years ago

It seems to have some kind of filesystem. You can write files, there's /dev, /root, /tmp and /usr, and vimrc and color settings.

Not really sure how it all works, I only took a quick look.

saosebastiao• 13 years ago

I'm normally unimpressed by applications ported to javascript. However, this actually has me excited. I would love to be able to edit all my Dropbox text files with a web interface. If anyone here works for Dropbox, I beg you to integrate this!

suprjami• 13 years ago

http://dillinger.io/ you already can

tunnuz• 13 years ago

There is also http://stackedit.io

perimo• 13 years ago

If it's possible to integrate this with BrowserFS, you'd be all set: https://github.com/jvilk/BrowserFS/#browserfs

siddboots2• 13 years ago

Can anyone think of a sane way to make this integrate with github?

camus2• 13 years ago

Given the size of the "compiled" file, i'd say it's a bad idea . A better idea would be whatever js editor with a vim mode, not c code compiled with emscriptem like this one.

csomar• 13 years ago

Github is using the Ace editor, which has a VIM mode.

lauriswtf• 13 years ago

I found a solution for this - http://lauris.h-s.io/2013/12/13/github-vim-editor/

siddboots2• 13 years ago

Thanks! I was trying to get my head around why vim mode wasn't working. This works great.

dragonfax• 13 years ago

Its already been done as a chrome extension

https://github.com/NickTomlin/pocketvim

mseepgood• 13 years ago

"ciw" doesn't work.

tikwidd• 13 years ago

Who wants to make a javascript emacs? you could call it emscriptenmacs..

vidarh2• 13 years ago

ymacs (Fabrice Bellards Emacs "clone") is installed in jslinux.

cristiantincu• 13 years ago

Ymacs is written by Mihai Bazon. It has nothing to do with Bellard. http://www.ymacs.org/

Edit: And it’s _written_ in JS, not ported.

imslavko• 13 years ago

For Vimium users: don't forget to enter the insert mode in your browser first ;)

mqzaidi• 13 years ago

Rule 34 for software: If it exists, there IS a javascript port of it.

tlrobinson• 13 years ago

That would be Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.

http://www.codinghorror.com/blog/2007/07/the-principle-of-le...

And tlrobinson's Law (or corollary?): Any submission to Hacker News about a novel JavaScript program will contain a comment referencing Atwood's Law.

https://twitter.com/tlrobinson/status/395636386671235072

arethuza3• 13 years ago

What about emacs in Linux in JavaScript? :-)

http://bellard.org/jslinux/

Patient0• 13 years ago

PatientZero's law: Any submission to Hacker News about a novel Java script program containing a reference to Atwood's law will contain a reference to tlrobinson's law.

;-)

vezzy-fnord• 13 years ago

Even more true now that Emscripten and asm.js exist.

ra3• 13 years ago

Lots of comments seem to expect some further web integration with various services but this looks like more of a prototype/proof-of-concept using emscripten.

Cool nonetheless.

rch• 13 years ago

Why not Acme.js yet?

jimmaswell• 13 years ago

Too slow for me on FF.

FurrBall• 13 years ago

Too slow for me on Chrome.

pablovidal85• 13 years ago

Very slow (unusable) on a MacBook Air 1.4GHz 4GB RAM using Chromium 30.0.1589.0 (215899). I suppose it's the price of using an emscripten port.

gnur• 13 years ago

All the three letter motions I tried don't work. Without them this is more vi then vim. caw ci" ca( all don't work.

justinmk3• 13 years ago

It is built with the compiler flag: --with-features=tiny.

Xelom• 13 years ago

Waiting for os.js, javascript port of X operating system. And js.js, javascript port of javascript. Javascripteption anyone?

vidarh2• 13 years ago

There are already several PC emulators in JS, and there are at least two Javascript interpreters in JS:

This one is Spidermonkey compiled with Emscripten: https://github.com/jterrace/js.js/

And this one is a test-bed for new JS language features (or at least meant to be - don't know how far along it is): https://github.com/mozilla/narcissus

fhd2• 13 years ago

While this is impressive, I find it surprisingly slow compared to much more demanding applications with bigger code bases compiled via Emscripten. Any ideas why?

justinmk3• 13 years ago

Well, I don't know what you mean by slow, but it could be the use of setTimeout() every 10ms to simulate[1] Vim's synchronous busy-wait is affecting responsiveness.

Lu mentioned[2] on vim_dev that it was necessary to write a hack for this portion.

[1] https://github.com/coolwanglu/vim.js/blob/master/web/vim_lib...

[2] https://groups.google.com/forum/#!topic/vim_dev/AQTHbUHijgg

ehsanu1• 13 years ago

Yeah, I hit this same road-block when trying to port vim to JS and gave up because it didn't seem worth it after that. If only vim ran a regular event loop, it would have been such an easy port, compared to what they had to do here. When figuring out how I could overcome it, I remember reading accounts of KDE developers trying to embed vim into their widgets and failing over and over. In the end, there was a solution to "embed" vim with some special IPC the netbeans IDE developers put into vim, but you had to run vim as a separate process for that to work - which is not possible on the web as it stands today. The numerous synchronous busy-wait loops in vim killed all approaches I had considered, so kudos to these guys for figuring out a way, even if it's slow.

azakai• 13 years ago

This also does not seem to be compiled with full optimizations, standard emscripten -O2 output looks somewhat different than what is here.

kidambisrinivas• 13 years ago

Can it take in custom vim rc files?

marijn• 13 years ago

See also http://codemirror.net/demo/vim.html (though that's only the editor component, not a whole vim implementation)

dddddannyyyyy• 13 years ago

this is not vim, this is some incomplete bindings implementation.

csmuk• 13 years ago

Genuinely much more impressive than I was expecting! Well done!

lorenzfx• 13 years ago

I really hope someone will patch it into the IPython notebook (or at least enable the codemirror vim keybindings). If I can find the time to learn some javascript I'll give it a go myself.

JasonFruit• 13 years ago

I tried it, and now I'm confused and angry! Seems right to me.

dkersten• 13 years ago

Ctrl-[ and Ctrl-c don't work :'(

Still good job!

icholy• 13 years ago

Ctrl-[ seems to work for me

toblender• 13 years ago

OMG you made my day, split window and window navigation, tabbing is all there!!!

Just need we need now is syntax highlighting and color torte :P

Fantastic work!

swah• 13 years ago

Totally failed when I tried backward-delete-word.

jay-anderson• 13 years ago

It works amazingly well. However don't split windows then use ctrl-w j to switch. The browser captures ctrl-w first and closes the tab. Other ctrl-* combinations don't work probably for similar reasons.

IgorPartola3• 13 years ago

This... Plus Gmail... Man that's fantastic. I have sent an embarrassing number of emails that end with :wq.

Once you try Vim, it's really hard to go back. I also tried using mutt instead of GMail, and while it gets me 90% of the way there, the lack of graphical preview of attachments and things like filters and HelloSign make GMails web interface more useful.

yogo• 13 years ago

Yep, I constantly have to delete jj at the end of emails. The cool thing about this port is that mapping seems to work. Naturally the first thing I tried was :inoremap jj <esc>, which I don't think works in codemirror + vim plugin.

squigs25• 13 years ago

Who uses :wq when you can use :x?

abhinavg• 13 years ago

Or ZZ

tikums• 13 years ago

Who uses :x, when you can ZZ?

IgorPartola3• 13 years ago

I save very often using :w. When I want to save and exit my brain is now hard-wired to do :wq. It would probably take a year for me to train myself to use :x, which is arguably just as slow since I have to reach down with my ring finger instead of up. Not saying anyone should switch, just that it would be hard for me to do so.

finnh2• 13 years ago

There are browser plugins that let you edit <textarea> elements in your $EDITOR.

I use "It's all text!" in Firefox for this purpose and it works well; the workflow is pretty simple: focus in textarea, hotkey to switch to vim, save & close buffer to switch back to the browser. (not affiliated, just a user).

You do of course lose rich text formatting.

coryfklein• 13 years ago

Anybody know one for Chrome?

thirdtruck• 13 years ago

You just made my day, m'am and/or sir.

IgorPartola3• 13 years ago

Oh man, this even has tabs!

Bahamut• 13 years ago

Out of curiosity, any reason why the vim script isn't minified if it is so huge?

Aqueous• 13 years ago

did you port ncurses using emscripten? This could enable bringing a large portion of GNU over to the browser as a cloud-based app. Stallman's nightmare, in other words.

jihip• 13 years ago

Very cool! I know code mirror had vim mode but this. This is something way more awesome.

volaski• 13 years ago

Cool. Now go build NERDTree and Ctrl-P and come back. Then I will use it

jbeja• 13 years ago

You still use those?

0xdeadbeefbabe• 13 years ago

Hrm ctrl+w dang.

Vim.js - JavaScript port of Vim

Related Stories