Show HN: I built a web app for learning Vim from the browser as a 17-year-old

[amanvir_]

Hey HN!

After my own experiences with learning Vim, I wanted to skip the frustrating process of configuring a new tool before even learning how to use it. In an attempt to solve this problem, I started working on Vim Ninja, a web app that would allow developers to learn Vim through interactive lessons in the browser. It’s been a couple of months, and I’m proud to say that I’ve finally released https://VimNinja.com!

Check out a demo of the app here: https://youtu.be/reukQHKqMZE.

On the technical side of things, I used SvelteKit to build the entire app and Tailwind, which turned out to be an amazing decision. I actually really like SvelteKit’s filesystem-based router as well as Svelte’s brevity, and Tailwind actually makes styling a fun task for me. I’m using CodeMirror 6 as a base for Vim Ninja’s code editor, and I really prefer it over more feature-packed alternatives like the Monaco Editor, which is what I started out with but soon abandoned due to its worse performance when compared to alternatives like CM6 and the sheer amount of bells and whistles that I just didn’t need.

[pastorhudson]

Don’t let people dissuade you from charging. I think your site looks great. I think the exercise of setting up a payment system is worth it.

It did ask me to connect using google. I bailed there since I don’t really want to connect my google account to random things.

I’m not actually wanting to learn vim. I know it enough to do whatever I need while ssh’d into random machine. But I do want to encourage you to keep building stuff!

[poetril]

The site looks great and I always love to see some Svelte love. But the "Sign in with Google" is a deal breaker for me. Also seems strange to charge $15 for this when so many free Vim resources exist.

[oli-g]

One could argue that it seems strange to charge X for anything when free alternatives exist.

Ultimately, it is up to anyone to decide whether the "package looks pretty" and the proposed value seems worth it, or whether they want to keep on searching and/or try to build some GitHub repo.

[abhaynayar]

I wish this was available for people who are not 17 years old.

[distcs]

Do these vim tutor web apps provide any advantage over learning with the real Vim with the vimtutor command?

Do learners not worry that the web apps might not emulate Vim accurately and the inaccuracies might make you pick up bad habits at best or learn outright wrong keybindings at worst?

I mean if you are going to use Vim, you will probably run `vim` sometime. You might well run `vimtutor`. It's a simple command. It's free. It's available with Vim. The whole tutorial is less than 1000 lines long.

[nocsi]

There’s a market segment of people that do coding tutorials with their iPads at bedtime. You’re not going to sit in actual vim since really, the target audience wants micro lessons

[COil]

Looks nice but "Sign in with Google" = No way.

[HeckFeck]

Yeah as nice as this is, the overlap of console editor enthusiasts and those willing to hand yet more data to Google is going to be narrow.

[hk1337]

You can sign in but you can't sign out.

[moomoo11]

What if it was email password? Would you prefer that?

[forgotpwd16]

I don't get those interactive learn vi(m) projects. Why not simply use vimtutor?

[Dayshine]

Am I missing something with vim tutor? It's just a very short whistle-stop tour of vim right?

Nothing that actually helps you use it in any real context!

I had to use a proper training tool (vim adventures) before I got enough practice for things to click. And I had to discover a handful of plugins before it was at all usable in a work environment (acejump, code aware motions, IDE integration).

Vimtutor is like a jira tutorial. Yes, you're telling me what I can do with you, but what I need to know is how to use you.

[nohaydeprobleme]

Speaking as a person who learned the basics of Vim from vimtutor, a friendly UI can reduce friction. Newer interfaces can also teach very useful commands at the start, making navigation much easier.

I was moderately curious about Vim but didn't really need to use the tool, but eventually after many months, I got curious enough to start and complete vimtutor. The introduction to vimtutor says it should take 30 minutes, but it took me 1.5-2 hours over two days while also making notes after the exercises to better remember the lessons (in my case, my approach to vimtutor worked, as I use Vim nearly every day for personal notes to keep practicing).

However, I put off vimtutor for months because it looked like work. While completing vimtutor, the process of completion also felt like work. A more friendly UI like the submitted article can help people easily get started and increase completion rates, which makes it easier to pick up the skill.

