Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example for Xterm.js connected to Bash #4520

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

paco-sevilla
Copy link

The discussion about integrating Xterm.js into nicegui (#1846) seems to be stale...
However, I'd find it great to have Xterm.js in nicegui!

This PR just adds an example, but I would be more than happy to close this PR and work on a proper integration (including a "bell" event, a resizing event, addons like @xterm/addon-web-links, etc.).

Use-cases for Xterm in nicegui:

  • Provide a Terminal & Shell for native (electron-like) applications
  • Provide a access to the Shell of a server through a web application, e.g. for a robot (this is the example in this PR, which has obvious security risks!)
  • Display the output of a subprocess containing ANSI escape codes (this is what I'm mostly interested in)

Example in this PR

The example integrates Xterm.js as a new element called Terminal, which provides a simple interface for reading and writing bytes from/to it.
This new element is then used in main.py, connecting in to /bin/bash running in a pty.fork() process.

The page looks as follows:
image

@evnchn
Copy link
Contributor

evnchn commented Mar 23, 2025

Xterm.js is quite a well-used project at this point.

I have seen it used in Proxmox, as well as various third-party router plugins which provide SSH.

So, I can stand behind including it for NiceGUI.


If I understand correctly, now we need to do npm install to grab xterm right?

Check out npm.json and npm.py to see how other elements officially in NiceGUI currently fetches the dependencies from NPM (though that's up for change later, but should stick until rest of 2.X)

@paco-sevilla
Copy link
Author

@evnchn Thanks for your comment.
I'm aware of those files (npm.py and npm.json). As I wrote above and in #1846, if the authors of NiceGUI think that adding Xterm.js is valuable, I can work on a proper integration: add the module to the npm files, move terminal.py to nicegui/elements, add tests, ...

This PR just adds an example, very similar to the one here: https://github.com/zauberzeug/nicegui/tree/main/examples/signature_pad

@rodja
Copy link
Member

rodja commented Mar 25, 2025

I think xterm.js would be a wonderful (and very powerful) NiceGUI element. But let me discuss it with @falkoschindler first. Might be at the end of the week.

@falkoschindler falkoschindler self-requested a review March 27, 2025 10:22
@falkoschindler
Copy link
Contributor

Thanks for the pull request, @paco-sevilla!

@rodja and I agreed that it would be great to integrate Xterm.js in NiceGUI. For such a useful UI element, it only adds ~300KB of minified JS and a few lines of CSS. (I haven't checked the addons though.)

Instead of ui.terminal, we would prefer the name ui.xterm. For non-Quasar elements we tend to use the original brand name to avoid confusion with similar elements - like ui.aggrid was originally called ui.table, which is now a Quasar table...

So we'd appreciate it very much if you could convert the example into an integrated UI element, either on this PR or a new one. As @evnchn pointed out, we currently manage our dependencies with npm.json and npm.py, which might be a bit tricky to use. Let us know if you need help with anything!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants