Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: tmux2html - Render full tmux windows or individual panes as HTML (github.com)
99 points by tommyallen on Mar 31, 2016 | hide | past | web | favorite | 28 comments

Example rendered sessions. Warning: The animated examples might not be impressive on low performance devices, and they may drain your battery if you leave them opened.

Color [disk: 135KB, gzip: 17KB]: https://share.esdf.io/FGlV4sufpt/color.html

Single Pane [disk: 65KB, gzip: 6KB]: https://share.esdf.io/saRkuNriJt/single.html

Full Window (Big) [disk: 134KB, gzip: 11KB]: https://share.esdf.io/h5lGMPdcZF/full.html

Animated [disk: 638KB, gzip: 262KB]: https://share.esdf.io/3qdZm2szkN/animated.html

Partially Animated (Big) [disk: 192KB, gzip: 79KB]: https://share.esdf.io/EJHQXoIQDT/partial-animated.html (Only some panes are animating)

Here's an example of not-so-real time rendering: https://share.esdf.io/log.html

It's a tmux window displaying the log file for the share.esdf.io domain. It refreshes every second, so the message above about animated examples applies.

Whoa, that's amazing.

I don't use tmux, but I'm considering it just because of this super fancy tool here.

I would like to hear about interesting use cases. Is that when you want to show what you're doing to your boss? Or when you want to impress a novice programmer?

Like I mentioned there, I use it to pester my friends :)

tmux is simply fantastic for keeping a session active. Not to mention you won't need to use multiple disjointed emulator windows to do something like keep tabs on a log file while you're working. You can even "full screen" a pane by pressing `Ctrl+b z`! I love being able to ssh into a server (or even my home computer) and simply resume where I left off, from any computer! My friend, let me also take a moment to tell you about Vim.... ;)

Back on topic: I think it would be good for anything where you want things to look almost exactly what's on your screen with high fidelity. Someone submitted an issue to have tmux2html continuously write to the same file that reloads itself. That could be used to have a not-so-realtime snapshot of a pane that's accessible from a browser. Perhaps, some weirdly draconian workplace that requires all employees to use tmux can routinely take a snapshot of all workstation sessions to make sure they aren't goofing off watching ASCII youtube[1]. Who knows!

1: http://annasagrera.com/on-ascii-youtube-and-letting-go/

Ok, you have convinced me. I'll try tmux! I do ssh at all times and do all my programming and other computer stuff in a VPS and remote computers, so this thing was made for me.

I've been using vim for a long time now, although I am still a neophyte.

And I have tried tmux some time ago, but couldn't get used to the keybindings that conflicted with those of vim (I'm against doing too much customization -- specially of keybindings --, because that will make me useless when using other people's computers). Is this a real problem or was it just something I did wrong?

I use tmux as my primary "IDE" for everything. I personally use the backtiick (`) as my prefix, because ctrl-B conflicted with Emacs.

Now I use vim for everything, but I still use the same prefix because I've gotten used to it.

If you're stuck using someone else's computer, you can always pass through the prefix by hitting it twice...For example, if I ever need a backtick, I can just tap it two times.


The thing I love so far about Vim is no one argues about key bindings because no one is right. But, almost everyone agrees that the default leader key is awful. I imagine it's the same for the Emacs community.

I actually like the default bindings for both, but yes, everyone in the community seems to have a slightly fragmented opinion of them :D.

You like the backslash as the leader key?! Well I never!

I'm a goober and have never once used the leader key...I guess I'm a bit of a noob.

A leader key will expand the number of keys available to you. You can have maps like <leader>j that doesn't interfere with the default j map. There is also <localleader> that does the same thing. They're like having a sticky <ctrl> or <alt> but more comfortable. Read up on them (:h mapleader) and you will have more sun shine fun with Vim! For the record I use the comma as the <leader> key and leave <localleader> as the backslash since it's used rarely.

I started using ? as the leader (I don't do reverse searches). The other options (, \) always get in the way while programming. I might try the backtick, but it means that programming in languages that use backticks (Rust, I think) would be a pain.

The backtick is also used for for jumping to marks. I wouldn't recommend overriding that one. `. will put your cursor back to the last insertion point. '. will put you back on the last insertion line. They're quite handy. A common key that is used is <space>. There' is also using CAPSLOCK as a leader key, but it's not very portable since it requires configuring the OS. I think ? is fine for a leader key as long as you know that you're not going to use reverse search ever.

Looks like HN is slowing down the post speeds here. If you want to talk about Vim more, send me a message @cloudsiphon on Twitter.

A convert! (Score!) To make navigating Vim and tmux splits more palatable, I highly recommend this plugin: https://github.com/christoomey/vim-tmux-navigator

asciinema[1] does a similar thing but captures a whole terminal session. If somebody would add key input overlay support[2], it would actually be tremendously useful for demonstration purposes of interactive, mainly keyboard driven, terminal applications.

[1] https://asciinema.org/ [2] https://github.com/asciinema/asciinema/issues/105

asciinema is a very useful. But, what I found unappealing about it was that I needed asciinema to play the recordings (is that still the case?). I wanted to be able to put the rendered session anywhere I wanted.

The example links are actually hosted on my server and were uploaded using Dropshare. Pretty easy peasy if I need to share something that I don't want public.

asciinema stores the raw program output including any terminal escape sequences in a JSON format[1] and then uses a javascript terminal emulation library to replay/recreate the terminal state in your browser. The player, made up of one Javascript and one CSS file, can be self hosted[2].

[1] https://github.com/asciinema/asciinema/blob/master/doc/ascii...

[2] http://blog.asciinema.org/post/self-hosting/

This doesn't meet my criteria for easy peasy :(

If there was a utility that converted that json file to a single HTML file, that'd be a different story. If you feel up to doing that, tmux2html uses an MIT license, so feel free to use the parts that parses the escape sequences.

Well technically you could inline the Javascript+CSS stuff and you would get a single HTML file ;) No need to write anything, it already exists.

