Ask HN: Best Way to Build MS-DOS-Style Text UI in the Browser?

6 points3stripe1y ago6 comments

I'm working on a web app that mimics the look and feel of an old MS-DOS program—think Turbo Pascal IDE or Norton Commander.

The goal* is a keyboard-only, text-based UI running inside a browser, with windowed UI elements and ASCII graphics.

I've looked into Xterm.js, React TUI libraries, and vanilla JS canvas solutions, but I'd love input from those who've built something similar.

Are there any existing projects or libraries I should check out?

Would appreciate any insights, cheers!

(*And the ultimate end goal is to have an LLM create interfaces on the fly from user prompts)

6 comments

dtagames1y ago

It's pretty simple to get a font that looks like DOS, render an <input> tag with custom styling for the command line entry, and an output window for the scrolling portion that copied the last input into the output and then cleared the input.

You can use CSS to make the scrolling window grow from the bottom to the top of the screen, like a DOS window would scroll up and then off.

If this were my project, I'd start with plain browser web components[0] rather than a framework. You could definitely have Cursor write the UI portion for you and then, once you like it, add the command handling.

I wrote an article[1] with some strategies and examples of this kind of complex prompt-driven development with Cursor.

[0] https://levelup.gitconnected.com/getting-started-with-web-co...

[1] https://levelup.gitconnected.com/license-to-kill-coding-with...

johng1y ago

I've seen a DOS interface for the browser talked about on HN before. I know I've seen at least one that was really impressive but I can't find the link... it was in a comment. And it wasn't one of the ones you mentioned I don't think.

Ahhh, here ya go: https://github.com/vinibiavatti1/TuiCss

via: https://news.ycombinator.com/item?id=28804309

There may be more too: https://kristopolous.github.io/BOOTSTRA.386/

Edit: I also found this: https://news.ycombinator.com/item?id=37418424

3stripeOP1y ago

How did I forget textual, thank you! It might be a good solution as I can imagine Claude Sonnet vibe coding interesting UIs with it...

Am also investigating xterm.js currently.

Anything that uses too much CSS (eg tries to 'construct' layouts with it rather than just rending text) seems a little fragile.

dtagames1y ago

CSS is absolutely the right tool for constructing layouts because it allows you to make your components with a class (like "commandLine") and then control exactly how that input box lays out on the screen, not only its font and color but also height, scrolling, expanding or not with the window and content, and everything else that affects the look.

Ideally, JS is only for computation, HTML only for making content containers, and all layout and appearance is in CSS.

1 more reply

dlcarrier1y ago

The most popular GUI tool for terminals is called ncurses. There is a JavaScript implementation in a tool called Blessed.

You can also find a lot of similar projects by searching for ncurses along with HTML or JavaScript or CSS.

j / k navigate · click thread line to collapse

Ask HN: Best Way to Build MS-DOS-Style Text UI in the Browser?

6 points3stripe1y ago6 comments

I'm working on a web app that mimics the look and feel of an old MS-DOS program—think Turbo Pascal IDE or Norton Commander.

The goal* is a keyboard-only, text-based UI running inside a browser, with windowed UI elements and ASCII graphics.

I've looked into Xterm.js, React TUI libraries, and vanilla JS canvas solutions, but I'd love input from those who've built something similar.

Are there any existing projects or libraries I should check out?

Would appreciate any insights, cheers!

(*And the ultimate end goal is to have an LLM create interfaces on the fly from user prompts)

6 comments

dtagames1y ago

You can use CSS to make the scrolling window grow from the bottom to the top of the screen, like a DOS window would scroll up and then off.

I wrote an article[1] with some strategies and examples of this kind of complex prompt-driven development with Cursor.

[0] https://levelup.gitconnected.com/getting-started-with-web-co...

[1] https://levelup.gitconnected.com/license-to-kill-coding-with...

johng1y ago

Ahhh, here ya go: https://github.com/vinibiavatti1/TuiCss

via: https://news.ycombinator.com/item?id=28804309

There may be more too: https://kristopolous.github.io/BOOTSTRA.386/

Edit: I also found this: https://news.ycombinator.com/item?id=37418424

3stripeOP1y ago

How did I forget textual, thank you! It might be a good solution as I can imagine Claude Sonnet vibe coding interesting UIs with it...

Am also investigating xterm.js currently.

Anything that uses too much CSS (eg tries to 'construct' layouts with it rather than just rending text) seems a little fragile.

dtagames1y ago

Ideally, JS is only for computation, HTML only for making content containers, and all layout and appearance is in CSS.

1 more reply

dlcarrier1y ago

The most popular GUI tool for terminals is called ncurses. There is a JavaScript implementation in a tool called Blessed.

You can also find a lot of similar projects by searching for ncurses along with HTML or JavaScript or CSS.

j / k navigate · click thread line to collapse