I didn't check if the submitted article does this, but newer interactive Vim tutor projects can also teach commands that I believe are essential to reducing the friction of using Vim. For example, throughout vimtutor I spammed jjjjjj to get down and did the same with k to go up, but only later found out that Ctrl+B & Ctrl+F (go back or forward a half-screen) or Ctrl+U & Ctrl+D (go up or down a full screen) were far easier ways to scroll, or at least 4k or 4j (four lines up or four lines down). This makes Vim much more pleasant to use, and makes it far easier to navigate through a file.

Still, I agree that vimtutor is great as it's free and in the console, but is room to make the introduction more friendly. $15 seems pretty steep, though, especially as there are other free alternatives out there to make it easier to learn Vim (at the very least, video tutorials and written guides).

[replete]

This is cool, but why the google botnet only login?

[seedie]

As a long time vim user I wonder whats in it for me, so more detail on the 12 available lessons would help. And the promise "to become a 10x developer in no time." is, in my opinion, a bit over the top. I wish mastering a text editor would result in being a "10x dev" :D Only left to say, congrats for launching vimninja.com!

[tyingq]

>I’m using CodeMirror 6 as a base for Vim Ninja’s code editor

Interesting. I'd assumed you would have gone with a WASM implementation of Vim, since perhaps more advanced tutorials might need more than just vim-like keybindings. Though I suppose that wouldn't come up until much later.

[dack]

i think it was really cool that you had a working demo of the first lesson right on the main page! I did `dd` and `i hello world!` and already started to feel invested even though I am an emacs user and don't really have a desire to learn vim. I think it's because you get a quick dopamine hit from doing those lessons and also gives you a good idea of how the site might work.

I almost wish that first lesson could have just kept going for a while without having to signup or anything. Maybe after you hit like 10 or 20 lessons, or when it starts getting more involved you could then ask for them to sign up / pay.

Either way, nice work!

[johncoltrane]

And here is the traditional reminder that Vim comes with an extensive manual that is very easy to follow and pretty much guaranteed to take you further than any of those silly online tools:

    :help user-manual

[distcs]

I wouldn't call it exactly "easy to follow". If you run this, you just get a long list of lessons named usr_01.txt, usr_02.txt, ... The lessons look "clickable" but if you put the cursor on them and press enter, nothing happens. How on earth do you jump to the actual lesson? You need to type CTRL-]. Not something someone just starting out with Vim is going to know. They'll just open :h user-manual and remain stuck there!

[ericskiff]

Awesome work and looks great! I'd suggest looking at https://www.shortcutfoo.com/ (which launched on HN very similarly like 12 years ago), and the model they followed, adding different sets of shortcuts and finding a good pricing model. I was a happy customer for years, and it's clear there's a market here. I'd love one for Figma personally

[IndigoIncognito]

Do these "As a teen-year old" posts actually work?

[_ttg]

I would be more willing to "Sign in with Google" if OP provided any kind of gentle nudge or onboarding a la https://www.keybr.com/. It's too blatant and in-your-face as it is.

[tester457]

Don't let people discourage you from charging because vim-tutor is free. All programming languages have free docs, but most of us do not mind spending on a book on that same language.

[Manjuuu]

I misread as "leaving" and thought it was a bit much but understandable. /s

It looks nice but I agree with those saying that forcing a login with google is not the best approach.

[amelius]

I love Vim. The only thing that bothers me is: when I open the same file in a different terminal, I don't get the option to kill the other session cleanly.

[urthor]

vimtutor is free.

This is $15.

Really?

[lucky_cloud]

vimtutor is free because vim is free

There are tons of books and other resources for learning vim that are not free. I'm not sure why you would find that surprising.

[mrfinn]

Charge for offering a service. How dare that guy.

[green_man_lives]

Isn't this a forum founded by a venture capitalist/startup guy? I don't understand why you have an issue with someone charging money for something they made.

[gapo]

Sign in with Google" = Not happening.

[RGBCube]

The sign in with Google is unnecessary, after all, you haven't bought the product yet.

[michael_snowden]

This looks great. Nice job!

[mcluck]

Nice! Maybe this will help convert some of my friends to the dark side

[DouglasPC]

AI NLP Voice IDE - coming soon...

[conzar]

What did you use to make your demo video? I like the focus pans!

[vlugorilla]

I'd also like to know!

[ereboucas]

Good job! The first lesson was flawless

[RaiyanYahya]

Look really nice! congrats

[enono]

Good job! Love it

[js4]

Awesome work!