10 ms·

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

321 points by IroncladDev 2y ago

ahdanggit 2y ago
The _only_ thing I don't like about this is the automatic prefixing of '#' in header tags. Everything about this is freaking awesome.
jasonjmcghee 2y ago
I'm not seeing any icons (on ios, tried a few browsers). Is the font (or svgs? Not at a computer to check how it's built) being served?
- mcint 2y ago
  Hi again. I have the same issue in my browser, and locally in nvim. NerdFonts (and the right terminal emulator) were needed, and enough, there. Playing with AstroNvim, and blocked by use of yakuake. Hoping that I can hot load something from https://www.nerdfonts.com/font-downloads https://www.nerdfonts.com/font-downloads, I'm not sure what from https://fonts.google.com/ https://fonts.google.com/ has the needed ligatures or symbols.
- kombine 2y ago
  not seeing icons on Firefox (Linux) either. I do have NerdFonts installed, but I guess that shouldn't be needed for a website.
- djaychela 2y ago
  I'm also not seeing any icons (macOS, running Firefox). Tried it in safari and just get blank rectangles instead of the rectangles with a small hexcode(?) in FF.
nonrecursive 2y ago
This looks amazing! Good job. I don't know that I'd ever use it because there's never enough time for all the things, but thanks for the few minutes of aesthetic satisfaction that brought.
Lord_Zero 2y ago
Icons not loading for me.
bbor 2y ago
Execution is incredible, and the idea is far from bad, but I must I say that it is certainly hilarious. Giving serious “we’ve figured out a way to more durably connect microservices!” energy. Ngl, I see a non-zero chance of this kind of aesthetic catching on for nerdy blogs, which tends to proliferate to the wider web eventually. If nothing else, I love some support for those of us who spend all day reading (stylized) Markdown syntax!
- williamguerra 2y ago
  I dig this stuff for more, I liked The Monospace Web: https://news.ycombinator.com/item?id=41370020 https://news.ycombinator.com/item?id=41370020 and some other good examples in the comments
runlaszlorun 2y ago
OMG that's awesome. I've been meaning to goof around with TUI CSS [1] but this looks amazing. Props to the author. Maybe it's because I cut my teeth on 80s Turbo Pascal but there's something about the TUI that I feel hits an optimum in the simplicity vs use of visual space spectrum so, so lost in a world of Vulkan etc. [1] https://github.com/vinibiavatti1/TuiCss https://github.com/vinibiavatti1/TuiCss
- pjmlp 2y ago
  It is lost because we aren't producing executable files with multiple segments, jungling near and far pointers, trying to fit everything into 640 KB, while writing directly into the video memory. Turbo Vision was great and one of the frameworks I am most found of, back in 1990.
waldrews 2y ago
Looks great. We should've stuck with BBS's and Gopher all along. Minor issue, scroll bars are showing and getting slight scrolling when using arrow keys.
matt3210 2y ago
Peak design!
deleted 2y ago
[deleted]
nickandbro 2y ago
This is the UI I would have used for my hobby project, vimgolf.ai if I knew about it sooner! Though for certain sections of the site, I might just be able to use it. Great work!
- godelski 2y ago
  Why does this ask for a login when I click on "motions". Sorry but insta pass for me
  - nickandbro 2y ago
    Because I have to spin up a neovim instance for every user on the backend, I only allow authenticated users to gate the amount of users at this time. I am going to adjust the site more to reflect that as it’s more of interactive experience rather that a vim tips site.
    - godelski 2y ago
      Seems you could give some more clarity on the site then. I thought that page was just going to tell me what motions were supported. And staring a neovim instance does not seem like that heavy but I can understand even a small load can be a lot if hit hard. But yeah, I pretty much have no idea what to expect when landing on the page.
      - nickandbro 2y ago
        Thanks for the feedback. Your right will update the site to reflect that.
deleted 2y ago
[deleted]
meta-level 2y ago
For python there is also https://github.com/Textualize/textual-web https://github.com/Textualize/textual-web, based on the rich/textual framework
- nurettin 2y ago
  > This will generate another URL, which will present you with your terminal in your browser > Don't share this with anyone you wouldn't trust This is on another level. They built a terminal sharing application that connects to their servers. One must truly like to live on the edge to try this at home.
kombine 2y ago
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.
- godelski 2y ago
  > I am a fan of terminal aesthetics in general The superpowers from the terminal do not come from aesthetics. They come from the way a language was developed (see my long comment). It is what reduces the burden of thinking and allows for the elegant and seamless movement through the space. It is not about memorizing individual keys, it is about learning a language. That's the power. I want to see more of this, but people miss what was created.
