Home > Mobile >  How to create a terminal output viewer in JavaScript?
How to create a terminal output viewer in JavaScript?

Time:11-21

I need to figure out a way to show the output of a particular bash command (like ls -la) in my web application and I wanted to know if there is a library that does that. Simply showing the output in the black/white style is not enough since the output contains characters that only a bash terminal can render in the right way. For example, the output of composer install contains the following line (the percentage is changing):

  - Installing bacon/bacon-qr-code (2.0.4): Downloading (100%)

but behind the terminal, it has the following appearance:

  - Installing bacon/bacon-qr-code (2.0.4): Downloading (connecting...)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (0%)           \b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (5%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (10%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (15%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (45%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (50%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (55%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (60%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (65%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (70%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (75%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (80%)\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\b\bDownloading (100%)

Thanks in advance.

CodePudding user response:

What you're looking for is Xterm.js (https://xtermjs.org/). All the major Web apps (or even desktop ones based on Electron) are using it for emulating console/terminal look and behavior. And it's frameworks agnostic, meaning that you can use it with whatever framework or library you like.

I don't know of any other better for what you seek to achieve.

  • Related