WebTUI – A CSS Library That Brings the Beauty of Terminal UIs to the Browser

Why does this ask for a login when I click on "motions". Sorry but insta pass for me

I am working on a pitch for an AI startup and need to create a nice looking webpage with the demo. I have very little experience with webdev and I wonder if it is a good idea to build a TUI-like interface, as I am a fan of terminal aesthetics in general. This would much relieve the burden of thinking about design and focus on the content.

I'm terminally terminal, but I'll be honest, I'm a bit confused by this. If it is trying to be what I think it is, I *really* want this. But to be a bit blunt, it also feels a bit cargo-culty. To look like the thing but not be like the thing. I'm not saying this to discourage you, because if you are trying to make a web interface that I can fully use via keybindings then please for the love of god keep developing, I want it more than anything.

But the reason it feels so off, or uncanny valley, to me is it looks like what someone thinks a vim interface is, but doesn't feel that way. No buttons work for me other than "/", but that is a pretty common binding on websites anyways. going to the examples page, things feel more weird. I can do {c,d,l,n} to change my theme and {1..5} to access options, but other than that, nothing works. I see for inbox but what does this mean? Control + i? (the usual meaning) That doesn't work. Is it command + i? That doesn't work. The annotation is reminiscent of vim and the landing page looks like vim, so am I in command mode? But then why are there no motions? Is this emacs? Oh, I do search and can go to the style-guides page and h,j,k,l motions work. Oh, l takes me to the right pane? Why is H,M,L missing?

To be fair, a lot of TUIs have these same uncanny feelings, but I want to draw your attention to this as it appears people like me are your target audience and I do want this product, so I really do want you to understand what I need and how my space works. There is a lot of method to the madness with vim. A lot of people make the mistake of trying to memorize commands instead of memorizing patterns. There's too much in vim to memorize all individual commands, but if you approach it in the way of there are motion keys and action keys then honestly, you can be highly functional in vim in an after noon! (vimtutor does communicate this btw) So the things like how the theme switching and application switching feel very non-intuitive to me. I have to learn something new but it throws me off because visually it looks like I should be doing another set of patterns. For the theme switching I would expect to do something like `:colorscheme dark` or have some action associated with this (idk, c would be find since you aren't going to be cutting text?) and then an associated motion. The application switching I would want to move like I do with buffers. gt and gT to cycle through, 1gt to go to the email (first), 5gt to all components (5th).

So I love the idea and really, I do want this thing to exist. But at the same time it feels like bizarro land to me. Many TUIs make these same mistakes and it leaves me with the same feelings. What I really want is for the wheel to not be reinvented. In a typical webpage I can surprisingly use a lot of keyboard commands and even use some motions. But what things like vim are very useful for is the movement. It is not a text writer, it is a text editor. So it is important that I be able to have fine control and be able to move through a document (page) quickly. It is important that there is this synergy of combinations of motions and commands (or some other philosophy!) that I can learn the basic rules from and then extrapolate from there. This is the thing that gives me superpowers in the terminal, and this is the exact reason I so desperately want something like this around the web. But I also understand why this is difficult and often missed. After all, most vim users I know never learn the vim meta. But I really want to speak up, not to talk you down but because I really want to see something like this succeed and I want you to understand where these "super powers" come from. It's non-obvious unless you get deep into it, but there is a connecting philosophy that allows people to know how to do something new without having ever been told. You get to a point in vim where it is speaking a language and that is the end goal. Do not design one offs and just maps to useful motions, a good interface has to be a language because the goal is to communicate with the machine.

I hope this makes sense. I really do want to see this thing become a reality. To bridge this gap between our worlds.

I dig this stuff

for more, I liked The Monospace Web: https://news.ycombinator.com/item?id=41370020

and some other good examples in the comments