- mcintyre1994 2y ago
  Honestly I wouldn’t personally, I’d use a really good components library like https://mantine.dev/ https://mantine.dev/ (no affiliation, just a fan) and make your site look similar to your competitors. That’s what people seeing your pitch will expect IMO. Depending who you’re pitching to they might not use a terminal very often.
godelski 2y ago
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 <C-i> 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.
terminaltrove 2y ago
This looks awesome and we're fans of the TUI aesthetic at terminal trove (1) (we're biased), it's also great that WebTUI has keyboard shortcuts to go with it. Not CSS but similarly ratzilla (2) also comes to mind, that allows you to build terminal-themed web applications with Rust and WebAssembly. Check out the examples (3) they look great! (1) https://terminaltrove.com/ https://terminaltrove.com/ (2) https://github.com/orhun/ratzilla https://github.com/orhun/ratzilla (3) https://github.com/orhun/ratzilla?tab=readme-ov-file#examples https://github.com/orhun/ratzilla?tab=readme-ov-file#example...
- WD-42 2y ago
  This site is amazing!
rollcat 2y ago
I don't understand the obsession with 1980s terminals. They're even less powerful than the contemporary 8-bit home computers. It's perfectly OK to be a retro enthusiast, it's another thing to claim that this is the peak tech to power our modern CLIs, or a solid foundation for portable UIs. From the docs: Stop thinking in standard CSS units like px, em, rem, % Start thinking in Character Cells for spacing, sizing, and positioning A VT102 already has a character grid, but it needs a serial protocol to allow applications on the mainframe to talk to it. You can loop around this and use the raw mode to address individual cells. The web browser has an insanely powerful typographic and layout engine. Now we're looping back into character cells. Something went wrong here, at least once. That said, I like the aesthetic and the default color palette. It's quirky, but it has its places.
- onehair 2y ago
  I think they're just being funny, and if asked seriously they'll tell you that those words are only meant to hype up the project and not neat seriously (cells vs ems, %, px)
- pdntspa 2y ago
  And can we stop calling every stupid little hobby project "beautiful" while we're at it? The word has no meaning any more.
  - big_paps 2y ago
    I find the usage of „i love x“ for x representing something inanimate you surely do not love far more unsettling..
    - tgv 2y ago
      This is getting quite off-topic, but I do love music. At least, that's how I would describe it. I just heard a fragment of something truly beautiful, and the my emotional attachment to that music is quite real (in this case, the Largo of Bach's concerto for two violins, BWV 1043; although I know someone who dismissed it as long-winding). But words tend to get nerfed, and clickbait culture certainly doesn't help. "Slams" in a headline has been reduced to "made a somewhat negative remark about," and "genius" now means "it took more than 2 seconds of thinking." Let's not discuss what "beyond excited" has become. I too would like word meanings not to shift too fast, as it helps preserve culture, especially literature, but the forces are too strong and diffuse to oppose. So "I love this web font" now just means "Don't think, just click on this link."
imiric 2y ago
Ah, wonderful. It even mimics the empty rectangles when a font doesn't contain a glyph... This is neat, but no, stop it. TUIs are an abomination of design that poorly mimic actually beautiful UIs. They look the way they do because of inherent constraints of the terminal, not because their authors particularly wanted them to look like that. So bringing that design language to a platform that does support rich UIs is artificially limiting what can be done on the web. It will also never truly have the same design as the terminal, unless you also want to avoid having any rich multimedia, interactivity, or use any web functionality introduced after 1995. At that point, your users would be better served by a text-only or Gemini site instead. As an aside, I think TUIs are wrong in most cases. If you're building something like a text editor or process manager, sure, they have their place. Although even then I would argue that they shouldn't mimic the look and feel of GUIs, but be purpose-built for the app in question. But most terminal programs shouldn't use TUIs. They should accept command-line arguments to modify their behavior, run and do what the user asked, and then exit. This is how you make programs adaptable, composable, and scriptable. They can still be made interactive at runtime via a different e.g. "client" program, but forcing the user to manually interact with an interface that mimics GUIs is an awful experience.
- varun_ch 2y ago
  I think you’re reading too much into it! This seems like a cute design library for eg. a personal blog or a portfolio website. I really doubt the author thinks this is the best design style, it’s just got an aesthetic that it sticks with, which is fun.
  - imiric 2y ago
    Haha I suppose you're right. I do get a kick out of similar CSS frameworks that mimic the look of Windows and other OSs. I was just triggered by "beauty of TUIs", but beauty is in the eye of the beholder... :)
