I wanted to showcase my CLI apps and didn't know a solution. I imagined that I could record my screen as a video and convert to a GIF file so that you can embed them to GitHub or elsewhere. After googling for some time, I found a better approach which produces SVGs instead of GIFs, and it's effortless to use.

Install asciinema

This tool allows you to record your terminal session. It also has a website where you can upload your recordings and where everyone can see them https://asciinema.org/. I recommend creating an account there.

npm i asciinema -g

Unfortunately, the recorded sessions require a player to play them so they cannot be embedded in any website. For example, you cannot insert it to Github's README.

Install svg-term-cli

This is a useful tool which can convert sessions recorded using asciinema to SVG:

npm i svg-term-cli -g 

How to record

I use it with the max idle time of 2 seconds. This will start a recording:

asciinema rec -i 2

After you run this, do whatever you wanted to show in the terminal. Press Ctrl + D to stop recording.

If you upload the sessions to asciicinema.org, create an SVG like this:

svg-term --cast=YOUR_CAST_ID --out demo.svg --window

You can view demo.svg in a web browser after that.

If you store the recording locally, create an SVG as follows:

cat path-to-your-cast-file | svg-term --out demo.svg --window

Embedding

Now you can embed the SVG files almost anywhere. Here is an example from my newsletter-cli project:

<p align="center">
  <img src="https://raw.githubusercontent.com/OrKoN/newsletter-cli/master/demo.svg?sanitize=true" width="572" alt="newsletter cli demo">
</p>

And here is how it looks like: see on Github

P.S. Interestingly, dev.to uses some image proxy which converts animated SVGs to a static image, so it does not seem possible to embed such SVGs into the content. But it seems to work for the cover image!

originally published at https://60devs.com/create-beautiful-screencasts-from-your-terminal.html