Cyclic0007/ratatui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(examples): add VHS tapes and docs for widget examples (#2114)

Browse Source 
fixes #1982

Later on I'll figure out an easy way to regenerate this in the CI and
possibly do the same for the app examples' VHS tapes. That's why I
haven't added a script or mentioned anything in the docs yet (hint:
#1721)

---------

Co-authored-by: Jagoda Estera Ślązak <128227338+j-g00da@users.noreply.github.com>
This commit is contained in:
Orhun Parmaksız
2025-09-30 22:22:30 +03:00
committed by GitHub
parent 849f4badbf
commit 200b217722
19 changed files with 312 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
examples/README.md
View File

@@ -1,7 +1,9 @@
# Examples
This folder contains examples that are more application focused.
There are also [widget examples] in `ratatui-widgets`.
> [!TIP]
> There are also [widget examples] in `ratatui-widgets`.
[widget examples]: ../ratatui-widgets/examples
@@ -11,8 +13,9 @@ You can run these examples using:
cargo run -p example-name
```
This folder might use unreleased code. Consider viewing the examples in the `latest` branch instead
of the `main` branch for code which is guaranteed to work with the released ratatui version.
> [!NOTE]
> This folder might use unreleased code. Consider viewing the examples in the `latest` branch instead
> of the `main` branch for code which is guaranteed to work with the released Ratatui version.
> [!WARNING]
>

101
ratatui-widgets/examples/README.md Normal file
View File

@@ -0,0 +1,101 @@
# Widget Examples
This folder contains minimal examples for Ratatui widgets.
There are meant to provide code snippets that can be copy-pasted into your
application.
> [!TIP]
> There are also [application examples] in the top-level `examples` folder.
[application examples]: ../../examples
You can run these examples using:
```shell
cargo run -p ratatui-widgets --example example-name
```
> [!NOTE]
> This folder might use unreleased code. Consider viewing the examples in the `latest` branch instead
> of the `main` branch for code which is guaranteed to work with the released Ratatui version.
## Barchart (grouped)
![Barchart (grouped)][barchart-grouped.gif]
## Barchart
![Barchart][barchart.gif]
## Block
![Block][block.gif]
## Calendar
![Calendar][calendar.gif]
## Canvas
![Canvas][canvas.gif]
## Chart
![Chart][chart.gif]
## Collapsed Borders
![Collapsed Borders][collapsed-borders.gif]
## Gauge
![Gauge][gauge.gif]
## Line Gauge
![Line Gauge][line-gauge.gif]
## List
![List][list.gif]
## Logo
![Logo][logo.gif]
## Paragraph
![Paragraph][paragraph.gif]
## Scrollbar
![Scrollbar][scrollbar.gif]
## Sparkline
![Sparkline][sparkline.gif]
## Table
![Table][table.gif]
## Tabs
![Tabs][tabs.gif]
[barchart-grouped.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/barchart-grouped.gif?raw=true
[barchart.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/barchart.gif?raw=true
[block.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/block.gif?raw=true
[calendar.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/calendar.gif?raw=true
[canvas.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/canvas.gif?raw=true
[chart.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/chart.gif?raw=true
[collapsed-borders.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/collapsed-borders.gif?raw=true
[gauge.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/gauge.gif?raw=true
[line-gauge.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/line-gauge.gif?raw=true
[list.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/list.gif?raw=true
[logo.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/logo.gif?raw=true
[paragraph.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/paragraph.gif?raw=true
[scrollbar.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/scrollbar.gif?raw=true
[sparkline.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/sparkline.gif?raw=true
[table.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/table.gif?raw=true
[tabs.gif]: https://github.com/ratatui/ratatui/blob/images/widget-examples/tabs.gif?raw=true

0
ratatui-widgets/examples/line_gauge.rs → ratatui-widgets/examples/line-gauge.rs
View File

12
ratatui-widgets/examples/vhs/barchart-grouped.tape Normal file
View File

@@ -0,0 +1,12 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/barchart-grouped.tape`
Output "target/barchart-grouped.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 1000
Hide
Type "cargo run -p ratatui-widgets --example barchart-grouped"
Enter
Sleep 1s
Show
Sleep 1s

12
ratatui-widgets/examples/vhs/barchart.tape Normal file
View File

@@ -0,0 +1,12 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/barchart.tape`
Output "target/barchart.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 600
Hide
Type "cargo run -p ratatui-widgets --example barchart"
Enter
Sleep 1s
Show
Sleep 1s

12
ratatui-widgets/examples/vhs/block.tape Normal file
View File

@@ -0,0 +1,12 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/block.tape`
Output "target/block.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 1200
Hide
Type "cargo run -p ratatui-widgets --example block"
Enter
Sleep 2s
Show
Sleep 2s

12
ratatui-widgets/examples/vhs/calendar.tape Normal file
View File

@@ -0,0 +1,12 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/calendar.tape`
Output "target/calendar.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 800
Hide
Type "cargo run -p ratatui-widgets --example calendar"
Enter
Sleep 3s
Show
Sleep 5s

13
ratatui-widgets/examples/vhs/canvas.tape Normal file
View File

@@ -0,0 +1,13 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/canvas.tape`
Output "target/canvas.gif"
Set Theme "Aardvark Blue"
Set FontSize 12
Set Width 1200
Set Height 800
Hide
Type "cargo run -p ratatui-widgets --example canvas"
Enter
Sleep 2s
Show
Sleep 5s

12
ratatui-widgets/examples/vhs/chart.tape Normal file
View File

@@ -0,0 +1,12 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/chart.tape`
Output "target/chart.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 800
Hide
Type "cargo run -p ratatui-widgets --example chart"
Enter
Sleep 1s
Show
Sleep 5s

2
ratatui-widgets/examples/vhs/collapsed-borders.tape
View File

@@ -1,5 +1,5 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./examples/vhs/gauge.tape`
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/collapsed-borders.tape`
Output "target/collapsed-borders.gif"
Set Theme "Aardvark Blue"
Set Width 1200

12
ratatui-widgets/examples/vhs/gauge.tape Normal file
View File

@@ -0,0 +1,12 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/gauge.tape`
Output "target/gauge.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 850
Hide
Type "cargo run -p ratatui-widgets --example gauge"
Enter
Sleep 2s
Show
Sleep 5s

12
ratatui-widgets/examples/vhs/line-gauge.tape Normal file
View File

@@ -0,0 +1,12 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/line-gauge.tape`
Output "target/line-gauge.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 850
Hide
Type "cargo run -p ratatui-widgets --example line-gauge"
Enter
Sleep 2s
Show
Sleep 5s

20
ratatui-widgets/examples/vhs/list.tape Normal file
View File

@@ -0,0 +1,20 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/list.tape`
Output "target/list.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 612
Hide
Type "cargo run -p ratatui-widgets --example list"
Enter
Sleep 10s
Show
Sleep 2s
Down@1.5s 3
Sleep 1.5s
Down@1.5s 3
Sleep 1.5s
Up@1s 1
Sleep 1s
Up@1s 4
Sleep 2s

14
ratatui-widgets/examples/vhs/logo.tape Normal file
View File

@@ -0,0 +1,14 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/logo.tape`
Output "target/logo.gif"
Set Theme "Aardvark Blue"
Set Width 550
Set Height 220
Hide
Type "cargo run -p ratatui-widgets --example logo"
Enter
Sleep 2s
Show
Sleep 2s
Hide
Escape

12
ratatui-widgets/examples/vhs/paragraph.tape Normal file
View File

@@ -0,0 +1,12 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/paragraph.tape`
Output "target/paragraph.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 600
Hide
Type "cargo run -p ratatui-widgets --example paragraph"
Enter
Sleep 1s
Show
Sleep 5s

17
ratatui-widgets/examples/vhs/scrollbar.tape Normal file
View File

@@ -0,0 +1,17 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/scrollbar.tape`
Output "target/scrollbar.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 600
Hide
Type "cargo run -p ratatui-widgets --example scrollbar"
Enter
Sleep 1s
Show
Sleep 2s
Right@1s 4
Sleep 1s
Left@1s 1
Down@1s 3
Sleep 2s

12
ratatui-widgets/examples/vhs/sparkline.tape Normal file
View File

@@ -0,0 +1,12 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/sparkline.tape`
Output "target/sparkline.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 600
Hide
Type "cargo run -p ratatui-widgets --example sparkline"
Enter
Sleep 1s
Show
Sleep 5s

17
ratatui-widgets/examples/vhs/table.tape Normal file
View File

@@ -0,0 +1,17 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/table.tape`
Output "target/table.gif"
Set Theme "Aardvark Blue"
Set Width 1400
Set Height 768
Hide
Type "cargo run -p ratatui-widgets --example table"
Enter
Sleep 1s
Show
Sleep 2s
Set TypingSpeed 1s
Down 3
Sleep 1s
Right 3
Sleep 2s

15
ratatui-widgets/examples/vhs/tabs.tape Normal file
View File

@@ -0,0 +1,15 @@
# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
# To run this script, install vhs and run `vhs ./ratatui-widgets/examples/vhs/tabs.tape`
Output "target/tabs.gif"
Set Theme "Aardvark Blue"
Set Width 1200
Set Height 368
Hide
Type "cargo run -p ratatui-widgets --example tabs"
Enter
Sleep 2s
Show
Sleep 1s
Right@2.5s 3
Left@2.5s 3
Sleep 2s