- rvz 2y ago
  Hmm, Not really convinced. I like TUIs and also the aesthetic of them. Much faster to use on a keyboard than point clicking all over the place with a mouse on the screen or typing the long commands and flags and forgetting a single flag and having to typing it once again.
ximm 2y ago
Nice use of the ch and lh units!
n3storm 2y ago
Somebody went too far after watching The Brutalist
lionkor 2y ago
On Firefox mobile the search field is one "cell" too large to the right and doesn't fit... I think I'm good. It seems petty, maybe, but the creator can't get their homepage right with it, I'm not sure I trust it. If someone built a full C compiler but it throws errors when compiling itself, would you use it?!
- wsintra2022 2y ago
  Second this, I opened the link and saw it was jank in my mobile browser. Why would someone not check that before showing the world? Anyway I am a fan of terminal and definitely on the bandwagon that a lot of the comments allude too. My reason; keeps fingers on the keyboard.
catapart 2y ago
Oh, sweet! I really like the faithfulness to the original subject, while still being useful with a mouse. I was actually going to write a theme for a project I'm working on that is meant to be styled like an inventory terminal from an auto parts store circa 1995, which was all some kind of TUI, so your theme is a great inspiration!
adhamsalama 2y ago
This will make it easy for people to write terminal emulators using web technologies that look a lot like actual terminal emulators (like Hyper). So we have gone full circle like twice?
jiehong 2y ago
That's nice! ## Shameless plug I explored a bit what older tech such as IBM's TN5250 terminals could bring to the Web [0] 2 years ago. In particular for data input scenarios. It's designed for Desktops, not mobile. [0]: https://jiehong.gitlab.io/web_tn5250 https://jiehong.gitlab.io/web_tn5250
magicink81 2y ago
I came here just to post a few words of encouragement. I think this is fun project. Thanks for making it!
jadbox 2y ago
Examples don't fit on mobile screens :(
zfolwick 2y ago
[dead]
AlienRobot 2y ago
This looks great but the scrollbars are unstyled.

321 points by IroncladDev 2y ago

The _only_ thing I don't like about this is the automatic prefixing of '#' in header tags. Everything about this is freaking awesome.

jasonjmcghee 2y ago

I'm not seeing any icons (on ios, tried a few browsers). Is the font (or svgs? Not at a computer to check how it's built) being served?

mcint 2y ago
Hi again. I have the same issue in my browser, and locally in nvim. NerdFonts (and the right terminal emulator) were needed, and enough, there. Playing with AstroNvim, and blocked by use of yakuake. Hoping that I can hot load something from https://www.nerdfonts.com/font-downloads https://www.nerdfonts.com/font-downloads, I'm not sure what from https://fonts.google.com/ https://fonts.google.com/ has the needed ligatures or symbols.
kombine 2y ago
not seeing icons on Firefox (Linux) either. I do have NerdFonts installed, but I guess that shouldn't be needed for a website.
djaychela 2y ago
I'm also not seeing any icons (macOS, running Firefox). Tried it in safari and just get blank rectangles instead of the rectangles with a small hexcode(?) in FF.

nonrecursive 2y ago

This looks amazing! Good job. I don't know that I'd ever use it because there's never enough time for all the things, but thanks for the few minutes of aesthetic satisfaction that brought.

Lord_Zero 2y ago

Icons not loading for me.

bbor 2y ago

Execution is incredible, and the idea is far from bad, but I must I say that it is certainly hilarious. Giving serious “we’ve figured out a way to more durably connect microservices!” energy. Ngl, I see a non-zero chance of this kind of aesthetic catching on for nerdy blogs, which tends to proliferate to the wider web eventually. If nothing else, I love some support for those of us who spend all day reading (stylized) Markdown syntax!

williamguerra 2y ago
I dig this stuff for more, I liked The Monospace Web: https://news.ycombinator.com/item?id=41370020 https://news.ycombinator.com/item?id=41370020 and some other good examples in the comments

runlaszlorun 2y ago

