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
Top comments (0)