Share Your Terminal Live on the Web With ttyd

If you’re in the business of giving demos or talking at conferences, webinars, or other gatherings, sooner or later you’ll have to show your terminal for a demo; in this case, this week’s article will surely interest you: ttyd.

ttyd is an open source tool written in C and TypeScript (based on xterm.js) that can be used to share your terminal directly over the web.

Before ttyd, there used to be an excellent project named gotty, written in Go, but that project is clearly abandoned now. ttyd works perfectly well today and is regularly maintained. It works on Linux, macOS and Windows.

I’ve used ttyd extensively in my DevRel work, and it was always a pleasure to use, a reliable and useful tool.

Installation

It can be installed very easily, just downloading the latest release from GitHub, and then moving it to the ~/.local/bin folder (or anywhere in your $PATH, really) and making it executable with chmod +x.

Or just, you know, sudo dnf install ttyd from your Fedora box, and you’re done. You also get the man pages using this method.

Usage

To use ttyd to share a vim session, for example, just run this command:

$ ttyd vim

Then point your browser towards localhost:7681 and enjoy what you see:

Of course, this a priori only works on your local network (depending on your firewall settings), but you can share your terminal with the whole world using ngrok, which is something I did a lot.

Options

The ttyd README shows plenty of interesting options:

• -p --port: change the default port to a different number than 7681.
• -c --credential: add a very simple HTTP authentication mechanism on top (using the username:password format).
• -o --once: make ttyd quit once the browser window closes.

There are more configuration options explained in the xtermjs documentation.

For example, the command below shares the current tmux session but making sure that it can only be seen once (it kills the process after the viewer closes the browser window), specifies a custom title, and uses a custom font family with bigger size, and disables the alert when leaving:

$ ttyd --once \
	--client-option titleFixed=Demo \
	--client-option fontSize=18 \
	--client-option disableLeaveAlert=true \
	--client-option fontFamily="'JetBrains Mono'" tmux att

Tips and Tricks

The advantage of sharing a full tmux session using ttyd and ngrok is that you can have a complex demo with various terminal programs running simultaneously, and you switch from one to the other during the demo.

Another cool trick that ttyd makes possible is to share your session with OBS Studio, using a scene with a web browser pointing to the address provided by the tool. Hit the “Start Recording” or “Start Streaming” buttons, and show the world your prowess on the console. This can be useful particularly if the computer running OBS Studio is not the same one you use for demos.

You can record very complex demos using asciinema before giving your talk, so you have more control over the action and what you show to people. This works particularly well when coupled with demo-magic, an open-source project I’ve talked about in a previous post on this blog.

If you want to only share your terminal during your whole presentation, you can use tools like mdp or presenterm to display your slides on a separate tmux pane. Very geeky!