OMG that's awesome. I've been meaning to goof around with TUI CSS [1] but this looks amazing. Props to the author. Maybe it's because I cut my teeth on 80s Turbo Pascal but there's something about the TUI that I feel hits an optimum in the simplicity vs use of visual space spectrum so, so lost in a world of Vulkan etc. [1] https://github.com/vinibiavatti1/TuiCss https://github.com/vinibiavatti1/TuiCss

pjmlp 2y ago
It is lost because we aren't producing executable files with multiple segments, jungling near and far pointers, trying to fit everything into 640 KB, while writing directly into the video memory. Turbo Vision was great and one of the frameworks I am most found of, back in 1990.

waldrews 2y ago

Looks great. We should've stuck with BBS's and Gopher all along. Minor issue, scroll bars are showing and getting slight scrolling when using arrow keys.

matt3210 2y ago

Peak design!

deleted 2y ago

[deleted]

nickandbro 2y ago

This is the UI I would have used for my hobby project, vimgolf.ai if I knew about it sooner! Though for certain sections of the site, I might just be able to use it. Great work!

godelski 2y ago
Why does this ask for a login when I click on "motions". Sorry but insta pass for me
- nickandbro 2y ago
  Because I have to spin up a neovim instance for every user on the backend, I only allow authenticated users to gate the amount of users at this time. I am going to adjust the site more to reflect that as it’s more of interactive experience rather that a vim tips site.
  - godelski 2y ago
    Seems you could give some more clarity on the site then. I thought that page was just going to tell me what motions were supported. And staring a neovim instance does not seem like that heavy but I can understand even a small load can be a lot if hit hard. But yeah, I pretty much have no idea what to expect when landing on the page.
    - nickandbro 2y ago
      Thanks for the feedback. Your right will update the site to reflect that.

deleted 2y ago

[deleted]

meta-level 2y ago

For python there is also https://github.com/Textualize/textual-web https://github.com/Textualize/textual-web, based on the rich/textual framework

nurettin 2y ago
> This will generate another URL, which will present you with your terminal in your browser > Don't share this with anyone you wouldn't trust This is on another level. They built a terminal sharing application that connects to their servers. One must truly like to live on the edge to try this at home.

kombine 2y ago

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.

godelski 2y ago
> I am a fan of terminal aesthetics in general The superpowers from the terminal do not come from aesthetics. They come from the way a language was developed (see my long comment). It is what reduces the burden of thinking and allows for the elegant and seamless movement through the space. It is not about memorizing individual keys, it is about learning a language. That's the power. I want to see more of this, but people miss what was created.
mcintyre1994 2y ago
Honestly I wouldn’t personally, I’d use a really good components library like https://mantine.dev/ https://mantine.dev/ (no affiliation, just a fan) and make your site look similar to your competitors. That’s what people seeing your pitch will expect IMO. Depending who you’re pitching to they might not use a terminal very often.

godelski 2y ago

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 <C-i> 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.

terminaltrove 2y ago

This looks awesome and we're fans of the TUI aesthetic at terminal trove (1) (we're biased), it's also great that WebTUI has keyboard shortcuts to go with it. Not CSS but similarly ratzilla (2) also comes to mind, that allows you to build terminal-themed web applications with Rust and WebAssembly. Check out the examples (3) they look great! (1) https://terminaltrove.com/ https://terminaltrove.com/ (2) https://github.com/orhun/ratzilla https://github.com/orhun/ratzilla (3) https://github.com/orhun/ratzilla?tab=readme-ov-file#examples https://github.com/orhun/ratzilla?tab=readme-ov-file#example...

WD-42 2y ago
This site is amazing!

rollcat 2y ago

I don't understand the obsession with 1980s terminals. They're even less powerful than the contemporary 8-bit home computers. It's perfectly OK to be a retro enthusiast, it's another thing to claim that this is the peak tech to power our modern CLIs, or a solid foundation for portable UIs. From the docs: Stop thinking in standard CSS units like px, em, rem, % Start thinking in Character Cells for spacing, sizing, and positioning A VT102 already has a character grid, but it needs a serial protocol to allow applications on the mainframe to talk to it. You can loop around this and use the raw mode to address individual cells. The web browser has an insanely powerful typographic and layout engine. Now we're looping back into character cells. Something went wrong here, at least once. That said, I like the aesthetic and the default color palette. It's quirky, but it has its places.

onehair 2y ago
I think they're just being funny, and if asked seriously they'll tell you that those words are only meant to hype up the project and not neat seriously (cells vs ems, %, px)
pdntspa 2y ago
And can we stop calling every stupid little hobby project "beautiful" while we're at it? The word has no meaning any more.
- big_paps 2y ago
  I find the usage of „i love x“ for x representing something inanimate you surely do not love far more unsettling..
  - tgv 2y ago
    This is getting quite off-topic, but I do love music. At least, that's how I would describe it. I just heard a fragment of something truly beautiful, and the my emotional attachment to that music is quite real (in this case, the Largo of Bach's concerto for two violins, BWV 1043; although I know someone who dismissed it as long-winding). But words tend to get nerfed, and clickbait culture certainly doesn't help. "Slams" in a headline has been reduced to "made a somewhat negative remark about," and "genius" now means "it took more than 2 seconds of thinking." Let's not discuss what "beyond excited" has become. I too would like word meanings not to shift too fast, as it helps preserve culture, especially literature, but the forces are too strong and diffuse to oppose. So "I love this web font" now just means "Don't think, just click on this link."

imiric 2y ago

Ah, wonderful. It even mimics the empty rectangles when a font doesn't contain a glyph... This is neat, but no, stop it. TUIs are an abomination of design that poorly mimic actually beautiful UIs. They look the way they do because of inherent constraints of the terminal, not because their authors particularly wanted them to look like that. So bringing that design language to a platform that does support rich UIs is artificially limiting what can be done on the web. It will also never truly have the same design as the terminal, unless you also want to avoid having any rich multimedia, interactivity, or use any web functionality introduced after 1995. At that point, your users would be better served by a text-only or Gemini site instead. As an aside, I think TUIs are wrong in most cases. If you're building something like a text editor or process manager, sure, they have their place. Although even then I would argue that they shouldn't mimic the look and feel of GUIs, but be purpose-built for the app in question. But most terminal programs shouldn't use TUIs. They should accept command-line arguments to modify their behavior, run and do what the user asked, and then exit. This is how you make programs adaptable, composable, and scriptable. They can still be made interactive at runtime via a different e.g. "client" program, but forcing the user to manually interact with an interface that mimics GUIs is an awful experience.

varun_ch 2y ago
I think you’re reading too much into it! This seems like a cute design library for eg. a personal blog or a portfolio website. I really doubt the author thinks this is the best design style, it’s just got an aesthetic that it sticks with, which is fun.
- imiric 2y ago
  Haha I suppose you're right. I do get a kick out of similar CSS frameworks that mimic the look of Windows and other OSs. I was just triggered by "beauty of TUIs", but beauty is in the eye of the beholder... :)
rvz 2y ago
Hmm, Not really convinced. I like TUIs and also the aesthetic of them. Much faster to use on a keyboard than point clicking all over the place with a mouse on the screen or typing the long commands and flags and forgetting a single flag and having to typing it once again.

ximm 2y ago

Nice use of the ch and lh units!

n3storm 2y ago

Somebody went too far after watching The Brutalist

lionkor 2y ago

On Firefox mobile the search field is one "cell" too large to the right and doesn't fit... I think I'm good. It seems petty, maybe, but the creator can't get their homepage right with it, I'm not sure I trust it. If someone built a full C compiler but it throws errors when compiling itself, would you use it?!

wsintra2022 2y ago
Second this, I opened the link and saw it was jank in my mobile browser. Why would someone not check that before showing the world? Anyway I am a fan of terminal and definitely on the bandwagon that a lot of the comments allude too. My reason; keeps fingers on the keyboard.

catapart 2y ago

Oh, sweet! I really like the faithfulness to the original subject, while still being useful with a mouse. I was actually going to write a theme for a project I'm working on that is meant to be styled like an inventory terminal from an auto parts store circa 1995, which was all some kind of TUI, so your theme is a great inspiration!

adhamsalama 2y ago

This will make it easy for people to write terminal emulators using web technologies that look a lot like actual terminal emulators (like Hyper). So we have gone full circle like twice?

jiehong 2y ago

That's nice! ## Shameless plug I explored a bit what older tech such as IBM's TN5250 terminals could bring to the Web [0] 2 years ago. In particular for data input scenarios. It's designed for Desktops, not mobile. [0]: https://jiehong.gitlab.io/web_tn5250 https://jiehong.gitlab.io/web_tn5250

magicink81 2y ago

I came here just to post a few words of encouragement. I think this is fun project. Thanks for making it!

jadbox 2y ago

Examples don't fit on mobile screens :(

zfolwick 2y ago

[dead]

AlienRobot 2y ago

This looks great but the scrollbars are unstyled.