Anyway I didn't mean to discourage you from working on your project.

I just would like to use a decent terminal recording solution to showcase some of my own projects (e.g. abduco+dvtm, vis[1]). Ideally it would support:

* copy pasting from the screen cast

* pausing / adjusting playback speed

* simple self hosting mechanism

* conversion to gif as preview for inclusion in Markdown files or for environments where Javascript is disabled

* overlay to show pressed keys

AFAIK all but the last point is possible with asciinema. In the past I've used mkcast[2] which uses a fork of screenkey and is a pain to use. Apparently its developer now recommends xscast.

Anyway it is a mess to use and as a result the featured screen casts for my projects are rarely updated and by now completely out of date.

[1] https://github.com/martanne/vis

[2] https://github.com/KeyboardFire/mkcast

Don't worry about me. I won't be discouraged about anything :)

I want to be able to produce GIFs since that's relatively easy enough, but it got me thinking that there just needs to be support for embedding an iframe in (Github's) markdown. Just strip scripts out of it and let authors worry about making it look right in the markdown in terms of size and using CSS for animations. GIFs are just huge and look bad when making their size reasonable.

In regard to key overlays, I feel the same way. I'm having that issue right now with my other project[1]. There was a little bit of effort put into making the animations with key overlays, and I really don't want to update them so that the images are correct with the current fixes.

In the scope of tmux, is it even possible to capture what keys were pressed? I'd be interested in adding such a feature to tmux2html since having an overlay with CSS and HTML would be trivial.

BTW, vis is pretty cool.

[1]: https://github.com/tweekmonster/braceless.vim

That is really cool! Could you use this to "livestream" a terminal session in real-time?

Not real-time, but yes, kind of. Add `--stream` to the command. Here's an example of it rendering every second: https://share.esdf.io/log.html

It is displaying the log file for my share.esdf.io domain (with IPs masked). I may take that link down in an hour or two if my puny server gets hammered.

This is great!

I use tmux all the time. Even went as far as setting up a dedicated "tmux server" when I was more focused on systems.

This tool will definitely come in handy. Thanks for the great work!

Do you have an example?

The examples are linked on the github page. This was something I had a tiny internal debate about. This thing renders HTML, but I wanted something visual on the README. But, that would require a screenshot...of the rendered HTML page. I don't know why, but that was very silly to me. If it's a screenshot, who is to say that I didn't just take a screen shot of my terminal?

I posted this on /r/coolgithubprojects and one of the comments was someone thought that the linked examples were screenshots until they selected the text.

In any case I'll post a separate comment with the linked examples.


Complete the loop. Make the browser a tmux client...

I thought about it, but it would bring this outside of the scope of a weekend project :) Besides, gotty might be better suited for that task: https://github.com/yudai/gotty

Applications are open for YC Winter 2020

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact