ttysvg
Getting started

Your first recording

Record a live session and reference the result from your README.

Run a program and record it. Everything works normally while it runs, and the file is written when the program exits.

ttysvg record --out demo.svg -- cargo build

Recording an interactive shell works the same way. Type whatever you want, then exit.

ttysvg record --out demo.svg -- powershell -NoLogo

Everything after -- is the command to record.

Putting it in a README

Open demo.svg in a browser to check it, then commit it and reference it:

<img src="demo.svg" alt="demo" width="100%">

GitHub renders the SVG inline, animation and all. Because the file carries both palettes, it follows the reader's GitHub theme with no second file and no <picture> element.

Size and position

ttysvg record --cols 90 --rows 22 --padding 24 --out demo.svg -- ./my-tool

--cols and --rows are the recording size in characters, not pixels, and they default to your terminal's current size. They are the only two settings that cannot be changed afterwards, because by the time a frame is captured the text has already wrapped.

A title bar

ttysvg record --window --title "my-tool" --out demo.svg -- ./my-tool

This draws the rounded frame with the three buttons, which is what makes a recording read as a terminal rather than a screenshot of text.

Next

Recording by hand is fine once. When your output changes, every demo in the repo goes stale. Tapes fix that, and interactive mode writes your first one for you.

On this page