
Show HN: tmux2html - Render full tmux windows or individual panes as HTML - tommyallen
https://github.com/tweekmonster/tmux2html
======
tommyallen
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](https://share.esdf.io/FGlV4sufpt/color.html)

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

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

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

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

~~~
tommyallen
Here's an example of not-so-real time rendering:
[https://share.esdf.io/log.html](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.

------
fiatjaf
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?

~~~
tommyallen
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/](http://annasagrera.com/on-ascii-youtube-and-letting-go/)

~~~
fiatjaf
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?

~~~
tombert
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.

[https://github.com/Tombert/dotfiles/blob/master/tmux/.tmux.c...](https://github.com/Tombert/dotfiles/blob/master/tmux/.tmux.conf)

~~~
tommyallen
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.

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

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

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

~~~
tommyallen
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.

~~~
cyphar
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.

~~~
tommyallen
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.

------
martanne
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/](https://asciinema.org/) [2]
[https://github.com/asciinema/asciinema/issues/105](https://github.com/asciinema/asciinema/issues/105)

~~~
tommyallen
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.

~~~
martanne
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...](https://github.com/asciinema/asciinema/blob/master/doc/asciicast-v1.md)

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

~~~
tommyallen
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.

~~~
martanne
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](https://github.com/martanne/vis)

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

~~~
tommyallen
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](https://github.com/tweekmonster/braceless.vim)

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

~~~
tommyallen
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](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.

------
kempbellt
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!

------
abricot
Do you have an example?

~~~
tommyallen
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.

------
zchee
amazing!

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

~~~
tommyallen
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](https://github.com/yudai/gotty)

