fix(terminal): Terminal::insert_before would crash when called while the viewport filled the screen (#1329)

Reimplement Terminal::insert_before. The previous implementation would
insert the new lines in chunks into the area between the top of the
screen and the top of the (new) viewport. If the viewport filled the
screen, there would be no area in which to insert lines, and the
function would crash.

The new implementation uses as much of the screen as it needs to, all
the way up to using the whole screen.

This commit:
- adds a scrollback buffer to the `TestBackend` so that tests can
inspect and assert the state of the scrollback buffer in addition to the
screen
- adds functions to `TestBackend` to assert the state of the scrollback
- adds and updates `TestBackend` tests to test the behavior of the
scrollback and the new asserting functions
- reimplements `Terminal::insert_before`, including adding two new
helper functions `Terminal::draw_lines` and `Terminal::scroll_up`.
- updates the documentation for `Terminal::insert_before` to clarify
some of the edge cases
- updates terminal tests to assert the state of the scrollback buffer
- adds a new test for the condition that causes the bug
- adds a conversion constructor `Cell::from(char)`

Fixes: https://github.com/ratatui/ratatui/issues/999

.cargo-husky/hooks/pre-push

@@ -1,16 +0,0 @@
-#!/usr/bin/env bash
-
-if !(command cargo-make >/dev/null 2>&1); then # Check if cargo-make is installed
-    echo Attempting to run cargo-make as part of the pre-push hook but it\'s not installed.
-    echo Please install it by running the following command:
-    echo
-    echo "    cargo install --force cargo-make"
-    echo
-    echo If you don\'t want to run cargo-make as part of the pre-push hook, you can run
-    echo the following command instead of git push:
-    echo
-    echo "    git push --no-verify"
-    exit 1
-fi
-
-cargo make ci

.editorconfig

@@ -2,6 +2,12 @@
 
 root = true
 
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
 [*.rs]
 indent_style = space
 indent_size = 4

.github/CODEOWNERS

@@ -1,8 +1,11 @@
-# See https://help.github.com/articles/about-codeowners/
+# See <https://help.github.com/articles/about-codeowners/>
+
 # for more info about CODEOWNERS file
 
 # It uses the same pattern rule for gitignore file
-# https://git-scm.com/docs/gitignore#_pattern_format
+
+# <https://git-scm.com/docs/gitignore#_pattern_format>
 
 # Maintainers
-* @orhun @mindoodoo @sayanarijit @joshka @kdheepak @Valentin271
+
+* @ratatui/maintainers

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create an issue about a bug you encountered
 title: ''
-labels: bug
+labels: 'Type: Bug'
 assignees: ''
 ---
 
@@ -17,26 +17,22 @@ A detailed and complete issue is more likely to be processed quickly.
 A clear and concise description of what the bug is.
 -->
 
-
 ## To Reproduce
 <!--
 Try to reduce the issue to a simple code sample exhibiting the problem.
 Ideally, fork the project and add a test or an example.
 -->
 
-
 ## Expected behavior
 <!--
 A clear and concise description of what you expected to happen.
 -->
 
-
 ## Screenshots
 <!--
 If applicable, add screenshots, gifs or videos to help explain your problem.
 -->
 
-
 ## Environment
 <!--
 Add a description of the systems where you are observing the issue. For example:

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,11 @@
 blank_issues_enabled: false
 contact_links:
+  - name: Frequently Asked Questions
+    url: https://ratatui.rs/faq/
+    about: Check the website FAQ section to see if your question has already been answered
+  - name: Ratatui Forum
+    url: https://forum.ratatui.rs
+    about: Ask questions about ratatui on our Forum
   - name: Discord Chat
     url: https://discord.gg/pMCEU9hNEj
     about: Ask questions about ratatui on Discord

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,7 +2,7 @@
 name: Feature request
 about: Suggest an idea for this project
 title: ''
-labels: enhancement
+labels: 'Type: Enhancement'
 assignees: ''
 
 ---

.github/workflows/bench_base.yml

@@ -0,0 +1,25 @@
+name: Run Benchmarks
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  benchmark_base_branch:
+    name: Continuous Benchmarking with Bencher
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: bencherdev/bencher@main
+      - name: Track base branch benchmarks with Bencher
+        run: |
+          bencher run \
+          --project ratatui-org \
+          --token '${{ secrets.BENCHER_API_TOKEN }}' \
+          --branch main \
+          --testbed ubuntu-latest \
+          --adapter rust_criterion \
+          --err \
+          cargo bench

.github/workflows/bench_run_fork_pr.yml

@@ -0,0 +1,25 @@
+name: Run and Cache Benchmarks
+
+on:
+  pull_request:
+    types: [opened, reopened, edited, synchronize]
+
+jobs:
+  benchmark_fork_pr_branch:
+    name: Run Fork PR Benchmarks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Run Benchmarks
+        run: cargo bench > benchmark_results.txt
+      - name: Upload Benchmark Results
+        uses: actions/upload-artifact@v4
+        with:
+          name: benchmark_results.txt
+          path: ./benchmark_results.txt
+      - name: Upload GitHub Pull Request Event
+        uses: actions/upload-artifact@v4
+        with:
+          name: event.json
+          path: ${{ github.event_path }}

.github/workflows/bench_track_fork_pr.yml

@@ -0,0 +1,75 @@
+name: Track Benchmarks with Bencher
+
+on:
+  workflow_run:
+    workflows: [Run and Cache Benchmarks]
+    types: [completed]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  track_fork_pr_branch:
+    if: github.event.workflow_run.conclusion == 'success'
+    runs-on: ubuntu-latest
+    env:
+      BENCHMARK_RESULTS: benchmark_results.txt
+      PR_EVENT: event.json
+    steps:
+      - name: Download Benchmark Results
+        uses: actions/github-script@v7
+        with:
+          script: |
+            async function downloadArtifact(artifactName) {
+              let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                run_id: context.payload.workflow_run.id,
+              });
+              let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => {
+                return artifact.name == artifactName
+              })[0];
+              if (!matchArtifact) {
+                core.setFailed(`Failed to find artifact: ${artifactName}`);
+              }
+              let download = await github.rest.actions.downloadArtifact({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                artifact_id: matchArtifact.id,
+                archive_format: 'zip',
+              });
+              let fs = require('fs');
+              fs.writeFileSync(`${process.env.GITHUB_WORKSPACE}/${artifactName}.zip`, Buffer.from(download.data));
+            }
+            await downloadArtifact(process.env.BENCHMARK_RESULTS);
+            await downloadArtifact(process.env.PR_EVENT);
+      - name: Unzip Benchmark Results
+        run: |
+          unzip $BENCHMARK_RESULTS.zip
+          unzip $PR_EVENT.zip
+      - name: Export PR Event Data
+        uses: actions/github-script@v7
+        with:
+          script: |
+            let fs = require('fs');
+            let prEvent = JSON.parse(fs.readFileSync(process.env.PR_EVENT, {encoding: 'utf8'}));
+            core.exportVariable("PR_HEAD", `${prEvent.number}/merge`);
+            core.exportVariable("PR_BASE", prEvent.pull_request.base.ref);
+            core.exportVariable("PR_BASE_SHA", prEvent.pull_request.base.sha);
+            core.exportVariable("PR_NUMBER", prEvent.number);
+      - uses: bencherdev/bencher@main
+      - name: Track Benchmarks with Bencher
+        run: |
+          bencher run \
+          --project ratatui-org \
+          --token '${{ secrets.BENCHER_API_TOKEN }}' \
+          --branch '${{ env.PR_HEAD }}' \
+          --branch-start-point '${{ env.PR_BASE }}' \
+          --branch-start-point-hash '${{ env.PR_BASE_SHA }}' \
+          --testbed ubuntu-latest \
+          --adapter rust_criterion \
+          --err \
+          --github-actions '${{ secrets.GITHUB_TOKEN }}' \
+          --ci-number '${{ env.PR_NUMBER }}' \
+          --file "$BENCHMARK_RESULTS"

.github/workflows/calculate-alpha-release.bash

@@ -0,0 +1,52 @@
+#!/bin/bash
+
+# Exit on error. Append "|| true" if you expect an error.
+set -o errexit
+# Exit on error inside any functions or subshells.
+set -o errtrace
+# Do not allow use of undefined vars. Use ${VAR:-} to use an undefined VAR
+set -o nounset
+# Catch the error in case mysqldump fails (but gzip succeeds) in `mysqldump |gzip`
+set -o pipefail
+# Turn on traces, useful while debugging but commented out by default
+# set -o xtrace
+
+last_release="$(git tag --sort=committerdate | grep -P "v0+\.\d+\.\d+$" | tail -1)"
+echo "🐭 Last release: ${last_release}"
+
+# detect breaking changes
+if [ -n "$(git log --oneline ${last_release}..HEAD | grep '!:')" ]; then
+    echo "🐭 Breaking changes detected since ${last_release}"
+    git log --oneline ${last_release}..HEAD | grep '!:'
+    # increment the minor version
+    minor="${last_release##v0.}"
+    minor="${minor%.*}"
+    next_minor="$((minor + 1))"
+    next_release="v0.${next_minor}.0"
+else
+    # increment the patch version
+    patch="${last_release##*.}"
+    next_patch="$((patch + 1))"
+    next_release="${last_release/%${patch}/${next_patch}}"
+fi
+echo "🐭 Next release: ${next_release}"
+
+suffix="alpha"
+last_tag="$(git tag --sort=committerdate | tail -1)"
+if [[ "${last_tag}" = "${next_release}-${suffix}"* ]]; then
+    echo "🐭 Last alpha release: ${last_tag}"
+    # increment the alpha version
+    # e.g. v0.22.1-alpha.12 -> v0.22.1-alpha.13
+    alpha="${last_tag##*-${suffix}.}"
+    next_alpha="$((alpha + 1))"
+    next_tag="${last_tag/%${alpha}/${next_alpha}}"
+else
+    # increment the patch and start the alpha version from 0
+    # e.g. v0.22.0 -> v0.22.1-alpha.0
+    next_tag="${next_release}-${suffix}.0"
+fi
+# update the crate version
+msg="# crate version"
+sed -E -i "s/^version = .* ${msg}$/version = \"${next_tag#v}\" ${msg}/" Cargo.toml
+echo "NEXT_TAG=${next_tag}" >> $GITHUB_ENV
+echo "🐭 Next alpha release: ${next_tag}"

.github/workflows/cd.yml

@@ -28,27 +28,7 @@ jobs:
           fetch-depth: 0
 
       - name: Calculate the next release
-        run: |
-          suffix="alpha"
-          last_tag="$(git tag --sort=committerdate | tail -1)"
-          if [[ "${last_tag}" = *"-${suffix}"* ]]; then
-            # increment the alpha version
-            # e.g. v0.22.1-alpha.12 -> v0.22.1-alpha.13
-            alpha="${last_tag##*-${suffix}.}"
-            next_alpha="$((alpha + 1))"
-            next_tag="${last_tag/%${alpha}/${next_alpha}}"
-          else
-            # increment the patch and start the alpha version from 0
-            # e.g. v0.22.0 -> v0.22.1-alpha.0
-            patch="${last_tag##*.}"
-            next_patch="$((patch + 1))"
-            next_tag="${last_tag/%${patch}/${next_patch}}-${suffix}.0"
-          fi
-          # update the crate version
-          msg="# crate version"
-          sed -E -i "s/^version = .* ${msg}$/version = \"${next_tag#v}\" ${msg}/" Cargo.toml
-          echo "NEXT_TAG=${next_tag}" >> $GITHUB_ENV
-          echo "Next alpha release: ${next_tag} 🐭"
+        run: .github/workflows/calculate-alpha-release.bash
 
       - name: Publish on crates.io
         uses: actions-rs/cargo@v1
@@ -57,7 +37,7 @@ jobs:
           args: --allow-dirty --token ${{ secrets.CARGO_TOKEN }}
 
       - name: Generate a changelog
-        uses: orhun/git-cliff-action@v2
+        uses: orhun/git-cliff-action@v3
         with:
           config: cliff.toml
           args: --unreleased --tag ${{ env.NEXT_TAG }} --strip header

.github/workflows/check-pr.yml

@@ -71,7 +71,7 @@ jobs:
             issue_number: context.issue.number,
             owner: context.repo.owner,
             repo: context.repo.repo,
-            labels: ['breaking change']
+            labels: ['Type: Breaking Change']
           })
 
   do-not-merge:
@@ -84,4 +84,3 @@ jobs:
           echo "Pull request is labeled as 'do not merge'"
           echo "This workflow fails so that the pull request cannot be merged"
           exit 1
-

.github/workflows/check-semver.yml

@@ -0,0 +1,16 @@
+name: Check Semver
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  check-semver:
+    name: Check semver
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+      - name: Check semver
+        uses: obi1kenobi/cargo-semver-checks-action@v2

.github/workflows/ci.yml

@@ -17,76 +17,65 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
 
-env:
-  # don't install husky hooks during CI as they are only needed for for pre-push
-  CARGO_HUSKY_DONT_INSTALL_HOOKS: true
-
-# lint, clippy and coveraget jobs are intentionally early in the workflow to catch simple
-# formatting, typos, and missing tests as early as possible. This allows us to fix these and
-# resubmit the PR without having to wait for the comprehensive matrix of tests to complete.
+# lint, clippy and coverage jobs are intentionally early in the workflow to catch simple formatting,
+# typos, and missing tests as early as possible. This allows us to fix these and resubmit the PR
+# without having to wait for the comprehensive matrix of tests to complete.
 jobs:
-  lint:
+  rustfmt:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        if: github.event_name != 'pull_request'
-        uses: actions/checkout@v4
-      - name: Checkout
-        if: github.event_name == 'pull_request'
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-      - name: Install Rust nightly
-        uses: dtolnay/rust-toolchain@nightly
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@nightly
         with:
           components: rustfmt
-      - name: Install cargo-make
-        uses: taiki-e/install-action@cargo-make
-      - name: Check formatting
-        run: cargo make lint-format
-      - name: Check documentation
-        run: cargo make lint-docs
-      - name: Check conventional commits
-        uses: crate-ci/committed@master
-        with:
-          args: "-vv"
-          commits: HEAD
-      - name: Check typos
-        uses: crate-ci/typos@master
-      - name: Lint dependencies
-        uses: EmbarkStudios/cargo-deny-action@v1
+      - run: cargo +nightly fmt --all --check
+
+  typos:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: crate-ci/typos@master
+
+  dependencies:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: EmbarkStudios/cargo-deny-action@v2
 
   clippy:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Install Rust stable
-        uses: dtolnay/rust-toolchain@stable
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
         with:
           components: clippy
-      - name: Install cargo-make
-        uses: taiki-e/install-action@cargo-make
-      - name: Run cargo make clippy-all
-        run: cargo make clippy
+      - uses: taiki-e/install-action@cargo-make
+      - uses: Swatinem/rust-cache@v2
+      - run: cargo make clippy
+
+  markdownlint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: DavidAnson/markdownlint-cli2-action@v16
+        with:
+          globs: |
+            '**/*.md'
+            '!target'
 
   coverage:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Install Rust stable
-        uses: dtolnay/rust-toolchain@stable
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
         with:
           components: llvm-tools
-      - name: Install cargo-llvm-cov and cargo-make
-        uses: taiki-e/install-action@v2
+      - uses: taiki-e/install-action@v2
         with:
           tool: cargo-llvm-cov,cargo-make
-      - name: Generate coverage
-        run: cargo make coverage
-      - name: Upload to codecov.io
-        uses: codecov/codecov-action@v3
+      - uses: Swatinem/rust-cache@v2
+      - run: cargo make coverage
+      - uses: codecov/codecov-action@v4
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: true
@@ -95,38 +84,46 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ ubuntu-latest, windows-latest, macos-latest ]
-        toolchain: [ "1.70.0", "stable" ]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        toolchain: ["1.74.0", "stable"]
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Install Rust {{ matrix.toolchain }}
-        uses: dtolnay/rust-toolchain@master
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@master
         with:
           toolchain: ${{ matrix.toolchain }}
-      - name: Install cargo-make
-        uses: taiki-e/install-action@cargo-make
-      - name: Run cargo make check
-        run: cargo make check
+      - uses: taiki-e/install-action@cargo-make
+      - uses: Swatinem/rust-cache@v2
+      - run: cargo make check
         env:
           RUST_BACKTRACE: full
 
+  lint-docs:
+    runs-on: ubuntu-latest
+    env:
+      RUSTDOCFLAGS: -Dwarnings
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@nightly
+      - uses: dtolnay/install@cargo-docs-rs
+      - uses: Swatinem/rust-cache@v2
+      # Run cargo rustdoc with the same options that would be used by docs.rs, taking into account
+      # the package.metadata.docs.rs configured in Cargo.toml.
+      # https://github.com/dtolnay/cargo-docs-rs
+      - run: cargo +nightly docs-rs
+
   test-doc:
     strategy:
       fail-fast: false
       matrix:
-        os: [ ubuntu-latest, windows-latest, macos-latest ]
+        os: [ubuntu-latest, windows-latest, macos-latest]
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-      - name: Install cargo-make
-        uses: taiki-e/install-action@cargo-make
-      - name: Test docs
-        run: cargo make test-doc
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: taiki-e/install-action@cargo-make
+      - uses: Swatinem/rust-cache@v2
+      - run: cargo make test-doc
         env:
           RUST_BACKTRACE: full
 
@@ -134,24 +131,23 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ ubuntu-latest, windows-latest, macos-latest ]
-        toolchain: [ "1.70.0", "stable" ]
-        backend: [ crossterm, termion, termwiz ]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        toolchain: ["1.74.0", "stable"]
+        backend: [crossterm, termion, termwiz]
         exclude:
           # termion is not supported on windows
           - os: windows-latest
             backend: termion
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Install Rust ${{ matrix.toolchain }}}
-        uses: dtolnay/rust-toolchain@master
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@master
         with:
           toolchain: ${{ matrix.toolchain }}
-      - name: Install cargo-make
-        uses: taiki-e/install-action@cargo-make
-      - name: Test ${{ matrix.backend }}
-        run: cargo make test-backend ${{ matrix.backend }}
+      - uses: taiki-e/install-action@v2
+        with:
+          tool: cargo-make,nextest
+      - uses: Swatinem/rust-cache@v2
+      - run: cargo make test-backend ${{ matrix.backend }}
         env:
           RUST_BACKTRACE: full

BREAKING-CHANGES.md

@@ -1,23 +1,48 @@
 # Breaking Changes
 
 This document contains a list of breaking changes in each version and some notes to help migrate
-between versions. It is compile manually from the commit history and changelog. We also tag PRs on
-github with a [breaking change] label.
+between versions. It is compiled manually from the commit history and changelog. We also tag PRs on
+GitHub with a [breaking change] label.
 
-[breaking change]: (https://github.com/ratatui-org/ratatui/issues?q=label%3A%22breaking+change%22)
+[breaking change]: (https://github.com/ratatui/ratatui/issues?q=label%3A%22breaking+change%22)
 
 ## Summary
 
 This is a quick summary of the sections below:
 
-- Unreleased (0.24.1)
+- [v0.28.0](#v0280)
+  ⁻ `Backend::size` returns `Size` instead of `Rect`
+  - `Backend` trait migrates to `get/set_cursor_position`
+  - Ratatui now requires Crossterm 0.28.0
+  - `Axis::labels` now accepts `IntoIterator<Into<Line>>`
+  - `Layout::init_cache` no longer returns bool and takes a `NonZeroUsize` instead of `usize`
+  - `ratatui::terminal` module is now private
+  - `ToText` no longer has a lifetime
+  - `Frame::size` is deprecated and renamed to `Frame::area`
+- [v0.27.0](#v0270)
+  - List no clamps the selected index to list
+  - Prelude items added / removed
+  - 'termion' updated to 4.0
+  - `Rect::inner` takes `Margin` directly instead of reference
+  - `Buffer::filled` takes `Cell` directly instead of reference
+  - `Stylize::bg()` now accepts `Into<Color>`
+  - Removed deprecated `List::start_corner`
+  - `LineGauge::gauge_style` is deprecated
+- [v0.26.0](#v0260)
+  - `Flex::Start` is the new default flex mode for `Layout`
+  - `patch_style` & `reset_style` now consume and return `Self`
+  - Removed deprecated `Block::title_on_bottom`
+  - `Line` now has an extra `style` field which applies the style to the entire line
+  - `Block` style methods cannot be created in a const context
+  - `Tabs::new()` now accepts `IntoIterator<Item: Into<Line<'a>>>`
+  - `Table::new` now accepts `IntoIterator<Item: Into<Row<'a>>>`.
+- [v0.25.0](#v0250)
   - Removed `Axis::title_style` and `Buffer::set_background`
   - `List::new()` now accepts `IntoIterator<Item = Into<ListItem<'a>>>`
   - `Table::new()` now requires specifying the widths
   - `Table::widths()` now accepts `IntoIterator<Item = AsRef<Constraint>>`
   - Layout::new() now accepts direction and constraint parameters
   - The default `Tabs::highlight_style` is now `Style::new().reversed()`
-
 - [v0.24.0](#v0240)
   - MSRV is now 1.70.0
   - `ScrollbarState`: `position`, `content_length`, and `viewport_content_length` are now `usize`
@@ -30,7 +55,7 @@ This is a quick summary of the sections below:
   - `Scrollbar`: symbols moved to `symbols` module
   - MSRV is now 1.67.0
 - [v0.22.0](#v0220)
-  - serde representation of `Borders` and `Modifiers` has changed
+  - `serde` representation of `Borders` and `Modifiers` has changed
 - [v0.21.0](#v0210)
   - MSRV is now 1.65.0
   - `terminal::ViewPort` is now an enum
@@ -40,14 +65,352 @@ This is a quick summary of the sections below:
   - MSRV is now 1.63.0
   - `List` no longer ignores empty strings
 
-## Unreleased (v0.24.1)
+## v0.28.0
 
-### Removed `Axis::title_style` and `Buffer::set_background`
+### `Backend::size` returns `Size` instead of `Rect` ([#1254])
+
+[#1254]: https://github.com/ratatui/ratatui/pull/1254
+
+The `Backend::size` method returns a `Size` instead of a `Rect`.
+There is no need for the position here as it was always 0,0.
+
+### `Backend` trait migrates to `get/set_cursor_position` ([#1284])
+
+[#1284]: https://github.com/ratatui/ratatui/pull/1284
+
+If you just use the types implementing the `Backend` trait, you will see deprecation hints but
+nothing is a breaking change for you.
+
+If you implement the Backend trait yourself, you need to update the implementation and add the
+`get/set_cursor_position` method. You can remove the `get/set_cursor` methods as they are deprecated
+and a default implementation for them exists.
+
+### Ratatui now requires Crossterm 0.28.0 ([#1278])
+
+[#1278]: https://github.com/ratatui/ratatui/pull/1278
+
+Crossterm is updated to version 0.28.0, which is a semver incompatible version with the previous
+version (0.27.0). Ratatui re-exports the version of crossterm that it is compatible with under
+`ratatui::crossterm`, which can be used to avoid incompatible versions in your dependency list.
+
+### `Axis::labels()` now accepts `IntoIterator<Into<Line>>` ([#1273] and [#1283])
+
+[#1273]: https://github.com/ratatui/ratatui/pull/1173
+[#1283]: https://github.com/ratatui/ratatui/pull/1283
+
+Previously Axis::labels accepted `Vec<Span>`. Any code that uses conversion methods that infer the
+type will need to be rewritten as the compiler cannot infer the correct type.
+
+```diff
+- Axis::default().labels(vec!["a".into(), "b".into()])
++ Axis::default().labels(["a", "b"])
+```
+
+### `Layout::init_cache` no longer returns bool and takes a `NonZeroUsize` instead of `usize` ([#1245])
+
+[#1245]: https://github.com/ratatui/ratatui/pull/1245
+
+```diff
+- let is_initialized = Layout::init_cache(100);
++ Layout::init_cache(NonZeroUsize::new(100).unwrap());
+```
+
+### `ratatui::terminal` module is now private ([#1160])
+
+[#1160]: https://github.com/ratatui/ratatui/pull/1160
+
+The `terminal` module is now private and can not be used directly. The types under this module are
+exported from the root of the crate. This reduces clashes with other modules in the backends that
+are also named terminal, and confusion about module exports for newer Rust users.
+
+```diff
+- use ratatui::terminal::{CompletedFrame, Frame, Terminal, TerminalOptions, ViewPort};
++ use ratatui::{CompletedFrame, Frame, Terminal, TerminalOptions, ViewPort};
+```
+
+### `ToText` no longer has a lifetime ([#1234])
+
+[#1234]: https://github.com/ratatui/ratatui/pull/1234
+
+This change simplifies the trait and makes it easier to implement.
+
+### `Frame::size` is deprecated and renamed to `Frame::area`
+
+[#1293]: https://github.com/ratatui/ratatui/pull/1293
+
+`Frame::size` is renamed to `Frame::area` as it's the more correct name.
+
+## [v0.27.0](https://github.com/ratatui/ratatui/releases/tag/v0.27.0)
+
+### List no clamps the selected index to list ([#1159])
+
+[#1149]: https://github.com/ratatui/ratatui/pull/1149
+
+The `List` widget now clamps the selected index to the bounds of the list when navigating with
+`first`, `last`, `previous`, and `next`, as well as when setting the index directly with `select`.
+
+Previously selecting an index past the end of the list would show treat the list as having a
+selection which was not visible. Now the last item in the list will be selected instead.
+
+### Prelude items added / removed ([#1149])
+
+The following items have been removed from the prelude:
+
+- `style::Styled` - this trait is useful for widgets that want to
+  support the Stylize trait, but it adds complexity as widgets have two
+  `style` methods and a `set_style` method.
+- `symbols::Marker` - this item is used by code that needs to draw to
+  the `Canvas` widget, but it's not a common item that would be used by
+  most users of the library.
+- `terminal::{CompletedFrame, TerminalOptions, Viewport}` - these items
+  are rarely used by code that needs to interact with the terminal, and
+  they're generally only ever used once in any app.
+
+The following items have been added to the prelude:
+
+- `layout::{Position, Size}` - these items are used by code that needs
+  to interact with the layout system. These are newer items that were
+  added in the last few releases, which should be used more liberally.
+  This may cause conflicts for types defined elsewhere with a similar
+  name.
+
+To update your app:
+
+```diff
+// if your app uses Styled::style() or Styled::set_style():
+-use ratatui::prelude::*;
++use ratatui::{prelude::*, style::Styled};
+
+// if your app uses symbols::Marker:
+-use ratatui::prelude::*;
++use ratatui::{prelude::*, symbols::Marker}
+
+// if your app uses terminal::{CompletedFrame, TerminalOptions, Viewport}
+-use ratatui::prelude::*;
++use ratatui::{prelude::*, terminal::{CompletedFrame, TerminalOptions, Viewport}};
+
+// to disambiguate existing types named Position or Size:
+- use some_crate::{Position, Size};
+- let size: Size = ...;
+- let position: Position = ...;
++ let size: some_crate::Size = ...;
++ let position: some_crate::Position = ...;
+```
+
+### Termion is updated to 4.0 [#1106]
+
+Changelog: <https://gitlab.redox-os.org/redox-os/termion/-/blob/master/CHANGELOG.md>
+
+A change is only necessary if you were matching on all variants of the `MouseEvent` enum without a
+wildcard. In this case, you need to either handle the two new variants, `MouseLeft` and
+`MouseRight`, or add a wildcard.
+
+[#1106]: https://github.com/ratatui/ratatui/pull/1106
+
+### `Rect::inner` takes `Margin` directly instead of reference ([#1008])
+
+[#1008]: https://github.com/ratatui/ratatui/pull/1008
+
+`Margin` needs to be passed without reference now.
+
+```diff
+-let area = area.inner(&Margin {
++let area = area.inner(Margin {
+     vertical: 0,
+     horizontal: 2,
+ });
+```
+
+### `Buffer::filled` takes `Cell` directly instead of reference ([#1148])
+
+[#1148]: https://github.com/ratatui/ratatui/pull/1148
+
+`Buffer::filled` moves the `Cell` instead of taking a reference.
+
+```diff
+-Buffer::filled(area, &Cell::new("X"));
++Buffer::filled(area, Cell::new("X"));
+```
+
+### `Stylize::bg()` now accepts `Into<Color>` ([#1103])
+
+[#1103]: https://github.com/ratatui/ratatui/pull/1103
+
+Previously, `Stylize::bg()` accepted `Color` but now accepts `Into<Color>`. This allows more
+flexible types from calling scopes, though it can break some type inference in the calling scope.
+
+### Remove deprecated `List::start_corner` and `layout::Corner` ([#759])
+
+[#759]: https://github.com/ratatui/ratatui/pull/759
+
+`List::start_corner` was deprecated in v0.25. Use `List::direction` and `ListDirection` instead.
+
+```diff
+- list.start_corner(Corner::TopLeft);
+- list.start_corner(Corner::TopRight);
+// This is not an error, BottomRight rendered top to bottom previously
+- list.start_corner(Corner::BottomRight);
+// all becomes
++ list.direction(ListDirection::TopToBottom);
+```
+
+```diff
+- list.start_corner(Corner::BottomLeft);
+// becomes
++ list.direction(ListDirection::BottomToTop);
+```
+
+`layout::Corner` was removed entirely.
+
+### `LineGauge::gauge_style` is deprecated ([#565])
+
+[#565]: https://github.com/ratatui/ratatui/pull/1148
+
+`LineGauge::gauge_style` is deprecated and replaced with `LineGauge::filled_style` and `LineGauge::unfilled_style`:
+
+```diff
+let gauge = LineGauge::default()
+- .gauge_style(Style::default().fg(Color::Red).bg(Color::Blue)
++ .filled_style(Style::default().fg(Color::Green))
++ .unfilled_style(Style::default().fg(Color::White));
+```
+
+## [v0.26.0](https://github.com/ratatui/ratatui/releases/tag/v0.26.0)
+
+### `Flex::Start` is the new default flex mode for `Layout` ([#881])
+
+[#881]: https://github.com/ratatui/ratatui/pull/881
+
+Previously, constraints would stretch to fill all available space, violating constraints if
+necessary.
+
+With v0.26.0, `Flex` modes are introduced, and the default is `Flex::Start`, which will align
+areas associated with constraints to be beginning of the area. With v0.26.0, additionally,
+`Min` constraints grow to fill excess space. These changes will allow users to build layouts
+more easily.
+
+With v0.26.0, users will most likely not need to change what constraints they use to create
+existing layouts with `Flex::Start`. However, to get old behavior, use `Flex::Legacy`.
+
+```diff
+- let rects = Layout::horizontal([Length(1), Length(2)]).split(area);
+// becomes
++ let rects = Layout::horizontal([Length(1), Length(2)]).flex(Flex::Legacy).split(area);
+```
+
+### `Table::new()` now accepts `IntoIterator<Item: Into<Row<'a>>>` ([#774])
+
+[#774]: https://github.com/ratatui/ratatui/pull/774
+
+Previously, `Table::new()` accepted `IntoIterator<Item=Row<'a>>`. The argument change to
+`IntoIterator<Item: Into<Row<'a>>>`, This allows more flexible types from calling scopes, though it
+can some break type inference in the calling scope for empty containers.
+
+This can be resolved either by providing an explicit type (e.g. `Vec::<Row>::new()`), or by using
+`Table::default()`.
+
+```diff
+- let table = Table::new(vec![], widths);
+// becomes
++ let table = Table::default().widths(widths);
+```
+
+### `Tabs::new()` now accepts `IntoIterator<Item: Into<Line<'a>>>` ([#776])
+
+[#776]: https://github.com/ratatui/ratatui/pull/776
+
+Previously, `Tabs::new()` accepted `Vec<T>` where `T: Into<Line<'a>>`. This allows more flexible
+types from calling scopes, though it can break some type inference in the calling scope.
+
+This typically occurs when collecting an iterator prior to calling `Tabs::new`, and can be resolved
+by removing the call to `.collect()`.
+
+```diff
+- let tabs = Tabs::new((0.3).map(|i| format!("{i}")).collect());
+// becomes
++ let tabs = Tabs::new((0.3).map(|i| format!("{i}")));
+```
+
+### Table::default() now sets segment_size to None and column_spacing to ([#751])
+
+[#751]: https://github.com/ratatui/ratatui/pull/751
+
+The default() implementation of Table now sets the column_spacing field to 1 and the segment_size
+field to `SegmentSize::None`. This will affect the rendering of a small amount of apps.
+
+To use the previous default values, call `table.segment_size(Default::default())` and
+`table.column_spacing(0)`.
+
+### `patch_style` & `reset_style` now consumes and returns `Self` ([#754])
+
+[#754]: https://github.com/ratatui/ratatui/pull/754
+
+Previously, `patch_style` and `reset_style` in `Text`, `Line` and `Span` were using a mutable
+reference to `Self`. To be more consistent with the rest of `ratatui`, which is using fluent
+setters, these now take ownership of `Self` and return it.
+
+The following example shows how to migrate for `Line`, but the same applies for `Text` and `Span`.
+
+```diff
+- let mut line = Line::from("foobar");
+- line.patch_style(style);
+// becomes
++ let line = Line::new("foobar").patch_style(style);
+```
+
+### Remove deprecated `Block::title_on_bottom` ([#757])
+
+`Block::title_on_bottom` was deprecated in v0.22. Use `Block::title` and `Title::position` instead.
+
+```diff
+- block.title("foobar").title_on_bottom();
++ block.title(Title::from("foobar").position(Position::Bottom));
+```
+
+### `Block` style methods cannot be used in a const context ([#720])
+
+[#720]: https://github.com/ratatui/ratatui/pull/720
+
+Previously the `style()`, `border_style()` and `title_style()` methods could be used to create a
+`Block` in a constant context. These now accept `Into<Style>` instead of `Style`. These methods no
+longer can be called from a constant context.
+
+### `Line` now has a `style` field that applies to the entire line ([#708])
+
+[#708]: https://github.com/ratatui/ratatui/pull/708
+
+Previously the style of a `Line` was stored in the `Span`s that make up the line. Now the `Line`
+itself has a `style` field, which can be set with the `Line::styled` method. Any code that creates
+`Line`s using the struct initializer instead of constructors will fail to compile due to the added
+field. This can be easily fixed by adding `..Default::default()` to the field list or by using a
+constructor method (`Line::styled()`, `Line::raw()`) or conversion method (`Line::from()`).
+
+Each `Span` contained within the line will no longer have the style that is applied to the line in
+the `Span::style` field.
+
+```diff
+  let line = Line {
+      spans: vec!["".into()],
+      alignment: Alignment::Left,
++     ..Default::default()
+  };
+
+  // or
+
+  let line = Line::raw(vec!["".into()])
+      .alignment(Alignment::Left);
+```
+
+## [v0.25.0](https://github.com/ratatui/ratatui/releases/tag/v0.25.0)
+
+### Removed `Axis::title_style` and `Buffer::set_background` ([#691])
+
+[#691]: https://github.com/ratatui/ratatui/pull/691
 
 These items were deprecated since 0.10.
 
 - You should use styling capabilities of [`text::Line`] given as argument of [`Axis::title`]
-instead of `Axis::title_style`
+  instead of `Axis::title_style`
 - You should use styling capabilities of [`Buffer::set_style`] instead of `Buffer::set_background`
 
 [`text::Line`]: https://docs.rs/ratatui/latest/ratatui/text/struct.Line.html
@@ -56,9 +419,9 @@ instead of `Axis::title_style`
 
 ### `List::new()` now accepts `IntoIterator<Item = Into<ListItem<'a>>>` ([#672])
 
-[#672]: https://github.com/ratatui-org/ratatui/pull/672
+[#672]: https://github.com/ratatui/ratatui/pull/672
 
-Previously `List::new()` took `Into<Vec<ListItem<'a>>>`. This change will throw a compilation 
+Previously `List::new()` took `Into<Vec<ListItem<'a>>>`. This change will throw a compilation
 error for `IntoIterator`s with an indeterminate item (e.g. empty vecs).
 
 E.g.
@@ -71,23 +434,22 @@ E.g.
 
 ### The default `Tabs::highlight_style` is now `Style::new().reversed()` ([#635])
 
+[#635]: https://github.com/ratatui/ratatui/pull/635
+
 Previously the default highlight style for tabs was `Style::default()`, which meant that a `Tabs`
 widget in the default configuration would not show any indication of the selected tab.
 
-[#635]: https://github.com/ratatui-org/ratatui/pull/635
-
 ### The default `Tabs::highlight_style` is now `Style::new().reversed()` ([#635])
 
 Previously the default highlight style for tabs was `Style::default()`, which meant that a `Tabs`
 widget in the default configuration would not show any indication of the selected tab.
 
+### `Table::new()` now requires specifying the widths of the columns ([#664])
 
-### `Table::new()` now requires specifying the widths of the columns (#664)
+[#664]: https://github.com/ratatui/ratatui/pull/664
 
-[#664]: https://github.com/ratatui-org/ratatui/pull/664
-
-Previously `Table`s could be constructed without widths. In almost all cases this is an error.
-A new widths parameter is now mandatory on `Table::new()`. Existing code of the form:
+Previously `Table`s could be constructed without `widths`. In almost all cases this is an error.
+A new `widths` parameter is now mandatory on `Table::new()`. Existing code of the form:
 
 ```diff
 - Table::new(rows).widths(widths)
@@ -110,7 +472,7 @@ or complex, it may be convenient to replace `Table::new` with `Table::default().
 
 ### `Table::widths()` now accepts `IntoIterator<Item = AsRef<Constraint>>` ([#663])
 
-[#663]: https://github.com/ratatui-org/ratatui/pull/663
+[#663]: https://github.com/ratatui/ratatui/pull/663
 
 Previously `Table::widths()` took a slice (`&'a [Constraint]`). This change will introduce clippy
 `needless_borrow` warnings for places where slices are passed to this method. To fix these, remove
@@ -121,12 +483,12 @@ E.g.
 ```diff
 - let table = Table::new(rows).widths(&[Constraint::Length(1)]);
 // becomes
-+ let table = Table::new(rows).widths([Constraint::Length(1)]);
++ let table = Table::new(rows, [Constraint::Length(1)]);
 ```
 
 ### Layout::new() now accepts direction and constraint parameters ([#557])
 
-[#557]: https://github.com/ratatui-org/ratatui/pull/557
+[#557]: https://github.com/ratatui/ratatui/pull/557
 
 Previously layout new took no parameters. Existing code should either use `Layout::default()` or
 the new constructor.
@@ -143,18 +505,18 @@ let layout = layout::default()
 let layout = layout::new(Direction::Vertical, [Constraint::Min(1), Constraint::Max(2)]);
 ```
 
-## [v0.24.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.24.0)
+## [v0.24.0](https://github.com/ratatui/ratatui/releases/tag/v0.24.0)
 
-### ScrollbarState field type changed from `u16` to `usize` ([#456])
+### `ScrollbarState` field type changed from `u16` to `usize` ([#456])
 
-[#456]: https://github.com/ratatui-org/ratatui/pull/456
+[#456]: https://github.com/ratatui/ratatui/pull/456
 
 In order to support larger content lengths, the `position`, `content_length` and
 `viewport_content_length` methods on `ScrollbarState` now take `usize` instead of `u16`
 
 ### `BorderType::line_symbols` renamed to `border_symbols` ([#529])
 
-[#529]: https://github.com/ratatui-org/ratatui/issues/529
+[#529]: https://github.com/ratatui/ratatui/issues/529
 
 Applications can now set custom borders on a `Block` by calling `border_set()`. The
 `BorderType::line_symbols()` is renamed to `border_symbols()` and now returns a new struct
@@ -168,7 +530,7 @@ Applications can now set custom borders on a `Block` by calling `border_set()`.
 
 ### Generic `Backend` parameter removed from `Frame` ([#530])
 
-[#530]: https://github.com/ratatui-org/ratatui/issues/530
+[#530]: https://github.com/ratatui/ratatui/issues/530
 
 `Frame` is no longer generic over Backend. Code that accepted `Frame<Backend>` will now need to
 accept `Frame`. To migrate existing code, remove any generic parameters from code that uses an
@@ -182,7 +544,7 @@ instance of a Frame. E.g.:
 
 ### `Stylize` shorthands now consume rather than borrow `String` ([#466])
 
-[#466]: https://github.com/ratatui-org/ratatui/issues/466
+[#466]: https://github.com/ratatui/ratatui/issues/466
 
 In order to support using `Stylize` shorthands (e.g. `"foo".red()`) on temporary `String` values, a
 new implementation of `Stylize` was added that returns a `Span<'static>`. This causes the value to
@@ -200,7 +562,7 @@ longer compile. E.g.
 
 ### Deprecated `Spans` type removed (replaced with `Line`) ([#426])
 
-[#426]: https://github.com/ratatui-org/ratatui/issues/426
+[#426]: https://github.com/ratatui/ratatui/issues/426
 
 `Spans` was replaced with `Line` in 0.21.0. `Buffer::set_spans` was replaced with
 `Buffer::set_line`.
@@ -213,11 +575,11 @@ longer compile. E.g.
 + buffer.set_line(0, 0, line, 10);
 ```
 
-## [v0.23.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.23.0)
+## [v0.23.0](https://github.com/ratatui/ratatui/releases/tag/v0.23.0)
 
 ### `Scrollbar::track_symbol()` now takes an `Option<&str>` instead of `&str` ([#360])
 
-[#360]: https://github.com/ratatui-org/ratatui/issues/360
+[#360]: https://github.com/ratatui/ratatui/issues/360
 
 The track symbol of `Scrollbar` is now optional, this method now takes an optional value.
 
@@ -229,7 +591,7 @@ The track symbol of `Scrollbar` is now optional, this method now takes an option
 
 ### `Scrollbar` symbols moved to `symbols::scrollbar` and `widgets::scrollbar` module is private ([#330])
 
-[#330]: https://github.com/ratatui-org/ratatui/issues/330
+[#330]: https://github.com/ratatui/ratatui/issues/330
 
 The symbols for defining scrollbars have been moved to the `symbols` module from the
 `widgets::scrollbar` module which is no longer public. To update your code update any imports to the
@@ -238,39 +600,39 @@ new module locations. E.g.:
 ```diff
 - use ratatui::{widgets::scrollbar::{Scrollbar, Set}};
 // becomes
-+ use ratatui::{widgets::Scrollbar, symbols::scrollbar::Set} 
++ use ratatui::{widgets::Scrollbar, symbols::scrollbar::Set}
 ```
 
 ### MSRV updated to 1.67 ([#361])
 
-[#361]: https://github.com/ratatui-org/ratatui/issues/361
+[#361]: https://github.com/ratatui/ratatui/issues/361
 
 The MSRV of ratatui is now 1.67 due to an MSRV update in a dependency (`time`).
 
-## [v0.22.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.22.0)
+## [v0.22.0](https://github.com/ratatui/ratatui/releases/tag/v0.22.0)
 
-### bitflags updated to 2.3 ([#205])
+### `bitflags` updated to 2.3 ([#205])
 
-[#205]: https://github.com/ratatui-org/ratatui/issues/205
+[#205]: https://github.com/ratatui/ratatui/issues/205
 
-The serde representation of bitflags has changed. Any existing serialized types that have Borders or
-Modifiers will need to be re-serialized. This is documented in the [bitflags
+The `serde` representation of `bitflags` has changed. Any existing serialized types that have
+Borders or Modifiers will need to be re-serialized. This is documented in the [`bitflags`
 changelog](https://github.com/bitflags/bitflags/blob/main/CHANGELOG.md#200-rc2)..
 
-## [v0.21.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.21.0)
+## [v0.21.0](https://github.com/ratatui/ratatui/releases/tag/v0.21.0)
 
-### MSRV is 1.65.0  ([#171])
+### MSRV is 1.65.0 ([#171])
 
-[#171]: https://github.com/ratatui-org/ratatui/issues/171
+[#171]: https://github.com/ratatui/ratatui/issues/171
 
 The minimum supported rust version is now 1.65.0.
 
 ### `Terminal::with_options()` stabilized to allow configuring the viewport ([#114])
 
-[#114]: https://github.com/ratatui-org/ratatui/issues/114
+[#114]: https://github.com/ratatui/ratatui/issues/114
 
 In order to support inline viewports, the unstable method `Terminal::with_options()` was stabilized
-and  `ViewPort` was changed from a struct to an enum.
+and `ViewPort` was changed from a struct to an enum.
 
 ```diff
 let terminal = Terminal::with_options(backend, TerminalOptions {
@@ -284,11 +646,11 @@ let terminal = Terminal::with_options(backend, TerminalOptions {
 
 ### Code that binds `Into<Text<'a>>` now requires type annotations ([#168])
 
-[#168]: https://github.com/ratatui-org/ratatui/issues/168
+[#168]: https://github.com/ratatui/ratatui/issues/168
 
-A new type `Masked` was introduced that implements `From<Text<'a>>`. This causes any code that did
-previously did not need to use type annotations to fail to compile.  To fix this, annotate or call
-to_string() / to_owned() / as_str() on the value. E.g.:
+A new type `Masked` was introduced that implements `From<Text<'a>>`. This causes any code that
+previously did not need to use type annotations to fail to compile. To fix this, annotate or call
+`to_string()` / `to_owned()` / `as_str()` on the value. E.g.:
 
 ```diff
 - let paragraph = Paragraph::new("".as_ref());
@@ -298,7 +660,7 @@ to_string() / to_owned() / as_str() on the value. E.g.:
 
 ### `Marker::Block` now renders as a block rather than a bar character ([#133])
 
-[#133]: https://github.com/ratatui-org/ratatui/issues/133
+[#133]: https://github.com/ratatui/ratatui/issues/133
 
 Code using the `Block` marker that previously rendered using a half block character (`'▀'``) now
 renders using the full block character (`'█'`). A new marker variant`Bar` is introduced to replace
@@ -310,20 +672,20 @@ the existing code.
 + let canvas = Canvas::default().marker(Marker::Bar);
 ```
 
-## [v0.20.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.20.0)
+## [v0.20.0](https://github.com/ratatui/ratatui/releases/tag/v0.20.0)
 
 v0.20.0 was the first release of Ratatui - versions prior to this were release as tui-rs. See the
 [Changelog](./CHANGELOG.md) for more details.
 
 ### MSRV is update to 1.63.0 ([#80])
 
-[#80]: https://github.com/ratatui-org/ratatui/issues/80
+[#80]: https://github.com/ratatui/ratatui/issues/80
 
 The minimum supported rust version is 1.63.0
 
 ### List no longer ignores empty string in items ([#42])
 
-[#42]: https://github.com/ratatui-org/ratatui/issues/42
+[#42]: https://github.com/ratatui/ratatui/issues/42
 
 The following code now renders 3 items instead of 2. Code which relies on the previous behavior will
 need to manually filter empty items prior to display.

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+https://forum.ratatui.rs/ or https://discord.gg/pMCEU9hNEj.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -8,7 +8,7 @@ creating a new issue before making the change, or starting a discussion on
 
 ## Reporting issues
 
-Before reporting an issue on the [issue tracker](https://github.com/ratatui-org/ratatui/issues),
+Before reporting an issue on the [issue tracker](https://github.com/ratatui/ratatui/issues),
 please check that it has not already been reported by searching for some related keywords. Please
 also check [`tui-rs` issues](https://github.com/fdehau/tui-rs/issues/) and link any related issues
 found.
@@ -17,10 +17,10 @@ found.
 
 All contributions are obviously welcome. Please include as many details as possible in your PR
 description to help the reviewer (follow the provided template). Make sure to highlight changes
-which may need additional attention or you are uncertain about. Any idea with a large scale impact
+which may need additional attention, or you are uncertain about. Any idea with a large scale impact
 on the crate or its users should ideally be discussed in a "Feature Request" issue beforehand.
 
-### Keep PRs small, intentional and focused
+### Keep PRs small, intentional, and focused
 
 Try to do one pull request per change. The time taken to review a PR grows exponential with the size
 of the change. Small focused PRs will generally be much more faster to review. PRs that include both
@@ -32,7 +32,7 @@ guarantee that the behavior is unchanged.
 ### Code formatting
 
 Run `cargo make format` before committing to ensure that code is consistently formatted with
-rustfmt. Configuration is in [rustfmt.toml](./rustfmt.toml).
+rustfmt. Configuration is in [`rustfmt.toml`](./rustfmt.toml).
 
 ### Search `tui-rs` for similar work
 
@@ -54,21 +54,11 @@ describes the nature of the problem that the commit is solving and any unintuiti
 change. It's rare that code changes can easily communicate intent, so make sure this is clearly
 documented.
 
-### Clean up your commits
-
-The final version of your PR that will be committed to the repository should be rebased and tested
-against main. Every commit will end up as a line in the changelog, so please squash commits that are
-only formatting or incremental fixes to things brought up as part of the PR review. Aim for a single
-commit (unless there is a strong reason to stack the commits). See [Git Best Practices - On Sausage
-Making](https://sethrobertson.github.io/GitBestPractices/#sausage) for more on this.
-
 ### Run CI tests before pushing a PR
 
-We're using [cargo-husky](https://github.com/rhysd/cargo-husky) to automatically run git hooks,
-which will run `cargo make ci` before each push. To initialize the hook  run `cargo test`. If
-`cargo-make` is not installed, it will provide instructions to install it for you. This will ensure
-that your code is formatted, compiles and passes all tests before you push. If you need to skip this
-check, you can use `git push --no-verify`.
+Running `cargo make ci` before pushing will perform the same checks that we do in the CI process.
+It's not mandatory to do this before pushing, however it may save you time to do so instead of
+waiting for GitHub to run the checks.
 
 ### Sign your commits
 
@@ -89,14 +79,14 @@ defaults depending on your platform of choice. Building the project should be as
 `cargo make build`.
 
 ```shell
-git clone https://github.com/ratatui-org/ratatui.git
+git clone https://github.com/ratatui/ratatui.git
 cd ratatui
 cargo make build
 ```
 
 ### Tests
 
-The [test coverage](https://app.codecov.io/gh/ratatui-org/ratatui) of the crate is reasonably
+The [test coverage](https://app.codecov.io/gh/ratatui/ratatui) of the crate is reasonably
 good, but this can always be improved. Focus on keeping the tests simple and obvious and write unit
 tests for all new or modified code. Beside the usual doc and unit tests, one of the most valuable
 test you can write for Ratatui is a test against the `TestBackend`. It allows you to assert the
@@ -120,7 +110,8 @@ exist to show coverage directly in your editor. E.g.:
 
 ### Documentation
 
-Here are some guidelines for writing documentation in Ratatui.  
+Here are some guidelines for writing documentation in Ratatui.
+
 Every public API **must** be documented.
 
 Keep in mind that Ratatui tends to attract beginner Rust users that may not be familiar with Rust
@@ -133,10 +124,9 @@ the concepts pointing to the various methods. Focus on interaction with various
 enough information that helps understand why you might want something.
 
 Examples should help users understand a particular usage, not test a feature. They should be as
-simple as possible.  
-Prefer hiding imports and using wildcards to keep things concise. Some imports may still be shown
-to demonstrate a particular non-obvious import (e.g. `Stylize` trait to use style methods).  
-Speaking of `Stylize`, you should use it over the more verbose style setters:
+simple as possible. Prefer hiding imports and using wildcards to keep things concise. Some imports
+may still be shown to demonstrate a particular non-obvious import (e.g. `Stylize` trait to use style
+methods). Speaking of `Stylize`, you should use it over the more verbose style setters:
 
 ```rust
 let style = Style::new().red().bold();
@@ -146,7 +136,7 @@ let style = Style::default().fg(Color::Red).add_modifier(Modifiers::BOLD);
 
 #### Format
 
-- First line is summary, second is blank, third onward is more detail  
+- First line is summary, second is blank, third onward is more detail
 
 ```rust
 /// Summary
@@ -156,10 +146,10 @@ let style = Style::default().fg(Color::Red).add_modifier(Modifiers::BOLD);
 fn foo() {}
 ```
 
-- Max line length is 100 characters  
-See [vscode rewrap extension](https://marketplace.visualstudio.com/items?itemName=stkb.rewrap)
+- Max line length is 100 characters
+See [VS Code rewrap extension](https://marketplace.visualstudio.com/items?itemName=stkb.rewrap)
 
-- Doc comments are above macros  
+- Doc comments are above macros
 i.e.
 
 ```rust
@@ -168,18 +158,24 @@ i.e.
 struct Foo {}
 ```
 
-- Code items should be between backticks  
+- Code items should be between backticks
 i.e. ``[`Block`]``, **NOT** ``[Block]``
 
+### Deprecation notice
+
+We generally want to wait at least two versions before removing deprecated items, so users have
+time to update. However, if a deprecation is blocking for us to implement a new feature we may
+*consider* removing it in a one version notice.
+
 ### Use of unsafe for optimization purposes
 
-We don't currently use any unsafe code in Ratatui, and would like to keep it that way. However there
+We don't currently use any unsafe code in Ratatui, and would like to keep it that way. However, there
 may be specific cases that this becomes necessary in order to avoid slowness. Please see [this
-discussion](https://github.com/ratatui-org/ratatui/discussions/66) for more about the decision.
+discussion](https://github.com/ratatui/ratatui/discussions/66) for more about the decision.
 
 ## Continuous Integration
 
-We use Github Actions for the CI where we perform the following checks:
+We use GitHub Actions for the CI where we perform the following checks:
 
 - The code should compile on `stable` and the Minimum Supported Rust Version (MSRV).
 - The tests (docs, lib, tests and examples) should pass.
@@ -195,12 +191,12 @@ This project was forked from [`tui-rs`](https://github.com/fdehau/tui-rs/) in Fe
 [blessing of the original author](https://github.com/fdehau/tui-rs/issues/654), Florian Dehau
 ([@fdehau](https://github.com/fdehau)).
 
-The original repository contains all the issues, PRs and discussion that were raised originally, and
+The original repository contains all the issues, PRs, and discussion that were raised originally, and
 it is useful to refer to when contributing code, documentation, or issues with Ratatui.
 
-We imported all the PRs from the original repository and implemented many of the smaller ones and
+We imported all the PRs from the original repository, implemented many of the smaller ones, and
 made notes on the leftovers. These are marked as draft PRs and labelled as [imported from
-tui](https://github.com/ratatui-org/ratatui/pulls?q=is%3Apr+is%3Aopen+label%3A%22imported+from+tui%22).
+tui](https://github.com/ratatui/ratatui/pulls?q=is%3Apr+is%3Aopen+label%3A%22imported+from+tui%22).
 We have documented the current state of those PRs, and anyone is welcome to pick them up and
 continue the work on them.
 

Cargo.toml

@@ -1,11 +1,13 @@
 [package]
 name = "ratatui"
-version = "0.24.0" # crate version
+version = "0.28.0" # crate version
 authors = ["Florian Dehau <work@fdehau.com>", "The Ratatui Developers"]
 description = "A library that's all about cooking up terminal user interfaces"
 documentation = "https://docs.rs/ratatui/latest/ratatui/"
+repository = "https://github.com/ratatui/ratatui"
+homepage = "https://ratatui.rs"
 keywords = ["tui", "terminal", "dashboard"]
-repository = "https://github.com/ratatui-org/ratatui"
+categories = ["command-line-interface"]
 readme = "README.md"
 license = "MIT"
 exclude = [
@@ -16,44 +18,100 @@ exclude = [
   "*.log",
   "tags",
 ]
-autoexamples = true
 edition = "2021"
-rust-version = "1.70.0"
-
-[badges]
+rust-version = "1.74.0"
 
 [dependencies]
-crossterm = { version = "0.27", optional = true }
-termion = { version = "2.0", optional = true }
-termwiz = { version = "0.20.0", optional = true }
-
-serde = { version = "1", optional = true, features = ["derive"] }
 bitflags = "2.3"
 cassowary = "0.3"
-indoc = "2.0"
-itertools = "0.12"
+compact_str = "0.8.0"
+crossterm = { version = "0.28.1", optional = true }
+document-features = { version = "0.2.7", optional = true }
+instability = "0.3.1"
+itertools = "0.13"
+lru = "0.12.0"
 paste = "1.0.2"
-strum = { version = "0.25", features = ["derive"] }
+palette = { version = "0.7.6", optional = true }
+serde = { version = "1", optional = true, features = ["derive"] }
+strum = { version = "0.26", features = ["derive"] }
+strum_macros = { version = "0.26.3" }
+termwiz = { version = "0.22.0", optional = true }
 time = { version = "0.3.11", optional = true, features = ["local-offset"] }
 unicode-segmentation = "1.10"
-unicode-width = "0.1"
-document-features = { version = "0.2.7", optional = true }
-lru = "0.12.0"
-stability = "0.1.1"
+unicode-truncate = "1"
+unicode-width = "0.1.13"
+
+[target.'cfg(not(windows))'.dependencies]
+# termion is not supported on Windows
+termion = { version = "4.0.0", optional = true }
 
 [dev-dependencies]
-anyhow = "1.0.71"
 argh = "0.1.12"
-better-panic = "0.3.0"
-cargo-husky = { version = "1.5.0", default-features = false, features = [
-  "user-hooks",
-] }
 color-eyre = "0.6.2"
 criterion = { version = "0.5.1", features = ["html_reports"] }
+crossterm = { version = "0.28.1", features = ["event-stream"] }
+derive_builder = "0.20.0"
 fakeit = "1.1"
-palette = "0.7.3"
+font8x8 = "0.3.1"
+futures = "0.3.30"
+indoc = "2"
+octocrab = "0.39.0"
 pretty_assertions = "1.4.0"
 rand = "0.8.5"
+rand_chacha = "0.3.1"
+rstest = "0.22.0"
+serde_json = "1.0.109"
+tokio = { version = "1.39.2", features = [
+  "rt",
+  "macros",
+  "time",
+  "rt-multi-thread",
+] }
+tracing = "0.1.40"
+tracing-appender = "0.2.3"
+tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
+
+[lints.rust]
+unsafe_code = "forbid"
+
+[lints.clippy]
+cargo = { level = "warn", priority = -1 }
+pedantic = { level = "warn", priority = -1 }
+cast_possible_truncation = "allow"
+cast_possible_wrap = "allow"
+cast_precision_loss = "allow"
+cast_sign_loss = "allow"
+missing_errors_doc = "allow"
+missing_panics_doc = "allow"
+module_name_repetitions = "allow"
+must_use_candidate = "allow"
+
+# we often split up a module into multiple files with the main type in a file named after the
+# module, so we want to allow this pattern
+module_inception = "allow"
+
+# nursery or restricted
+as_underscore = "warn"
+deref_by_slicing = "warn"
+else_if_without_else = "warn"
+empty_line_after_doc_comments = "warn"
+equatable_if_let = "warn"
+fn_to_numeric_cast_any = "warn"
+format_push_string = "warn"
+map_err_ignore = "warn"
+missing_const_for_fn = "warn"
+mixed_read_write_in_expression = "warn"
+mod_module_files = "warn"
+needless_pass_by_ref_mut = "warn"
+needless_raw_strings = "warn"
+or_fun_call = "warn"
+redundant_type_annotations = "warn"
+rest_pat_in_fully_bound_structs = "warn"
+string_lit_chars_any = "warn"
+string_slice = "warn"
+string_to_string = "warn"
+unnecessary_self_imports = "warn"
+use_self = "warn"
 
 [features]
 #! The crate provides a set of optional features that can be enabled in your `cargo.toml` file.
@@ -63,78 +121,76 @@ rand = "0.8.5"
 ## which allows you to set the underline color of text.
 default = ["crossterm", "underline-color"]
 #! Generally an application will only use one backend, so you should only enable one of the following features:
-## enables the [`CrosstermBackend`] backend and adds a dependency on the [Crossterm crate].
+## enables the [`CrosstermBackend`](backend::CrosstermBackend) backend and adds a dependency on [`crossterm`].
 crossterm = ["dep:crossterm"]
-## enables the [`TermionBackend`] backend and adds a dependency on the [Termion crate].
+## enables the [`TermionBackend`](backend::TermionBackend) backend and adds a dependency on [`termion`].
 termion = ["dep:termion"]
-## enables the [`TermwizBackend`] backend and adds a dependency on the [Termwiz crate].
+## enables the [`TermwizBackend`](backend::TermwizBackend) backend and adds a dependency on [`termwiz`].
 termwiz = ["dep:termwiz"]
 
 #! The following optional features are available for all backends:
-## enables serialization and deserialization of style and color types using the [Serde crate].
+## enables serialization and deserialization of style and color types using the [`serde`] crate.
 ## This is useful if you want to save themes to a file.
-serde = ["dep:serde", "bitflags/serde"]
+serde = ["dep:serde", "bitflags/serde", "compact_str/serde"]
 
 ## enables the [`border!`] macro.
 macros = []
 
+## enables conversions from colors in the [`palette`] crate to [`Color`](crate::style::Color).
+palette = ["dep:palette"]
+
 ## enables all widgets.
 all-widgets = ["widget-calendar"]
 
 #! Widgets that add dependencies are gated behind feature flags to prevent unused transitive
 #! dependencies. The available features are:
-## enables the [`calendar`] widget module and adds a dependency on the [Time crate].
+## enables the [`calendar`](widgets::calendar) widget module and adds a dependency on [`time`].
 widget-calendar = ["dep:time"]
 
-#! Underline color is only supported by the [`CrosstermBackend`] backend, and is not supported
-#! on Windows 7.
+#! The following optional features are only available for some backends:
+
 ## enables the backend code that sets the underline color.
+## Underline color is only supported by the [`CrosstermBackend`](backend::CrosstermBackend) backend,
+## and is not supported on Windows 7.
 underline-color = ["dep:crossterm"]
 
 #! The following features are unstable and may change in the future:
 
 ## Enable all unstable features.
-unstable = ["unstable-segment-size", "unstable-rendered-line-info"]
+unstable = ["unstable-rendered-line-info", "unstable-widget-ref"]
 
-## Enables the [`Layout::segment_size`](crate::layout::Layout::segment_size) method which is experimental and may change in the
-## future. See [Issue #536](https://github.com/ratatui-org/ratatui/issues/536) for more details.
-unstable-segment-size = []
-
-## Enables the [`Paragraph::line_count`](crate::widgets::Paragraph::line_count)
-## [`Paragraph::line_width`](crate::widgets::Paragraph::line_width) methods
+## Enables the [`Paragraph::line_count`](widgets::Paragraph::line_count)
+## [`Paragraph::line_width`](widgets::Paragraph::line_width) methods
 ## which are experimental and may change in the future.
-## See [Issue 293](https://github.com/ratatui-org/ratatui/issues/293) for more details.
+## See [Issue 293](https://github.com/ratatui/ratatui/issues/293) for more details.
 unstable-rendered-line-info = []
 
+## Enables the [`WidgetRef`](widgets::WidgetRef) and [`StatefulWidgetRef`](widgets::StatefulWidgetRef) traits which are experimental and may change in
+## the future.
+unstable-widget-ref = []
+
 [package.metadata.docs.rs]
 all-features = true
 # see https://doc.rust-lang.org/nightly/rustdoc/scraped-examples.html
 cargo-args = ["-Zunstable-options", "-Zrustdoc-scrape-examples"]
 rustdoc-args = ["--cfg", "docsrs"]
 
-[[bench]]
-name = "barchart"
-harness = false
-
-[[bench]]
-name = "block"
-harness = false
-
-[[bench]]
-name = "list"
-harness = false
+# Improve benchmark consistency
+[profile.bench]
+codegen-units = 1
+lto = true
 
 [lib]
 bench = false
 
 [[bench]]
-name = "paragraph"
-harness = false
-
-[[bench]]
-name = "sparkline"
+name = "main"
 harness = false
 
+[[example]]
+name = "async"
+required-features = ["crossterm"]
+doc-scrape-examples = true
 
 [[example]]
 name = "barchart"
@@ -142,12 +198,12 @@ required-features = ["crossterm"]
 doc-scrape-examples = true
 
 [[example]]
-name = "block"
+name = "barchart-grouped"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
 [[example]]
-name = "canvas"
+name = "block"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
@@ -156,6 +212,11 @@ name = "calendar"
 required-features = ["crossterm", "widget-calendar"]
 doc-scrape-examples = true
 
+[[example]]
+name = "canvas"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
 [[example]]
 name = "chart"
 required-features = ["crossterm"]
@@ -169,9 +230,19 @@ doc-scrape-examples = false
 
 [[example]]
 name = "colors_rgb"
+required-features = ["crossterm", "palette"]
+doc-scrape-examples = true
+
+[[example]]
+name = "constraint-explorer"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
+[[example]]
+name = "constraints"
+required-features = ["crossterm"]
+doc-scrape-examples = false
+
 [[example]]
 name = "custom_widget"
 required-features = ["crossterm"]
@@ -184,7 +255,7 @@ doc-scrape-examples = false
 
 [[example]]
 name = "demo2"
-required-features = ["crossterm", "widget-calendar"]
+required-features = ["crossterm", "palette", "widget-calendar"]
 doc-scrape-examples = true
 
 [[example]]
@@ -192,6 +263,11 @@ name = "docsrs"
 required-features = ["crossterm"]
 doc-scrape-examples = false
 
+[[example]]
+name = "flex"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
 [[example]]
 name = "gauge"
 required-features = ["crossterm"]
@@ -202,16 +278,37 @@ name = "hello_world"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
+[[example]]
+name = "inline"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
 [[example]]
 name = "layout"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
+[[example]]
+name = "line_gauge"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
+[[example]]
+name = "hyperlink"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
 [[example]]
 name = "list"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
+[[example]]
+name = "minimal"
+required-features = ["crossterm"]
+# prefer to show the more featureful examples in the docs
+doc-scrape-examples = false
+
 [[example]]
 name = "modifiers"
 required-features = ["crossterm"]
@@ -258,12 +355,21 @@ name = "tabs"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
+[[example]]
+name = "tracing"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
 [[example]]
 name = "user_input"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
 [[example]]
-name = "inline"
-required-features = ["crossterm"]
+name = "widget_impl"
+required-features = ["crossterm", "unstable-widget-ref"]
 doc-scrape-examples = true
+
+[[test]]
+name = "state_serde"
+required-features = ["serde"]

FUNDING.json

@@ -0,0 +1,7 @@
+{
+  "drips": {
+    "ethereum": {
+      "ownedBy": "0x6053C8984f4F214Ad12c4653F28514E1E09213B5"
+    }
+  }
+}

LICENSE

@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
 Copyright (c) 2016-2022 Florian Dehau
-Copyright (c) 2023 The Ratatui Developers
+Copyright (c) 2023-2024 The Ratatui Developers
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

MAINTAINERS.md

@@ -0,0 +1,15 @@
+# Maintainers
+
+This file documents current and past maintainers.
+
+- [orhun](https://github.com/orhun)
+- [joshka](https://github.com/joshka)
+- [kdheepak](https://github.com/kdheepak)
+- [Valentin271](https://github.com/Valentin271)
+
+## Past Maintainers
+
+- [fdehau](https://github.com/fdehau)
+- [mindoodoo](https://github.com/mindoodoo)
+- [sayanarijit](https://github.com/sayanarijit)
+- [EdJoPaTo](https://github.com/EdJoPaTo)

Makefile.toml

@@ -5,23 +5,17 @@ skip_core_tasks = true
 
 [env]
 # all features except the backend ones
-ALL_FEATURES = "all-widgets,macros,serde"
-
-# Windows does not support building termion, so this avoids the build failure by providing two
-# sets of flags, one for Windows and one for other platforms.
-# Windows: --features=all-widgets,macros,serde,crossterm,termwiz,underline-color
-# Other: --features=all-widgets,macros,serde,crossterm,termion,termwiz,underline-color
-ALL_FEATURES_FLAG = { source = "${CARGO_MAKE_RUST_TARGET_OS}", default_value = "--features=all-widgets,macros,serde,crossterm,termion,termwiz,unstable", mapping = { "windows" = "--features=all-widgets,macros,serde,crossterm,termwiz,unstable" } }
+NON_BACKEND_FEATURES = "all-widgets,macros,serde"
 
 [tasks.default]
 alias = "ci"
 
 [tasks.ci]
 description = "Run continuous integration tasks"
-dependencies = ["lint-style", "clippy", "check", "test"]
+dependencies = ["lint", "clippy", "check", "test"]
 
-[tasks.lint-style]
-description = "Lint code style (formatting, typos, docs)"
+[tasks.lint]
+description = "Lint code style (formatting, typos, docs, markdown)"
 dependencies = ["lint-format", "lint-typos", "lint-docs"]
 
 [tasks.lint-format]
@@ -47,33 +41,27 @@ toolchain = "nightly"
 command = "cargo"
 args = [
   "rustdoc",
-  "--no-default-features",
-  "${ALL_FEATURES_FLAG}",
+  "--all-features",
   "--",
   "-Zunstable-options",
   "--check",
   "-Dwarnings",
 ]
 
+[tasks.lint-markdown]
+description = "Check markdown files for errors and warnings"
+command = "markdownlint-cli2"
+args = ["**/*.md", "!target"]
+
 [tasks.check]
 description = "Check code for errors and warnings"
 command = "cargo"
-args = [
-  "check",
-  "--all-targets",
-  "--no-default-features",
-  "${ALL_FEATURES_FLAG}",
-]
+args = ["check", "--all-targets", "--all-features"]
 
 [tasks.build]
 description = "Compile the project"
 command = "cargo"
-args = [
-  "build",
-  "--all-targets",
-  "--no-default-features",
-  "${ALL_FEATURES_FLAG}",
-]
+args = ["build", "--all-targets", "--all-features"]
 
 [tasks.clippy]
 description = "Run Clippy for linting"
@@ -81,41 +69,45 @@ command = "cargo"
 args = [
   "clippy",
   "--all-targets",
+  "--all-features",
   "--tests",
   "--benches",
-  "--no-default-features",
-  "${ALL_FEATURES_FLAG}",
   "--",
   "-D",
   "warnings",
 ]
 
+[tasks.install-nextest]
+description = "Install cargo-nextest"
+install_crate = { crate_name = "cargo-nextest", binary = "cargo-nextest", test_arg = "--help" }
+
 [tasks.test]
 description = "Run tests"
-dependencies = ["test-doc"]
+run_task = { name = ["test-lib", "test-doc"] }
+
+[tasks.test-lib]
+description = "Run default tests"
+dependencies = ["install-nextest"]
 command = "cargo"
-args = [
-  "test",
-  "--all-targets",
-  "--no-default-features",
-  "${ALL_FEATURES_FLAG}",
-]
+args = ["nextest", "run", "--all-targets", "--all-features"]
 
 [tasks.test-doc]
 description = "Run documentation tests"
 command = "cargo"
-args = ["test", "--doc", "--no-default-features", "${ALL_FEATURES_FLAG}"]
+args = ["test", "--doc", "--all-features"]
 
 [tasks.test-backend]
 # takes a command line parameter to specify the backend to test (e.g. "crossterm")
 description = "Run backend-specific tests"
+dependencies = ["install-nextest"]
 command = "cargo"
 args = [
-  "test",
+  "nextest",
+  "run",
   "--all-targets",
   "--no-default-features",
   "--features",
-  "${ALL_FEATURES},${@}",
+  "${NON_BACKEND_FEATURES},${@}",
 ]
 
 [tasks.coverage]
@@ -126,8 +118,7 @@ args = [
   "--lcov",
   "--output-path",
   "target/lcov.info",
-  "--no-default-features",
-  "${ALL_FEATURES_FLAG}",
+  "--all-features",
 ]
 
 [tasks.run-example]

README.md

@@ -21,40 +21,32 @@
 
 <!-- cargo-rdme start -->
 
-![Demo](https://raw.githubusercontent.com/ratatui-org/ratatui/b33c878808c4c40591d7a2d9f9d94d6fee95a96f/examples/demo2.gif)
+![Demo](https://github.com/ratatui/ratatui/blob/87ae72dbc756067c97f6400d3e2a58eeb383776e/examples/demo2-destroy.gif?raw=true)
 
 <div align="center">
 
-[![Crate Badge]](https://crates.io/crates/ratatui)
-[![License Badge]](./LICENSE)
-[![CI Badge]](https://github.com/ratatui-org/ratatui/actions?query=workflow%3ACI+)
-[![Docs Badge]](https://docs.rs/crate/ratatui/)<br>
-[![Dependencies Badge]](https://deps.rs/repo/github/ratatui-org/ratatui)
-[![Codecov Badge]](https://app.codecov.io/gh/ratatui-org/ratatui)
-[![Discord Badge]](https://discord.gg/pMCEU9hNEj)
-[![Matrix Badge]](https://matrix.to/#/#ratatui:matrix.org)<br>
+[![Crate Badge]][Crate] [![Docs Badge]][API Docs] [![CI Badge]][CI Workflow] [![Deps.rs
+Badge]][Deps.rs]<br> [![Codecov Badge]][Codecov] [![License Badge]](./LICENSE) [![Sponsors
+Badge]][GitHub Sponsors]<br> [![Discord Badge]][Discord Server] [![Matrix Badge]][Matrix]
+[![Forum Badge]][Forum]<br>
 
-[Documentation](https://docs.rs/ratatui)
-· [Ratatui Website](https://ratatui.rs)
-· [Examples](https://github.com/ratatui-org/ratatui/tree/main/examples)
-· [Report a bug](https://github.com/ratatui-org/ratatui/issues/new?labels=bug&projects=&template=bug_report.md)
-· [Request a Feature](https://github.com/ratatui-org/ratatui/issues/new?labels=enhancement&projects=&template=feature_request.md)
-· [Send a Pull Request](https://github.com/ratatui-org/ratatui/compare)
+[Ratatui Website] · [API Docs] · [Examples] · [Changelog] · [Breaking Changes]<br>
+[Contributing] · [Report a bug] · [Request a Feature] · [Create a Pull Request]
 
 </div>
 
 # Ratatui
 
-[Ratatui] is a crate for cooking up terminal user interfaces in Rust. It is a lightweight
-library that provides a set of widgets and utilities to build complex Rust TUIs. Ratatui was
-forked from the [tui-rs] crate in 2023 in order to continue its development.
+[Ratatui][Ratatui Website] is a crate for cooking up terminal user interfaces in Rust. It is a
+lightweight library that provides a set of widgets and utilities to build complex Rust TUIs.
+Ratatui was forked from the [tui-rs] crate in 2023 in order to continue its development.
 
 ## Installation
 
-Add `ratatui` and `crossterm` as dependencies to your cargo.toml:
+Add `ratatui` as a dependency to your cargo.toml:
 
 ```shell
-cargo add ratatui crossterm
+cargo add ratatui
 ```
 
 Ratatui uses [Crossterm] by default as it works on most platforms. See the [Installation]
@@ -66,28 +58,30 @@ section of the [Ratatui Website] for more details on how to use other backends (
 Ratatui is based on the principle of immediate rendering with intermediate buffers. This means
 that for each frame, your app must render all widgets that are supposed to be part of the UI.
 This is in contrast to the retained mode style of rendering where widgets are updated and then
-automatically redrawn on the next frame. See the [Rendering] section of the [Ratatui Website] for
-more info.
+automatically redrawn on the next frame. See the [Rendering] section of the [Ratatui Website]
+for more info.
+
+You can also watch the [FOSDEM 2024 talk] about Ratatui which gives a brief introduction to
+terminal user interfaces and showcases the features of Ratatui, along with a hello world demo.
 
 ## Other documentation
 
 - [Ratatui Website] - explains the library's concepts and provides step-by-step tutorials
+- [Ratatui Forum][Forum] - a place to ask questions and discuss the library
+- [API Docs] - the full API documentation for the library on docs.rs.
 - [Examples] - a collection of examples that demonstrate how to use the library.
-- [API Documentation] - the full API documentation for the library on docs.rs.
-- [Changelog] - generated by [git-cliff] utilizing [Conventional Commits].
 - [Contributing] - Please read this if you are interested in contributing to the project.
+- [Changelog] - generated by [git-cliff] utilizing [Conventional Commits].
 - [Breaking Changes] - a list of breaking changes in the library.
 
 ## Quickstart
 
 The following example demonstrates the minimal amount of code necessary to setup a terminal and
 render "Hello World!". The full code for this example which contains a little more detail is in
-[hello_world.rs]. For more guidance on different ways to structure your application see the
-[Application Patterns] and [Hello World tutorial] sections in the [Ratatui Website] and the various
-[Examples]. There are also several starter templates available:
-
-- [template]
-- [async-template] (book and template)
+the [Examples] directory. For more guidance on different ways to structure your application see
+the [Application Patterns] and [Hello World tutorial] sections in the [Ratatui Website] and the
+various [Examples]. There are also several starter templates available in the [templates]
+repository.
 
 Every application built with `ratatui` needs to implement the following steps:
 
@@ -117,8 +111,9 @@ module] and the [Backends] section of the [Ratatui Website] for more info.
 
 The drawing logic is delegated to a closure that takes a [`Frame`] instance as argument. The
 [`Frame`] provides the size of the area to draw to and allows the app to render any [`Widget`]
-using the provided [`render_widget`] method. See the [Widgets] section of the [Ratatui Website] for
-more info.
+using the provided [`render_widget`] method. After this closure returns, a diff is performed and
+only the changes are drawn to the terminal. See the [Widgets] section of the [Ratatui Website]
+for more info.
 
 ### Handling events
 
@@ -131,12 +126,19 @@ Website] for more info. For example, if you are using [Crossterm], you can use t
 
 ```rust
 use std::io::{self, stdout};
-use crossterm::{
-    event::{self, Event, KeyCode},
-    ExecutableCommand,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen}
+
+use ratatui::{
+    backend::CrosstermBackend,
+    crossterm::{
+        event::{self, Event, KeyCode},
+        terminal::{
+            disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen,
+        },
+        ExecutableCommand,
+    },
+    widgets::{Block, Paragraph},
+    Frame, Terminal,
 };
-use ratatui::{prelude::*, widgets::*};
 
 fn main() -> io::Result<()> {
     enable_raw_mode()?;
@@ -160,15 +162,14 @@ fn handle_events() -> io::Result<bool> {
             if key.kind == event::KeyEventKind::Press && key.code == KeyCode::Char('q') {
                 return Ok(true);
             }
-       }
+        }
     }
     Ok(false)
 }
 
 fn ui(frame: &mut Frame) {
     frame.render_widget(
-        Paragraph::new("Hello World!")
-            .block(Block::default().title("Greeting").borders(Borders::ALL)),
+        Paragraph::new("Hello World!").block(Block::bordered().title("Greeting")),
         frame.size(),
     );
 }
@@ -186,40 +187,27 @@ area. This lets you describe a responsive terminal UI by nesting layouts. See th
 section of the [Ratatui Website] for more info.
 
 ```rust
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    layout::{Constraint, Layout},
+    widgets::Block,
+    Frame,
+};
 
 fn ui(frame: &mut Frame) {
-    let main_layout = Layout::new(
-        Direction::Vertical,
-        [
-            Constraint::Length(1),
-            Constraint::Min(0),
-            Constraint::Length(1),
-        ]
-    )
-    .split(frame.size());
-    frame.render_widget(
-        Block::new().borders(Borders::TOP).title("Title Bar"),
-        main_layout[0],
-    );
-    frame.render_widget(
-        Block::new().borders(Borders::TOP).title("Status Bar"),
-        main_layout[2],
-    );
+    let [title_area, main_area, status_area] = Layout::vertical([
+        Constraint::Length(1),
+        Constraint::Min(0),
+        Constraint::Length(1),
+    ])
+    .areas(frame.size());
+    let [left_area, right_area] =
+        Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)])
+            .areas(main_area);
 
-    let inner_layout = Layout::new(
-        Direction::Horizontal,
-        [Constraint::Percentage(50), Constraint::Percentage(50)]
-    )
-    .split(main_layout[1]);
-    frame.render_widget(
-        Block::default().borders(Borders::ALL).title("Left"),
-        inner_layout[0],
-    );
-    frame.render_widget(
-        Block::default().borders(Borders::ALL).title("Right"),
-        inner_layout[1],
-    );
+    frame.render_widget(Block::bordered().title("Title Bar"), title_area);
+    frame.render_widget(Block::bordered().title("Status Bar"), status_area);
+    frame.render_widget(Block::bordered().title("Left"), left_area);
+    frame.render_widget(Block::bordered().title("Right"), right_area);
 }
 ```
 
@@ -240,48 +228,41 @@ short-hand syntax to apply a style to widgets and text. See the [Styling Text] s
 [Ratatui Website] for more info.
 
 ```rust
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    layout::{Constraint, Layout},
+    style::{Color, Modifier, Style, Stylize},
+    text::{Line, Span},
+    widgets::{Block, Paragraph},
+    Frame,
+};
 
 fn ui(frame: &mut Frame) {
-    let areas = Layout::new(
-        Direction::Vertical,
-        [
-            Constraint::Length(1),
-            Constraint::Length(1),
-            Constraint::Length(1),
-            Constraint::Length(1),
-            Constraint::Min(0),
-        ]
-    )
-    .split(frame.size());
+    let areas = Layout::vertical([Constraint::Length(1); 4]).split(frame.size());
 
-    let span1 = Span::raw("Hello ");
-    let span2 = Span::styled(
-        "World",
-        Style::new()
-            .fg(Color::Green)
-            .bg(Color::White)
-            .add_modifier(Modifier::BOLD),
-    );
-    let span3 = "!".red().on_light_yellow().italic();
+    let line = Line::from(vec![
+        Span::raw("Hello "),
+        Span::styled(
+            "World",
+            Style::new()
+                .fg(Color::Green)
+                .bg(Color::White)
+                .add_modifier(Modifier::BOLD),
+        ),
+        "!".red().on_light_yellow().italic(),
+    ]);
+    frame.render_widget(line, areas[0]);
 
-    let line = Line::from(vec![span1, span2, span3]);
-    let text: Text = Text::from(vec![line]);
+    // using the short-hand syntax and implicit conversions
+    let paragraph = Paragraph::new("Hello World!".red().on_white().bold());
+    frame.render_widget(paragraph, areas[1]);
 
-    frame.render_widget(Paragraph::new(text), areas[0]);
-    // or using the short-hand syntax and implicit conversions
-    frame.render_widget(
-        Paragraph::new("Hello World!".red().on_white().bold()),
-        areas[1],
-    );
+    // style the whole widget instead of just the text
+    let paragraph = Paragraph::new("Hello World!").style(Style::new().red().on_white());
+    frame.render_widget(paragraph, areas[2]);
 
-    // to style the whole widget instead of just the text
-    frame.render_widget(
-        Paragraph::new("Hello World!").style(Style::new().red().on_white()),
-        areas[2],
-    );
-    // or using the short-hand syntax
-    frame.render_widget(Paragraph::new("Hello World!").blue().on_yellow(), areas[3]);
+    // use the simpler short-hand syntax
+    let paragraph = Paragraph::new("Hello World!").blue().on_yellow();
+    frame.render_widget(paragraph, areas[3]);
 }
 ```
 
@@ -299,18 +280,21 @@ Running this example produces the following output:
 [Handling Events]: https://ratatui.rs/concepts/event-handling/
 [Layout]: https://ratatui.rs/how-to/layout/
 [Styling Text]: https://ratatui.rs/how-to/render/style-text/
-[template]: https://github.com/ratatui-org/template
-[async-template]: https://ratatui-org.github.io/async-template
-[Examples]: https://github.com/ratatui-org/ratatui/tree/main/examples
+[templates]: https://github.com/ratatui/templates/
+[Examples]: https://github.com/ratatui/ratatui/tree/main/examples/README.md
+[Report a bug]: https://github.com/ratatui/ratatui/issues/new?labels=bug&projects=&template=bug_report.md
+[Request a Feature]: https://github.com/ratatui/ratatui/issues/new?labels=enhancement&projects=&template=feature_request.md
+[Create a Pull Request]: https://github.com/ratatui/ratatui/compare
 [git-cliff]: https://git-cliff.org
 [Conventional Commits]: https://www.conventionalcommits.org
-[API Documentation]: https://docs.rs/ratatui
-[Changelog]: https://github.com/ratatui-org/ratatui/blob/main/CHANGELOG.md
-[Contributing]: https://github.com/ratatui-org/ratatui/blob/main/CONTRIBUTING.md
-[Breaking Changes]: https://github.com/ratatui-org/ratatui/blob/main/BREAKING-CHANGES.md
-[docsrs-hello]: https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-hello.png?raw=true
-[docsrs-layout]: https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-layout.png?raw=true
-[docsrs-styling]: https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-styling.png?raw=true
+[API Docs]: https://docs.rs/ratatui
+[Changelog]: https://github.com/ratatui/ratatui/blob/main/CHANGELOG.md
+[Contributing]: https://github.com/ratatui/ratatui/blob/main/CONTRIBUTING.md
+[Breaking Changes]: https://github.com/ratatui/ratatui/blob/main/BREAKING-CHANGES.md
+[FOSDEM 2024 talk]: https://www.youtube.com/watch?v=NU0q6NOLJ20
+[docsrs-hello]: https://github.com/ratatui/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-hello.png?raw=true
+[docsrs-layout]: https://github.com/ratatui/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-layout.png?raw=true
+[docsrs-styling]: https://github.com/ratatui/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-styling.png?raw=true
 [`Frame`]: terminal::Frame
 [`render_widget`]: terminal::Frame::render_widget
 [`Widget`]: widgets::Widget
@@ -324,24 +308,28 @@ Running this example produces the following output:
 [`Backend`]: backend::Backend
 [`backend` module]: backend
 [`crossterm::event`]: https://docs.rs/crossterm/latest/crossterm/event/index.html
-[Ratatui]: https://ratatui.rs
+[Crate]: https://crates.io/crates/ratatui
 [Crossterm]: https://crates.io/crates/crossterm
 [Termion]: https://crates.io/crates/termion
 [Termwiz]: https://crates.io/crates/termwiz
 [tui-rs]: https://crates.io/crates/tui
-[hello_world.rs]: https://github.com/ratatui-org/ratatui/blob/main/examples/hello_world.rs
-[Crate Badge]: https://img.shields.io/crates/v/ratatui?logo=rust&style=flat-square
-[CI Badge]:
-    https://img.shields.io/github/actions/workflow/status/ratatui-org/ratatui/ci.yml?style=flat-square&logo=github
-[Codecov Badge]:
-    https://img.shields.io/codecov/c/github/ratatui-org/ratatui?logo=codecov&style=flat-square&token=BAQ8SOKEST
-[Dependencies Badge]: https://deps.rs/repo/github/ratatui-org/ratatui/status.svg?style=flat-square
-[Discord Badge]:
-    https://img.shields.io/discord/1070692720437383208?label=discord&logo=discord&style=flat-square
-[Docs Badge]: https://img.shields.io/docsrs/ratatui?logo=rust&style=flat-square
-[License Badge]: https://img.shields.io/crates/l/ratatui?style=flat-square
-[Matrix Badge]:
-    https://img.shields.io/matrix/ratatui-general%3Amatrix.org?style=flat-square&logo=matrix&label=Matrix
+[GitHub Sponsors]: https://github.com/sponsors/ratatui
+[Crate Badge]: https://img.shields.io/crates/v/ratatui?logo=rust&style=flat-square&logoColor=E05D44&color=E05D44
+[License Badge]: https://img.shields.io/crates/l/ratatui?style=flat-square&color=1370D3
+[CI Badge]: https://img.shields.io/github/actions/workflow/status/ratatui/ratatui/ci.yml?style=flat-square&logo=github
+[CI Workflow]: https://github.com/ratatui/ratatui/actions/workflows/ci.yml
+[Codecov Badge]: https://img.shields.io/codecov/c/github/ratatui/ratatui?logo=codecov&style=flat-square&token=BAQ8SOKEST&color=C43AC3&logoColor=C43AC3
+[Codecov]: https://app.codecov.io/gh/ratatui/ratatui
+[Deps.rs Badge]: https://deps.rs/repo/github/ratatui/ratatui/status.svg?style=flat-square
+[Deps.rs]: https://deps.rs/repo/github/ratatui/ratatui
+[Discord Badge]: https://img.shields.io/discord/1070692720437383208?label=discord&logo=discord&style=flat-square&color=1370D3&logoColor=1370D3
+[Discord Server]: https://discord.gg/pMCEU9hNEj
+[Docs Badge]: https://img.shields.io/docsrs/ratatui?logo=rust&style=flat-square&logoColor=E05D44
+[Matrix Badge]: https://img.shields.io/matrix/ratatui-general%3Amatrix.org?style=flat-square&logo=matrix&label=Matrix&color=C43AC3
+[Matrix]: https://matrix.to/#/#ratatui:matrix.org
+[Forum Badge]: https://img.shields.io/discourse/likes?server=https%3A%2F%2Fforum.ratatui.rs&style=flat-square&logo=discourse&label=forum&color=C43AC3
+[Forum]: https://forum.ratatui.rs
+[Sponsors Badge]: https://img.shields.io/github/sponsors/ratatui?logo=github&style=flat-square&color=1370D3
 
 <!-- cargo-rdme end -->
 
@@ -356,17 +344,14 @@ In order to organize ourselves, we currently use a [Discord server](https://disc
 feel free to join and come chat! There is also a [Matrix](https://matrix.org/) bridge available at
 [#ratatui:matrix.org](https://matrix.to/#/#ratatui:matrix.org).
 
-While we do utilize Discord for coordinating, it's not essential for contributing.
-Our primary open-source workflow is centered around GitHub.
-For significant discussions, we rely on GitHub — please open an issue, a discussion or a PR.
+While we do utilize Discord for coordinating, it's not essential for contributing. We have recently
+launched the [Ratatui Forum][Forum], and our primary open-source workflow is centered around GitHub.
+For bugs and features, we rely on GitHub. Please [Report a bug], [Request a Feature] or [Create a
+Pull Request].
 
 Please make sure you read the updated [contributing](./CONTRIBUTING.md) guidelines, especially if
 you are interested in working on a PR or issue opened in the previous repository.
 
-## Rust version requirements
-
-Since version 0.23.0, The Minimum Supported Rust Version (MSRV) of `ratatui` is 1.67.0.
-
 ## Widgets
 
 ### Built in
@@ -390,9 +375,8 @@ The library comes with the following
 - [Table](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Table.html)
 - [Tabs](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Tabs.html)
 
-Each widget has an associated example which can be found in the [examples](./examples/) folder. Run
-each examples with cargo (e.g. to run the gauge example `cargo run --example gauge`), and quit by
-pressing `q`.
+Each widget has an associated example which can be found in the [Examples] folder. Run each example
+with cargo (e.g. to run the gauge example `cargo run --example gauge`), and quit by pressing `q`.
 
 You can also run all examples by running `cargo make run-examples` (requires `cargo-make` that can
 be installed with `cargo install cargo-make`).
@@ -403,8 +387,8 @@ be installed with `cargo install cargo-make`).
   `ratatui::text::Text`
 - [color-to-tui](https://github.com/uttarayan21/color-to-tui) — Parse hex colors to
   `ratatui::style::Color`
-- [rust-tui-template](https://github.com/ratatui-org/rust-tui-template) — A template for
-  bootstrapping a Rust TUI application with Tui-rs & crossterm
+- [templates](https://github.com/ratatui/templates) — Starter templates for
+  bootstrapping a Rust TUI application with Ratatui & crossterm
 - [tui-builder](https://github.com/jkelleyrtp/tui-builder) — Batteries-included MVC framework for
   Tui-rs + Crossterm apps
 - [tui-clap](https://github.com/kegesch/tui-clap-rs) — Use clap-rs together with Tui-rs
@@ -427,7 +411,7 @@ be installed with `cargo install cargo-make`).
 
 ## Apps
 
-Check out [awesome-ratatui](https://github.com/ratatui-org/awesome-ratatui) for a curated list of
+Check out [awesome-ratatui](https://github.com/ratatui/awesome-ratatui) for a curated list of
 awesome apps/libraries built with `ratatui`!
 
 ## Alternatives
@@ -438,7 +422,7 @@ to build text user interfaces in Rust.
 ## Acknowledgments
 
 Special thanks to [**Pavel Fomchenkov**](https://github.com/nawok) for his work in designing **an
-awesome logo** for the ratatui project and ratatui-org organization.
+awesome logo** for the ratatui project and ratatui organization.
 
 ## License
 

RELEASE.md

@@ -12,7 +12,7 @@ actions](.github/workflows/cd.yml) and triggered by pushing a tag.
    ```
 
 1. Switch branches to the images branch and copy demo2.gif to examples/, commit, and push.
-1. Grab the permalink from <https://github.com/ratatui-org/ratatui/blob/images/examples/demo2.gif> and
+1. Grab the permalink from <https://github.com/ratatui/ratatui/blob/images/examples/demo2.gif> and
    append `?raw=true` to redirect to the actual image url. Then update the link in the main README.
    Avoid adding the gif to the git repo as binary files tend to bloat repositories.
 
@@ -23,14 +23,14 @@ actions](.github/workflows/cd.yml) and triggered by pushing a tag.
 1. Commit and push the changes.
 1. Create a new tag: `git tag -a v[X.Y.Z]`
 1. Push the tag: `git push --tags`
-1. Wait for [Continuous Deployment](https://github.com/ratatui-org/ratatui/actions) workflow to
+1. Wait for [Continuous Deployment](https://github.com/ratatui/ratatui/actions) workflow to
    finish.
 
 ## Alpha Releases
 
 Alpha releases are automatically released every Saturday via [cd.yml](./.github/workflows/cd.yml)
 and can be manually be created when necessary by triggering the [Continuous
-Deployment](https://github.com/ratatui-org/ratatui/actions/workflows/cd.yml) workflow.
+Deployment](https://github.com/ratatui/ratatui/actions/workflows/cd.yml) workflow.
 
 We automatically release an alpha release with a patch level bump + alpha.num weekly (and when we
 need to manually). E.g. the last release was 0.22.0, and the most recent alpha release is
@@ -40,5 +40,5 @@ These releases will have whatever happened to be in main at the time of release,
 for apps that need to get releases from crates.io, but may contain more bugs and be generally less
 tested than normal releases.
 
-See [#147](https://github.com/ratatui-org/ratatui/issues/147) and
-[#359](https://github.com/ratatui-org/ratatui/pull/359) for more info on the alpha release process.
+See [#147](https://github.com/ratatui/ratatui/issues/147) and
+[#359](https://github.com/ratatui/ratatui/pull/359) for more info on the alpha release process.

SECURITY.md

@@ -6,4 +6,4 @@ We only support the latest version of this crate.
 
 ## Reporting a Vulnerability
 
-To report secuirity vulnerability, please use the form at https://github.com/ratatui-org/ratatui/security/advisories/new
+To report secuirity vulnerability, please use the form at <https://github.com/ratatui/ratatui/security/advisories/new>

bacon.toml

@@ -44,6 +44,16 @@ command = [
 ]
 need_stdout = true
 
+[jobs.test-unit]
+command = [
+    "cargo", "test",
+    "--lib",
+    "--all-features",
+    "--color", "always",
+    "--", "--color", "always", # see https://github.com/Canop/bacon/issues/124
+]
+need_stdout = true
+
 [jobs.doc]
 command = [
     "cargo", "+nightly", "doc",
@@ -74,7 +84,7 @@ on_success = "job:doc" # so that we don't open the browser at each change
 command = [
     "cargo", "llvm-cov",
     "--lcov", "--output-path", "target/lcov.info",
-    "--all-features", 
+    "--all-features",
     "--color", "always",
 ]
 
@@ -97,4 +107,6 @@ ctrl-c = "job:check-crossterm"
 ctrl-t = "job:check-termion"
 ctrl-w = "job:check-termwiz"
 v = "job:coverage"
-u = "job:coverage-unit-tests-only"
+ctrl-v = "job:coverage-unit-tests-only"
+u = "job:test-unit"
+n = "job:nextest"

benches/main.rs

@@ -0,0 +1,22 @@
+pub mod main {
+    pub mod barchart;
+    pub mod block;
+    pub mod buffer;
+    pub mod line;
+    pub mod list;
+    pub mod paragraph;
+    pub mod rect;
+    pub mod sparkline;
+}
+pub use main::*;
+
+criterion::criterion_main!(
+    barchart::benches,
+    block::benches,
+    buffer::benches,
+    line::benches,
+    list::benches,
+    paragraph::benches,
+    rect::benches,
+    sparkline::benches
+);

benches/main/barchart.rs

@@ -1,4 +1,4 @@
-use criterion::{criterion_group, criterion_main, Bencher, BenchmarkId, Criterion};
+use criterion::{criterion_group, Bencher, BenchmarkId, Criterion};
 use rand::Rng;
 use ratatui::{
     buffer::Buffer,
@@ -8,7 +8,7 @@ use ratatui::{
 };
 
 /// Benchmark for rendering a barchart.
-pub fn barchart(c: &mut Criterion) {
+fn barchart(c: &mut Criterion) {
     let mut group = c.benchmark_group("barchart");
     let mut rng = rand::thread_rng();
 
@@ -59,15 +59,14 @@ pub fn barchart(c: &mut Criterion) {
 fn render(bencher: &mut Bencher, barchart: &BarChart) {
     let mut buffer = Buffer::empty(Rect::new(0, 0, 200, 50));
     // We use `iter_batched` to clone the value in the setup function.
-    // See https://github.com/ratatui-org/ratatui/pull/377.
+    // See https://github.com/ratatui/ratatui/pull/377.
     bencher.iter_batched(
         || barchart.clone(),
         |bench_barchart| {
             bench_barchart.render(buffer.area, &mut buffer);
         },
         criterion::BatchSize::LargeInput,
-    )
+    );
 }
 
 criterion_group!(benches, barchart);
-criterion_main!(benches);

benches/main/block.rs

@@ -1,44 +1,42 @@
-use criterion::{criterion_group, criterion_main, BatchSize, Bencher, BenchmarkId, Criterion};
+use criterion::{criterion_group, BatchSize, Bencher, Criterion};
 use ratatui::{
     buffer::Buffer,
-    layout::Rect,
-    prelude::Alignment,
+    layout::{Alignment, Rect},
     widgets::{
         block::{Position, Title},
-        Block, Borders, Padding, Widget,
+        Block, Padding, Widget,
     },
 };
 
 /// Benchmark for rendering a block.
-pub fn block(c: &mut Criterion) {
+fn block(c: &mut Criterion) {
     let mut group = c.benchmark_group("block");
 
-    for buffer_size in &[
-        Rect::new(0, 0, 100, 50),  // vertically split screen
-        Rect::new(0, 0, 200, 50),  // 1080p fullscreen with medium font
-        Rect::new(0, 0, 256, 256), // Max sized area
+    for (width, height) in [
+        (100, 50),  // vertically split screen
+        (200, 50),  // 1080p fullscreen with medium font
+        (256, 256), // Max sized area
     ] {
-        let buffer_area = buffer_size.area();
+        let buffer_size = Rect::new(0, 0, width, height);
 
         // Render an empty block
         group.bench_with_input(
-            BenchmarkId::new("render_empty", buffer_area),
+            format!("render_empty/{width}x{height}"),
             &Block::new(),
             |b, block| render(b, block, buffer_size),
         );
 
         // Render with all features
         group.bench_with_input(
-            BenchmarkId::new("render_all_feature", buffer_area),
-            &Block::new()
-                .borders(Borders::ALL)
+            format!("render_all_feature/{width}x{height}"),
+            &Block::bordered()
+                .padding(Padding::new(5, 5, 2, 2))
                 .title("test title")
                 .title(
                     Title::from("bottom left title")
                         .alignment(Alignment::Right)
                         .position(Position::Bottom),
-                )
-                .padding(Padding::new(5, 5, 2, 2)),
+                ),
             |b, block| render(b, block, buffer_size),
         );
     }
@@ -47,18 +45,17 @@ pub fn block(c: &mut Criterion) {
 }
 
 /// render the block into a buffer of the given `size`
-fn render(bencher: &mut Bencher, block: &Block, size: &Rect) {
-    let mut buffer = Buffer::empty(*size);
+fn render(bencher: &mut Bencher, block: &Block, size: Rect) {
+    let mut buffer = Buffer::empty(size);
     // We use `iter_batched` to clone the value in the setup function.
-    // See https://github.com/ratatui-org/ratatui/pull/377.
+    // See https://github.com/ratatui/ratatui/pull/377.
     bencher.iter_batched(
         || block.to_owned(),
         |bench_block| {
             bench_block.render(buffer.area, &mut buffer);
         },
         BatchSize::SmallInput,
-    )
+    );
 }
 
 criterion_group!(benches, block);
-criterion_main!(benches);

benches/main/buffer.rs

@@ -0,0 +1,65 @@
+use criterion::{black_box, BenchmarkId, Criterion};
+use ratatui::{
+    buffer::{Buffer, Cell},
+    layout::Rect,
+    text::Line,
+};
+
+criterion::criterion_group!(benches, empty, filled, with_lines);
+
+const fn rect(size: u16) -> Rect {
+    Rect {
+        x: 0,
+        y: 0,
+        width: size,
+        height: size,
+    }
+}
+
+fn empty(c: &mut Criterion) {
+    let mut group = c.benchmark_group("buffer/empty");
+    for size in [16, 64, 255] {
+        let area = rect(size);
+        group.bench_with_input(BenchmarkId::from_parameter(size), &area, |b, &area| {
+            b.iter(|| {
+                let _buffer = Buffer::empty(black_box(area));
+            });
+        });
+    }
+    group.finish();
+}
+
+/// This likely should have the same performance as `empty`, but it's here for completeness
+/// and to catch any potential performance regressions.
+fn filled(c: &mut Criterion) {
+    let mut group = c.benchmark_group("buffer/filled");
+    for size in [16, 64, 255] {
+        let area = rect(size);
+        let cell = Cell::new("AAAA"); // simulate a multi-byte character
+        group.bench_with_input(
+            BenchmarkId::from_parameter(size),
+            &(area, cell),
+            |b, (area, cell)| {
+                b.iter(|| {
+                    let _buffer = Buffer::filled(black_box(*area), cell.clone());
+                });
+            },
+        );
+    }
+    group.finish();
+}
+
+fn with_lines(c: &mut Criterion) {
+    let mut group = c.benchmark_group("buffer/with_lines");
+    for size in [16, 64, 255] {
+        let word_count = 50;
+        let lines = fakeit::words::sentence(word_count);
+        let lines = lines.lines().map(Line::from);
+        group.bench_with_input(BenchmarkId::from_parameter(size), &lines, |b, lines| {
+            b.iter(|| {
+                let _buffer = Buffer::with_lines(black_box(lines.clone()));
+            });
+        });
+    }
+    group.finish();
+}

benches/main/line.rs

@@ -0,0 +1,38 @@
+use std::hint::black_box;
+
+use criterion::{criterion_group, Criterion};
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Rect},
+    style::Stylize,
+    text::Line,
+    widgets::Widget,
+};
+
+fn line_render(criterion: &mut Criterion) {
+    for alignment in [Alignment::Left, Alignment::Center, Alignment::Right] {
+        let mut group = criterion.benchmark_group(format!("line_render/{alignment}"));
+        group.sample_size(1000);
+
+        let line = &Line::from(vec![
+            "This".red(),
+            " ".green(),
+            "is".italic(),
+            " ".blue(),
+            "SPARTA!!".bold(),
+        ])
+        .alignment(alignment);
+
+        for width in [0, 3, 4, 6, 7, 10, 42] {
+            let area = Rect::new(0, 0, width, 1);
+
+            group.bench_function(width.to_string(), |bencher| {
+                let mut buffer = Buffer::empty(area);
+                bencher.iter(|| black_box(line).render(area, &mut buffer));
+            });
+        }
+        group.finish();
+    }
+}
+
+criterion_group!(benches, line_render);

benches/main/list.rs

@@ -1,4 +1,4 @@
-use criterion::{criterion_group, criterion_main, BatchSize, Bencher, BenchmarkId, Criterion};
+use criterion::{criterion_group, BatchSize, Bencher, BenchmarkId, Criterion};
 use ratatui::{
     buffer::Buffer,
     layout::Rect,
@@ -7,7 +7,7 @@ use ratatui::{
 
 /// Benchmark for rendering a list.
 /// It only benchmarks the render with a different amount of items.
-pub fn list(c: &mut Criterion) {
+fn list(c: &mut Criterion) {
     let mut group = c.benchmark_group("list");
 
     for line_count in [64, 2048, 16384] {
@@ -33,7 +33,7 @@ pub fn list(c: &mut Criterion) {
                     ListState::default()
                         .with_offset(line_count / 2)
                         .with_selected(Some(line_count / 2)),
-                )
+                );
             },
         );
     }
@@ -45,29 +45,28 @@ pub fn list(c: &mut Criterion) {
 fn render(bencher: &mut Bencher, list: &List) {
     let mut buffer = Buffer::empty(Rect::new(0, 0, 200, 50));
     // We use `iter_batched` to clone the value in the setup function.
-    // See https://github.com/ratatui-org/ratatui/pull/377.
+    // See https://github.com/ratatui/ratatui/pull/377.
     bencher.iter_batched(
         || list.to_owned(),
         |bench_list| {
             Widget::render(bench_list, buffer.area, &mut buffer);
         },
         BatchSize::LargeInput,
-    )
+    );
 }
 
 /// render the list into a common size buffer with a state
 fn render_stateful(bencher: &mut Bencher, list: &List, mut state: ListState) {
     let mut buffer = Buffer::empty(Rect::new(0, 0, 200, 50));
     // We use `iter_batched` to clone the value in the setup function.
-    // See https://github.com/ratatui-org/ratatui/pull/377.
+    // See https://github.com/ratatui/ratatui/pull/377.
     bencher.iter_batched(
         || list.to_owned(),
         |bench_list| {
             StatefulWidget::render(bench_list, buffer.area, &mut buffer, &mut state);
         },
         BatchSize::LargeInput,
-    )
+    );
 }
 
 criterion_group!(benches, list);
-criterion_main!(benches);

benches/main/paragraph.rs

@@ -1,6 +1,4 @@
-use criterion::{
-    black_box, criterion_group, criterion_main, BatchSize, Bencher, BenchmarkId, Criterion,
-};
+use criterion::{black_box, criterion_group, BatchSize, Bencher, BenchmarkId, Criterion};
 use ratatui::{
     buffer::Buffer,
     layout::Rect,
@@ -17,15 +15,15 @@ const WRAP_WIDTH: u16 = 100;
 /// Benchmark for rendering a paragraph with a given number of lines. The design of this benchmark
 /// allows comparison of the performance of rendering a paragraph with different numbers of lines.
 /// as well as comparing with the various settings on the scroll and wrap features.
-pub fn paragraph(c: &mut Criterion) {
+fn paragraph(c: &mut Criterion) {
     let mut group = c.benchmark_group("paragraph");
-    for &line_count in [64, 2048, MAX_SCROLL_OFFSET].iter() {
+    for line_count in [64, 2048, MAX_SCROLL_OFFSET] {
         let lines = random_lines(line_count);
         let lines = lines.as_str();
 
         // benchmark that measures the overhead of creating a paragraph separately from rendering
         group.bench_with_input(BenchmarkId::new("new", line_count), lines, |b, lines| {
-            b.iter(|| Paragraph::new(black_box(lines)))
+            b.iter(|| Paragraph::new(black_box(lines)));
         });
 
         // render the paragraph with no scroll
@@ -38,14 +36,14 @@ pub fn paragraph(c: &mut Criterion) {
         // scroll the paragraph by half the number of lines and render
         group.bench_with_input(
             BenchmarkId::new("render_scroll_half", line_count),
-            &Paragraph::new(lines).scroll((0u16, line_count / 2)),
+            &Paragraph::new(lines).scroll((0, line_count / 2)),
             |bencher, paragraph| render(bencher, paragraph, NO_WRAP_WIDTH),
         );
 
         // scroll the paragraph by the full number of lines and render
         group.bench_with_input(
             BenchmarkId::new("render_scroll_full", line_count),
-            &Paragraph::new(lines).scroll((0u16, line_count)),
+            &Paragraph::new(lines).scroll((0, line_count)),
             |bencher, paragraph| render(bencher, paragraph, NO_WRAP_WIDTH),
         );
 
@@ -61,7 +59,7 @@ pub fn paragraph(c: &mut Criterion) {
             BenchmarkId::new("render_wrap_scroll_full", line_count),
             &Paragraph::new(lines)
                 .wrap(Wrap { trim: false })
-                .scroll((0u16, line_count)),
+                .scroll((0, line_count)),
             |bencher, paragraph| render(bencher, paragraph, WRAP_WIDTH),
         );
     }
@@ -72,14 +70,14 @@ pub fn paragraph(c: &mut Criterion) {
 fn render(bencher: &mut Bencher, paragraph: &Paragraph, width: u16) {
     let mut buffer = Buffer::empty(Rect::new(0, 0, width, 50));
     // We use `iter_batched` to clone the value in the setup function.
-    // See https://github.com/ratatui-org/ratatui/pull/377.
+    // See https://github.com/ratatui/ratatui/pull/377.
     bencher.iter_batched(
         || paragraph.to_owned(),
         |bench_paragraph| {
             bench_paragraph.render(buffer.area, &mut buffer);
         },
         BatchSize::LargeInput,
-    )
+    );
 }
 
 /// Create a string with the given number of lines filled with nonsense words
@@ -87,11 +85,10 @@ fn render(bencher: &mut Bencher, paragraph: &Paragraph, width: u16) {
 /// English language has about 5.1 average characters per word so including the space between words
 /// this should emit around 200 characters per paragraph on average.
 fn random_lines(count: u16) -> String {
-    let count = count as i64;
+    let count = i64::from(count);
     let sentence_count = 3;
     let word_count = 11;
     fakeit::words::paragraph(count, sentence_count, word_count, "\n".into())
 }
 
 criterion_group!(benches, paragraph);
-criterion_main!(benches);

benches/main/rect.rs

@@ -0,0 +1,24 @@
+use criterion::{black_box, criterion_group, BenchmarkId, Criterion};
+use ratatui::layout::Rect;
+
+fn rect_rows_benchmark(c: &mut Criterion) {
+    let rect_sizes = vec![
+        Rect::new(0, 0, 1, 16),
+        Rect::new(0, 0, 1, 1024),
+        Rect::new(0, 0, 1, 65535),
+    ];
+    let mut group = c.benchmark_group("rect_rows");
+    for rect in rect_sizes {
+        group.bench_with_input(BenchmarkId::new("rows", rect.height), &rect, |b, rect| {
+            b.iter(|| {
+                for row in rect.rows() {
+                    // Perform any necessary operations on each row
+                    black_box(row);
+                }
+            });
+        });
+    }
+    group.finish();
+}
+
+criterion_group!(benches, rect_rows_benchmark);

benches/main/sparkline.rs

@@ -1,4 +1,4 @@
-use criterion::{criterion_group, criterion_main, Bencher, BenchmarkId, Criterion};
+use criterion::{criterion_group, Bencher, BenchmarkId, Criterion};
 use rand::Rng;
 use ratatui::{
     buffer::Buffer,
@@ -7,7 +7,7 @@ use ratatui::{
 };
 
 /// Benchmark for rendering a sparkline.
-pub fn sparkline(c: &mut Criterion) {
+fn sparkline(c: &mut Criterion) {
     let mut group = c.benchmark_group("sparkline");
     let mut rng = rand::thread_rng();
 
@@ -31,15 +31,14 @@ pub fn sparkline(c: &mut Criterion) {
 fn render(bencher: &mut Bencher, sparkline: &Sparkline) {
     let mut buffer = Buffer::empty(Rect::new(0, 0, 200, 50));
     // We use `iter_batched` to clone the value in the setup function.
-    // See https://github.com/ratatui-org/ratatui/pull/377.
+    // See https://github.com/ratatui/ratatui/pull/377.
     bencher.iter_batched(
         || sparkline.clone(),
         |bench_sparkline| {
             bench_sparkline.render(buffer.area, &mut buffer);
         },
         criterion::BatchSize::LargeInput,
-    )
+    );
 }
 
 criterion_group!(benches, sparkline);
-criterion_main!(benches);

cliff.toml

@@ -1,4 +1,9 @@
-# configuration for https://github.com/orhun/git-cliff
+# git-cliff ~ configuration file
+# https://git-cliff.org/docs/configuration
+
+[remote.github]
+owner = "ratatui"
+repo = "ratatui"
 
 [changelog]
 # changelog header
@@ -6,6 +11,8 @@ header = """
 # Changelog
 
 All notable changes to this project will be documented in this file.
+<!-- ignore lint rules that are often triggered by content generated from commits / git-cliff -->
+<!-- markdownlint-disable line-length no-bare-urls ul-style emphasis-style -->
 """
 # template for the changelog body
 # https://keats.github.io/tera/docs/#introduction
@@ -17,19 +24,25 @@ body = """
 {%- if not version %}
 ## [unreleased]
 {% else -%}
-## [{{ version }}](https://github.com/ratatui-org/ratatui/releases/tag/{{ version }}) - {{ timestamp | date(format="%Y-%m-%d") }}
+## [{{ version }}](https://github.com/ratatui/ratatui/releases/tag/{{ version }}) - {{ timestamp | date(format="%Y-%m-%d") }}
 {% endif -%}
 
 {% macro commit(commit) -%}
-- [{{ commit.id | truncate(length=7, end="") }}]({{ "https://github.com/ratatui-org/ratatui/commit/" ~ commit.id }})
-  *({{commit.scope | default(value = "uncategorized") | lower }})* {{ commit.message | upper_first }}
+- [{{ commit.id | truncate(length=7, end="") }}]({{ "https://github.com/ratatui/ratatui/commit/" ~ commit.id }}) \
+  *({{commit.scope | default(value = "uncategorized") | lower }})* {{ commit.message | upper_first | trim }}\
+  {% if commit.github.username %} by @{{ commit.github.username }}{%- endif -%}\
+  {% if commit.github.pr_number %} in [#{{ commit.github.pr_number }}]({{ self::remote_url() }}/pull/{{ commit.github.pr_number }}){%- endif %}\
 {%- if commit.breaking %} [**breaking**]{% endif %}
-{%- if commit.body %}
-
-  ````text {#- 4 backticks escape any backticks in body #}
-  {{commit.body | indent(prefix="  ") }}
-  ````
+{%- if commit.body %}\n\n{{ commit.body | indent(prefix="  > ", first=true, blank=true) }}
 {%- endif %}
+{%- for footer in commit.footers %}\n
+{%- if footer.token != "Signed-off-by" and footer.token != "Co-authored-by" %}
+  >
+{{ footer.token | indent(prefix="  > ", first=true, blank=true) }}
+{{- footer.separator }}
+{{- footer.value| indent(prefix="  > ", first=false, blank=true)  }}
+{%- endif %}
+{%- endfor %}
 {% endmacro -%}
 
 {% for group, commits in commits | group_by(attribute="group") %}
@@ -43,6 +56,28 @@ body = """
 {%- endif -%}
 {%- endfor -%}
 {%- endfor %}
+
+{% if github.contributors | filter(attribute="is_first_time", value=true) | length != 0 %}
+### New Contributors
+{%- endif %}\
+{% for contributor in github.contributors | filter(attribute="is_first_time", value=true) %}
+* @{{ contributor.username }} made their first contribution
+{%- if contributor.pr_number %} in \
+[#{{ contributor.pr_number }}]({{ self::remote_url() }}/pull/{{ contributor.pr_number }}) \
+{%- endif %}
+{%- endfor -%}
+
+{% if version %}
+{% if previous.version %}
+**Full Changelog**: {{ self::remote_url() }}/compare/{{ previous.version }}...{{ version }}
+{% endif %}
+{% else -%}
+  {% raw %}\n{% endraw %}
+{% endif %}
+
+{%- macro remote_url() -%}
+https://github.com/{{ remote.github.owner }}/{{ remote.github.repo }}\
+{% endmacro %}
 """
 
 
@@ -52,6 +87,11 @@ trim = false
 footer = """
 <!-- generated by git-cliff -->
 """
+postprocessors = [
+  { pattern = '<!-- Please read CONTRIBUTING.md before submitting any pull request. -->', replace = "" },
+  { pattern = '>---+\n', replace = '' },
+  { pattern = ' +\n', replace = "\n" },
+]
 
 [git]
 # parse the commits based on https://www.conventionalcommits.org
@@ -62,7 +102,7 @@ filter_unconventional = true
 split_commits = false
 # regex for preprocessing the commit messages
 commit_preprocessors = [
-  { pattern = '\((\w+\s)?#([0-9]+)\)', replace = "([#${2}](https://github.com/ratatui-org/ratatui/issues/${2}))" },
+  { pattern = '\((\w+\s)?#([0-9]+)\)', replace = "" },
   { pattern = '(better safe shared layout cache)', replace = "perf(layout): ${1}" },
   { pattern = '(Clarify README.md)', replace = "docs(readme): ${1}" },
   { pattern = '(Update README.md)', replace = "docs(readme): ${1}" },
@@ -91,6 +131,7 @@ commit_parsers = [
   { message = "^(Buffer|buffer|Frame|frame|Gauge|gauge|Paragraph|paragraph):", group = "<!-- 07 -->Miscellaneous Tasks" },
   { message = "^\\[", group = "<!-- 07 -->Miscellaneous Tasks" },
 ]
+
 # protect breaking changes from being skipped due to matching a skipping commit_parser
 protect_breaking_commits = false
 # filter out the commits that are not matched by commit parsers

clippy.toml

@@ -0,0 +1,17 @@
+avoid-breaking-exported-api = false
+
+# https://rust-lang.github.io/rust-clippy/master/index.html#/multiple_crate_versions
+# ratatui -> bitflags v2.3
+# termwiz -> wezterm-blob-leases -> mac_address -> nix -> bitflags v1.3.2
+# crossterm -> all the windows- deps https://github.com/ratatui/ratatui/pull/1064#issuecomment-2078848980
+allowed-duplicate-crates = [
+    "bitflags",
+    "windows-targets",
+    "windows_aarch64_gnullvm",
+    "windows_aarch64_msvc",
+    "windows_i686_gnu",
+    "windows_i686_msvc",
+    "windows_x86_64_gnu",
+    "windows_x86_64_gnullvm",
+    "windows_x86_64_msvc",
+]

deny.toml

@@ -1,9 +1,7 @@
 # configuration for https://github.com/EmbarkStudios/cargo-deny
 
 [licenses]
-default = "deny"
-unlicensed = "deny"
-copyleft = "deny"
+version = 2
 confidence-threshold = 0.8
 allow = [
     "Apache-2.0",
@@ -16,8 +14,7 @@ allow = [
 ]
 
 [advisories]
-unmaintained = "deny"
-yanked = "deny"
+version = 2
 
 [bans]
 multiple-versions = "allow"

examples/README.md

@@ -1,8 +1,47 @@
 # Examples
 
-These gifs were created using [VHS](https://github.com/charmbracelet/vhs). Each example has a
-corresponding `.tape` file that holds instructions for how to generate the images. Note that the
-images themselves are stored in a separate git branch to avoid bloating the main repository.
+This folder might use unreleased code. View the examples for the latest release instead.
+
+> [!WARNING]
+>
+> There may be backwards incompatible changes in these examples, as they are designed to compile
+> against the `main` branch.
+>
+> There are a few workaround for this problem:
+>
+> - View the examples as they were when the latest version was release by selecting the tag that
+>   matches that version. E.g. <https://github.com/ratatui/ratatui/tree/v0.26.1/examples>.
+> - If you're viewing this file on GitHub, there is a combo box at the top of this page  which
+>   allows you to select any previous tagged version.
+> - To view the code locally, checkout the tag. E.g. `git switch --detach v0.26.1`.
+> - Use the latest [alpha version of Ratatui] in your app. These are released weekly on Saturdays.
+> - Compile your code against the main branch either locally by adding e.g. `path = "../ratatui"` to
+>   the dependency, or remotely by adding `git = "https://github.com/ratatui/ratatui"`
+>
+> For a list of unreleased breaking changes, see [BREAKING-CHANGES.md].
+>
+> We don't keep the CHANGELOG updated with unreleased changes, check the git commit history or run
+> `git-cliff -u` against a cloned version of this repository.
+
+## Design choices
+
+The examples contain some opinionated choices in order to make it easier for newer rustaceans to
+easily be productive in creating applications:
+
+- Each example has an App struct, with methods that implement a main loop, handle events and drawing
+  the UI.
+- We use color_eyre for handling errors and panics. See [How to use color-eyre with Ratatui] on the
+  website for more information about this.
+- Common code is not extracted into a separate file. This makes each example self-contained and easy
+  to read as a whole.
+
+Not every example has been updated with all these points in mind yet, however over time they will
+be. None of the above choices are strictly necessary for Ratatui apps, but these choices make
+examples easier to run, maintain and explain. These choices are designed to help newer users fall
+into the pit of success when incorporating example code into their own apps. We may also eventually
+move some of these design choices into the core of Ratatui to simplify apps.
+
+[How to use color-eyre with Ratatui]: https://ratatui.rs/how-to/develop-apps/color_eyre/
 
 ## Demo2
 
@@ -49,6 +88,17 @@ cargo run --example=barchart --features=crossterm
 
 ![Barchart][barchart.gif]
 
+## Barchart (Grouped)
+
+Demonstrates the [`BarChart`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.BarChart.html)
+widget with groups. Source: [barchart-grouped.rs](./barchart-grouped.rs).
+
+```shell
+cargo run --example=barchart-grouped --features=crossterm
+```
+
+![Barchart Grouped][barchart-grouped.gif]
+
 ## Block
 
 Demonstrates the [`Block`](https://docs.rs/ratatui/latest/ratatui/widgets/block/struct.Block.html)
@@ -120,7 +170,31 @@ cargo run --example=colors_rgb --features=crossterm
 Note: VHs renders full screen animations poorly, so this is a screen capture rather than the output
 of the VHS tape.
 
-<https://github.com/ratatui-org/ratatui/assets/381361/485e775a-e0b5-4133-899b-1e8aeb56e774>
+<https://github.com/ratatui/ratatui/assets/381361/485e775a-e0b5-4133-899b-1e8aeb56e774>
+
+## Constraint Explorer
+
+Demonstrates the behaviour of each
+[`Constraint`](https://docs.rs/ratatui/latest/ratatui/layout/enum.Constraint.html) option with
+respect to each other across different `Flex` modes.
+
+```shell
+cargo run --example=constraint-explorer --features=crossterm
+```
+
+![Constraint Explorer][constraint-explorer.gif]
+
+## Constraints
+
+Demonstrates how to use
+[`Constraint`](https://docs.rs/ratatui/latest/ratatui/layout/enum.Constraint.html) options for
+defining layout element sizes.
+
+![Constraints][constraints.gif]
+
+```shell
+cargo run --example=constraints --features=crossterm
+```
 
 ## Custom Widget
 
@@ -145,6 +219,39 @@ cargo run --example=gauge --features=crossterm
 
 ![Gauge][gauge.gif]
 
+## Flex
+
+Demonstrates the different [`Flex`](https://docs.rs/ratatui/latest/ratatui/layout/enum.Flex.html)
+modes for controlling layout space distribution.
+
+```shell
+cargo run --example=flex --features=crossterm
+```
+
+![Flex][flex.gif]
+
+## Line Gauge
+
+Demonstrates the [`Line
+Gauge`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.LineGauge.html) widget. Source:
+[line_gauge.rs](./line_gauge.rs).
+
+```shell
+cargo run --example=line_gauge --features=crossterm
+```
+
+![LineGauge][line_gauge.gif]
+
+## Hyperlink
+
+Demonstrates how to use OSC 8 to create hyperlinks in the terminal.
+
+```shell
+cargo run --example=hyperlink --features="crossterm unstable-widget-ref"
+```
+
+![Hyperlink][hyperlink.gif]
+
 ## Inline
 
 Demonstrates how to use the
@@ -191,6 +298,16 @@ cargo run --example=modifiers --features=crossterm
 
 ![Modifiers][modifiers.gif]
 
+## Minimal
+
+Demonstrates how to create a minimal `Hello World!` program.
+
+```shell
+cargo run --example=minimal --features=crossterm
+```
+
+![Minimal][minimal.gif]
+
 ## Panic
 
 Demonstrates how to handle panics by ensuring that panic messages are written correctly to the
@@ -282,11 +399,23 @@ cargo run --example=tabs --features=crossterm
 
 ![Tabs][tabs.gif]
 
+## Tracing
+
+Demonstrates how to use the [tracing crate](https://crates.io/crates/tracing) for logging. Creates
+a file named `tracing.log` in the current directory.
+
+```shell
+cargo run --example=tracing --features=crossterm
+```
+
+![Tracing][tracing.gif]
+
 ## User Input
 
 Demonstrates one approach to accepting user input. Source [user_input.rs](./user_input.rs).
 
-> [!NOTE] Consider using [`tui-textarea`](https://crates.io/crates/tui-textarea) or
+> [!NOTE]
+> Consider using [`tui-textarea`](https://crates.io/crates/tui-textarea) or
 > [`tui-input`](https://crates.io/crates/tui-input) crates for more functional text entry UIs.
 
 ```shell
@@ -295,37 +424,55 @@ cargo run --example=user_input --features=crossterm
 
 ![User Input][user_input.gif]
 
-<!--
-links to images to make it easier to update in bulk
-These are generated with `vhs publish examples/xxx.gif`
+## How to update these examples
+
+These gifs were created using [VHS](https://github.com/charmbracelet/vhs). Each example has a
+corresponding `.tape` file that holds instructions for how to generate the images. Note that the
+images themselves are stored in a separate `images` git branch to avoid bloating the main
+repository.
+
+<!--
+
+Links to images to make them easier to update in bulk. Use the following script to update and upload
+the examples to the images branch. (Requires push access to the branch).
 
-To update these examples in bulk:
 ```shell
-examples/generate.bash
+examples/vhs/generate.bash
 ```
 -->
 
-[barchart.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/barchart.gif?raw=true
-[block.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/block.gif?raw=true
-[calendar.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/calendar.gif?raw=true
-[canvas.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/canvas.gif?raw=true
-[chart.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/chart.gif?raw=true
-[colors.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/colors.gif?raw=true
-[custom_widget.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/custom_widget.gif?raw=true
-[demo.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/demo.gif?raw=true
-[demo2.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/demo2.gif?raw=true
-[gauge.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/gauge.gif?raw=true
-[hello_world.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/hello_world.gif?raw=true
-[inline.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/inline.gif?raw=true
-[layout.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/layout.gif?raw=true
-[list.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/list.gif?raw=true
-[modifiers.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/modifiers.gif?raw=true
-[panic.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/panic.gif?raw=true
-[paragraph.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/paragraph.gif?raw=true
-[popup.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/popup.gif?raw=true
-[ratatui-logo.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/ratatui-logo.gif?raw=true
-[scrollbar.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/scrollbar.gif?raw=true
-[sparkline.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/sparkline.gif?raw=true
-[table.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/table.gif?raw=true
-[tabs.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/tabs.gif?raw=true
-[user_input.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/user_input.gif?raw=true
+[barchart.gif]: https://github.com/ratatui/ratatui/blob/images/examples/barchart.gif?raw=true
+[barchart-grouped.gif]: https://github.com/ratatui/ratatui/blob/images/examples/barchart-grouped.gif?raw=true
+[block.gif]: https://github.com/ratatui/ratatui/blob/images/examples/block.gif?raw=true
+[calendar.gif]: https://github.com/ratatui/ratatui/blob/images/examples/calendar.gif?raw=true
+[canvas.gif]: https://github.com/ratatui/ratatui/blob/images/examples/canvas.gif?raw=true
+[chart.gif]: https://github.com/ratatui/ratatui/blob/images/examples/chart.gif?raw=true
+[colors.gif]: https://github.com/ratatui/ratatui/blob/images/examples/colors.gif?raw=true
+[constraint-explorer.gif]: https://github.com/ratatui/ratatui/blob/images/examples/constraint-explorer.gif?raw=true
+[constraints.gif]: https://github.com/ratatui/ratatui/blob/images/examples/constraints.gif?raw=true
+[custom_widget.gif]: https://github.com/ratatui/ratatui/blob/images/examples/custom_widget.gif?raw=true
+[demo.gif]: https://github.com/ratatui/ratatui/blob/images/examples/demo.gif?raw=true
+[demo2.gif]: https://github.com/ratatui/ratatui/blob/images/examples/demo2.gif?raw=true
+[flex.gif]: https://github.com/ratatui/ratatui/blob/images/examples/flex.gif?raw=true
+[gauge.gif]: https://github.com/ratatui/ratatui/blob/images/examples/gauge.gif?raw=true
+[hello_world.gif]: https://github.com/ratatui/ratatui/blob/images/examples/hello_world.gif?raw=true
+[hyperlink.gif]: https://github.com/ratatui/ratatui/blob/images/examples/hyperlink.gif?raw=true
+[inline.gif]: https://github.com/ratatui/ratatui/blob/images/examples/inline.gif?raw=true
+[layout.gif]: https://github.com/ratatui/ratatui/blob/images/examples/layout.gif?raw=true
+[list.gif]: https://github.com/ratatui/ratatui/blob/images/examples/list.gif?raw=true
+[line_gauge.gif]: https://github.com/ratatui/ratatui/blob/images/examples/line_gauge.gif?raw=true
+[minimal.gif]: https://github.com/ratatui/ratatui/blob/images/examples/minimal.gif?raw=true
+[modifiers.gif]: https://github.com/ratatui/ratatui/blob/images/examples/modifiers.gif?raw=true
+[panic.gif]: https://github.com/ratatui/ratatui/blob/images/examples/panic.gif?raw=true
+[paragraph.gif]: https://github.com/ratatui/ratatui/blob/images/examples/paragraph.gif?raw=true
+[popup.gif]: https://github.com/ratatui/ratatui/blob/images/examples/popup.gif?raw=true
+[ratatui-logo.gif]: https://github.com/ratatui/ratatui/blob/images/examples/ratatui-logo.gif?raw=true
+[scrollbar.gif]: https://github.com/ratatui/ratatui/blob/images/examples/scrollbar.gif?raw=true
+[sparkline.gif]: https://github.com/ratatui/ratatui/blob/images/examples/sparkline.gif?raw=true
+[table.gif]:  https://vhs.charm.sh/vhs-6njXBytDf0rwPufUtmSSpI.gif
+[tabs.gif]: https://github.com/ratatui/ratatui/blob/images/examples/tabs.gif?raw=true
+[tracing.gif]: https://github.com/ratatui/ratatui/blob/images/examples/tracing.gif?raw=true
+[user_input.gif]: https://github.com/ratatui/ratatui/blob/images/examples/user_input.gif?raw=true
+
+[alpha version of Ratatui]: https://crates.io/crates/ratatui/versions
+[BREAKING-CHANGES.md]: https://github.com/ratatui/ratatui/blob/main/BREAKING-CHANGES.md

examples/async.rs

@@ -0,0 +1,258 @@
+//! # [Ratatui] Async example
+//!
+//! This example demonstrates how to use Ratatui with widgets that fetch data asynchronously. It
+//! uses the `octocrab` crate to fetch a list of pull requests from the GitHub API. You will need an
+//! environment variable named `GITHUB_TOKEN` with a valid GitHub personal access token. The token
+//! does not need any special permissions.
+//!
+//! <https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token>
+//! <https://github.com/settings/tokens/new> to create a new token (select classic, and no scopes)
+//!
+//! This example does not cover message passing between threads, it only demonstrates how to manage
+//! shared state between the main thread and a background task, which acts mostly as a one-shot
+//! fetcher. For more complex scenarios, you may need to use channels or other synchronization
+//! primitives.
+//!
+//! A simple app might have multiple widgets that fetch data from different sources, and each widget
+//! would have its own background task to fetch the data. The main thread would then render the
+//! widgets with the latest data.
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+use std::{
+    sync::{Arc, RwLock},
+    time::Duration,
+};
+
+use color_eyre::{eyre::Context, Result, Section};
+use futures::StreamExt;
+use octocrab::{
+    params::{pulls::Sort, Direction},
+    OctocrabBuilder, Page,
+};
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{Event, EventStream, KeyCode, KeyEventKind},
+    layout::{Constraint, Layout, Rect},
+    style::{Style, Stylize},
+    text::Line,
+    widgets::{Block, HighlightSpacing, Row, StatefulWidget, Table, TableState, Widget},
+    DefaultTerminal, Frame,
+};
+
+#[tokio::main]
+async fn main() -> Result<()> {
+    color_eyre::install()?;
+    init_octocrab()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal).await;
+    ratatui::restore();
+    app_result
+}
+
+fn init_octocrab() -> Result<()> {
+    let token = std::env::var("GITHUB_TOKEN")
+        .wrap_err("The GITHUB_TOKEN environment variable was not found")
+        .suggestion(
+            "Go to https://github.com/settings/tokens/new to create a token, and re-run:
+            GITHUB_TOKEN=ghp_... cargo run --example async --features crossterm",
+        )?;
+    let crab = OctocrabBuilder::new().personal_token(token).build()?;
+    octocrab::initialise(crab);
+    Ok(())
+}
+
+#[derive(Debug, Default)]
+struct App {
+    should_quit: bool,
+    pull_requests: PullRequestListWidget,
+}
+
+impl App {
+    const FRAMES_PER_SECOND: f32 = 60.0;
+
+    pub async fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        self.pull_requests.run();
+
+        let period = Duration::from_secs_f32(1.0 / Self::FRAMES_PER_SECOND);
+        let mut interval = tokio::time::interval(period);
+        let mut events = EventStream::new();
+
+        while !self.should_quit {
+            tokio::select! {
+                _ = interval.tick() => { terminal.draw(|frame| self.draw(frame))?; },
+                Some(Ok(event)) = events.next() => self.handle_event(&event),
+            }
+        }
+        Ok(())
+    }
+
+    fn draw(&self, frame: &mut Frame) {
+        let vertical = Layout::vertical([Constraint::Length(1), Constraint::Fill(1)]);
+        let [title_area, body_area] = vertical.areas(frame.area());
+        let title = Line::from("Ratatui async example").centered().bold();
+        frame.render_widget(title, title_area);
+        frame.render_widget(&self.pull_requests, body_area);
+    }
+
+    fn handle_event(&mut self, event: &Event) {
+        if let Event::Key(key) = event {
+            if key.kind == KeyEventKind::Press {
+                match key.code {
+                    KeyCode::Char('q') | KeyCode::Esc => self.should_quit = true,
+                    KeyCode::Char('j') | KeyCode::Down => self.pull_requests.scroll_down(),
+                    KeyCode::Char('k') | KeyCode::Up => self.pull_requests.scroll_up(),
+                    _ => {}
+                }
+            }
+        }
+    }
+}
+
+/// A widget that displays a list of pull requests.
+///
+/// This is an async widget that fetches the list of pull requests from the GitHub API. It contains
+/// an inner `Arc<RwLock<PullRequestListState>>` that holds the state of the widget. Cloning the
+/// widget will clone the Arc, so you can pass it around to other threads, and this is used to spawn
+/// a background task to fetch the pull requests.
+#[derive(Debug, Clone, Default)]
+struct PullRequestListWidget {
+    state: Arc<RwLock<PullRequestListState>>,
+}
+
+#[derive(Debug, Default)]
+struct PullRequestListState {
+    pull_requests: Vec<PullRequest>,
+    loading_state: LoadingState,
+    table_state: TableState,
+}
+
+#[derive(Debug, Clone)]
+struct PullRequest {
+    id: String,
+    title: String,
+    url: String,
+}
+
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
+enum LoadingState {
+    #[default]
+    Idle,
+    Loading,
+    Loaded,
+    Error(String),
+}
+
+impl PullRequestListWidget {
+    /// Start fetching the pull requests in the background.
+    ///
+    /// This method spawns a background task that fetches the pull requests from the GitHub API.
+    /// The result of the fetch is then passed to the `on_load` or `on_err` methods.
+    fn run(&self) {
+        let this = self.clone(); // clone the widget to pass to the background task
+        tokio::spawn(this.fetch_pulls());
+    }
+
+    async fn fetch_pulls(self) {
+        // this runs once, but you could also run this in a loop, using a channel that accepts
+        // messages to refresh on demand, or with an interval timer to refresh every N seconds
+        self.set_loading_state(LoadingState::Loading);
+        match octocrab::instance()
+            .pulls("ratatui", "ratatui")
+            .list()
+            .sort(Sort::Updated)
+            .direction(Direction::Descending)
+            .send()
+            .await
+        {
+            Ok(page) => self.on_load(&page),
+            Err(err) => self.on_err(&err),
+        }
+    }
+    fn on_load(&self, page: &Page<OctoPullRequest>) {
+        let prs = page.items.iter().map(Into::into);
+        let mut state = self.state.write().unwrap();
+        state.loading_state = LoadingState::Loaded;
+        state.pull_requests.extend(prs);
+        if !state.pull_requests.is_empty() {
+            state.table_state.select(Some(0));
+        }
+    }
+
+    fn on_err(&self, err: &octocrab::Error) {
+        self.set_loading_state(LoadingState::Error(err.to_string()));
+    }
+
+    fn set_loading_state(&self, state: LoadingState) {
+        self.state.write().unwrap().loading_state = state;
+    }
+
+    fn scroll_down(&self) {
+        self.state.write().unwrap().table_state.scroll_down_by(1);
+    }
+
+    fn scroll_up(&self) {
+        self.state.write().unwrap().table_state.scroll_up_by(1);
+    }
+}
+
+type OctoPullRequest = octocrab::models::pulls::PullRequest;
+
+impl From<&OctoPullRequest> for PullRequest {
+    fn from(pr: &OctoPullRequest) -> Self {
+        Self {
+            id: pr.number.to_string(),
+            title: pr.title.as_ref().unwrap().to_string(),
+            url: pr
+                .html_url
+                .as_ref()
+                .map(ToString::to_string)
+                .unwrap_or_default(),
+        }
+    }
+}
+
+impl Widget for &PullRequestListWidget {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let mut state = self.state.write().unwrap();
+
+        // a block with a right aligned title with the loading state on the right
+        let loading_state = Line::from(format!("{:?}", state.loading_state)).right_aligned();
+        let block = Block::bordered()
+            .title("Pull Requests")
+            .title(loading_state)
+            .title_bottom("j/k to scroll, q to quit");
+
+        // a table with the list of pull requests
+        let rows = state.pull_requests.iter();
+        let widths = [
+            Constraint::Length(5),
+            Constraint::Fill(1),
+            Constraint::Max(49),
+        ];
+        let table = Table::new(rows, widths)
+            .block(block)
+            .highlight_spacing(HighlightSpacing::Always)
+            .highlight_symbol(">>")
+            .highlight_style(Style::new().on_blue());
+
+        StatefulWidget::render(table, area, buf, &mut state.table_state);
+    }
+}
+
+impl From<&PullRequest> for Row<'_> {
+    fn from(pr: &PullRequest) -> Self {
+        let pr = pr.clone();
+        Row::new(vec![pr.id, pr.title, pr.url])
+    }
+}

examples/barchart-grouped.rs

@@ -0,0 +1,211 @@
+//! # [Ratatui] `BarChart` example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use std::iter::zip;
+
+use color_eyre::Result;
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Direction, Layout},
+    style::{Color, Style, Stylize},
+    text::Line,
+    widgets::{Bar, BarChart, BarGroup, Block},
+    DefaultTerminal, Frame,
+};
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
+}
+
+const COMPANY_COUNT: usize = 3;
+const PERIOD_COUNT: usize = 4;
+
+struct App {
+    should_exit: bool,
+    companies: [Company; COMPANY_COUNT],
+    revenues: [Revenues; PERIOD_COUNT],
+}
+
+struct Revenues {
+    period: &'static str,
+    revenues: [u32; COMPANY_COUNT],
+}
+
+struct Company {
+    short_name: &'static str,
+    name: &'static str,
+    color: Color,
+}
+
+impl App {
+    const fn new() -> Self {
+        Self {
+            should_exit: false,
+            companies: fake_companies(),
+            revenues: fake_revenues(),
+        }
+    }
+
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        while !self.should_exit {
+            terminal.draw(|frame| self.draw(frame))?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        if let Event::Key(key) = event::read()? {
+            if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                self.should_exit = true;
+            }
+        }
+        Ok(())
+    }
+
+    fn draw(&self, frame: &mut Frame) {
+        use Constraint::{Fill, Length, Min};
+        let vertical = Layout::vertical([Length(1), Fill(1), Min(20)]).spacing(1);
+        let [title, top, bottom] = vertical.areas(frame.area());
+
+        frame.render_widget("Grouped Barchart".bold().into_centered_line(), title);
+        frame.render_widget(self.vertical_revenue_barchart(), top);
+        frame.render_widget(self.horizontal_revenue_barchart(), bottom);
+    }
+
+    /// Create a vertical revenue bar chart with the data from the `revenues` field.
+    fn vertical_revenue_barchart(&self) -> BarChart<'_> {
+        let mut barchart = BarChart::default()
+            .block(Block::new().title(Line::from("Company revenues (Vertical)").centered()))
+            .bar_gap(0)
+            .bar_width(6)
+            .group_gap(2);
+
+        for group in self
+            .revenues
+            .iter()
+            .map(|revenue| revenue.to_vertical_bar_group(&self.companies))
+        {
+            barchart = barchart.data(group);
+        }
+        barchart
+    }
+
+    /// Create a horizontal revenue bar chart with the data from the `revenues` field.
+    fn horizontal_revenue_barchart(&self) -> BarChart<'_> {
+        let title = Line::from("Company Revenues (Horizontal)").centered();
+        let mut barchart = BarChart::default()
+            .block(Block::new().title(title))
+            .bar_width(1)
+            .group_gap(2)
+            .bar_gap(0)
+            .direction(Direction::Horizontal);
+        for group in self
+            .revenues
+            .iter()
+            .map(|revenue| revenue.to_horizontal_bar_group(&self.companies))
+        {
+            barchart = barchart.data(group);
+        }
+        barchart
+    }
+}
+
+/// Generate fake company data
+const fn fake_companies() -> [Company; COMPANY_COUNT] {
+    [
+        Company::new("BAKE", "Bake my day", Color::LightRed),
+        Company::new("BITE", "Bits and Bites", Color::Blue),
+        Company::new("TART", "Tart of the Table", Color::White),
+    ]
+}
+
+/// Some fake revenue data
+const fn fake_revenues() -> [Revenues; PERIOD_COUNT] {
+    [
+        Revenues::new("Jan", [8500, 6500, 7000]),
+        Revenues::new("Feb", [9000, 7500, 8500]),
+        Revenues::new("Mar", [9500, 4500, 8200]),
+        Revenues::new("Apr", [6300, 4000, 5000]),
+    ]
+}
+
+impl Revenues {
+    /// Create a new instance of `Revenues`
+    const fn new(period: &'static str, revenues: [u32; COMPANY_COUNT]) -> Self {
+        Self { period, revenues }
+    }
+
+    /// Create a `BarGroup` with vertical bars for each company
+    fn to_vertical_bar_group<'a>(&self, companies: &'a [Company]) -> BarGroup<'a> {
+        let bars: Vec<Bar> = zip(companies, self.revenues)
+            .map(|(company, revenue)| company.vertical_revenue_bar(revenue))
+            .collect();
+        BarGroup::default()
+            .label(Line::from(self.period).centered())
+            .bars(&bars)
+    }
+
+    /// Create a `BarGroup` with horizontal bars for each company
+    fn to_horizontal_bar_group<'a>(&'a self, companies: &'a [Company]) -> BarGroup<'a> {
+        let bars: Vec<Bar> = zip(companies, self.revenues)
+            .map(|(company, revenue)| company.horizontal_revenue_bar(revenue))
+            .collect();
+        BarGroup::default()
+            .label(Line::from(self.period).centered())
+            .bars(&bars)
+    }
+}
+
+impl Company {
+    /// Create a new instance of `Company`
+    const fn new(short_name: &'static str, name: &'static str, color: Color) -> Self {
+        Self {
+            short_name,
+            name,
+            color,
+        }
+    }
+
+    /// Create a vertical revenue bar for the company
+    ///
+    /// The label is the short name of the company, and will be displayed under the bar
+    fn vertical_revenue_bar(&self, revenue: u32) -> Bar {
+        let text_value = format!("{:.1}M", f64::from(revenue) / 1000.);
+        Bar::default()
+            .label(self.short_name.into())
+            .value(u64::from(revenue))
+            .text_value(text_value)
+            .style(self.color)
+            .value_style(Style::new().fg(Color::Black).bg(self.color))
+    }
+
+    /// Create a horizontal revenue bar for the company
+    ///
+    /// The label is the long name of the company combined with the revenue and will be displayed
+    /// on the bar
+    fn horizontal_revenue_bar(&self, revenue: u32) -> Bar {
+        let text_value = format!("{} ({:.1} M)", self.name, f64::from(revenue) / 1000.);
+        Bar::default()
+            .value(u64::from(revenue))
+            .text_value(text_value)
+            .style(self.color)
+            .value_style(Style::new().fg(Color::Black).bg(self.color))
+    }
+}

examples/barchart.rs

@@ -1,282 +1,136 @@
-use std::{
-    error::Error,
-    io,
-    time::{Duration, Instant},
+//! # [Ratatui] `BarChart` example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use color_eyre::Result;
+use rand::{thread_rng, Rng};
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Direction, Layout},
+    style::{Color, Style, Stylize},
+    text::Line,
+    widgets::{Bar, BarChart, BarGroup, Block},
+    DefaultTerminal, Frame,
 };
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
-use ratatui::{prelude::*, widgets::*};
-
-struct Company<'a> {
-    revenue: [u64; 4],
-    label: &'a str,
-    bar_style: Style,
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
 }
 
-struct App<'a> {
-    data: Vec<(&'a str, u64)>,
-    months: [&'a str; 4],
-    companies: [Company<'a>; 3],
+struct App {
+    should_exit: bool,
+    temperatures: Vec<u8>,
 }
 
-const TOTAL_REVENUE: &str = "Total Revenue";
-
-impl<'a> App<'a> {
-    fn new() -> App<'a> {
-        App {
-            data: vec![
-                ("B1", 9),
-                ("B2", 12),
-                ("B3", 5),
-                ("B4", 8),
-                ("B5", 2),
-                ("B6", 4),
-                ("B7", 5),
-                ("B8", 9),
-                ("B9", 14),
-                ("B10", 15),
-                ("B11", 1),
-                ("B12", 0),
-                ("B13", 4),
-                ("B14", 6),
-                ("B15", 4),
-                ("B16", 6),
-                ("B17", 4),
-                ("B18", 7),
-                ("B19", 13),
-                ("B20", 8),
-                ("B21", 11),
-                ("B22", 9),
-                ("B23", 3),
-                ("B24", 5),
-            ],
-            companies: [
-                Company {
-                    label: "Comp.A",
-                    revenue: [9500, 12500, 5300, 8500],
-                    bar_style: Style::default().fg(Color::Green),
-                },
-                Company {
-                    label: "Comp.B",
-                    revenue: [1500, 2500, 3000, 500],
-                    bar_style: Style::default().fg(Color::Yellow),
-                },
-                Company {
-                    label: "Comp.C",
-                    revenue: [10500, 10600, 9000, 4200],
-                    bar_style: Style::default().fg(Color::White),
-                },
-            ],
-            months: ["Mars", "Apr", "May", "Jun"],
+impl App {
+    fn new() -> Self {
+        let mut rng = thread_rng();
+        let temperatures = (0..24).map(|_| rng.gen_range(50..90)).collect();
+        Self {
+            should_exit: false,
+            temperatures,
         }
     }
 
-    fn on_tick(&mut self) {
-        let value = self.data.pop().unwrap();
-        self.data.insert(0, value);
-    }
-}
-
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let tick_rate = Duration::from_millis(250);
-    let app = App::new();
-    let res = run_app(&mut terminal, app, tick_rate);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        while !self.should_exit {
+            terminal.draw(|frame| self.draw(frame))?;
+            self.handle_events()?;
+        }
+        Ok(())
     }
 
-    Ok(())
-}
-
-fn run_app<B: Backend>(
-    terminal: &mut Terminal<B>,
-    mut app: App,
-    tick_rate: Duration,
-) -> io::Result<()> {
-    let mut last_tick = Instant::now();
-    loop {
-        terminal.draw(|f| ui(f, &app))?;
-
-        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
-        if crossterm::event::poll(timeout)? {
-            if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
-                    return Ok(());
-                }
+    fn handle_events(&mut self) -> Result<()> {
+        if let Event::Key(key) = event::read()? {
+            if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                self.should_exit = true;
             }
         }
-        if last_tick.elapsed() >= tick_rate {
-            app.on_tick();
-            last_tick = Instant::now();
-        }
+        Ok(())
+    }
+
+    fn draw(&self, frame: &mut Frame) {
+        let [title, vertical, horizontal] = Layout::vertical([
+            Constraint::Length(1),
+            Constraint::Fill(1),
+            Constraint::Fill(1),
+        ])
+        .spacing(1)
+        .areas(frame.area());
+
+        frame.render_widget("Barchart".bold().into_centered_line(), title);
+        frame.render_widget(vertical_barchart(&self.temperatures), vertical);
+        frame.render_widget(horizontal_barchart(&self.temperatures), horizontal);
     }
 }
 
-fn ui(f: &mut Frame, app: &App) {
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Ratio(1, 3), Constraint::Ratio(2, 3)])
-        .split(f.size());
-
-    let barchart = BarChart::default()
-        .block(Block::default().title("Data1").borders(Borders::ALL))
-        .data(&app.data)
-        .bar_width(9)
-        .bar_style(Style::default().fg(Color::Yellow))
-        .value_style(Style::default().fg(Color::Black).bg(Color::Yellow));
-    f.render_widget(barchart, chunks[0]);
-
-    let chunks = Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
-        .split(chunks[1]);
-
-    draw_bar_with_group_labels(f, app, chunks[0]);
-    draw_horizontal_bars(f, app, chunks[1]);
-}
-
-fn create_groups<'a>(app: &'a App, combine_values_and_labels: bool) -> Vec<BarGroup<'a>> {
-    app.months
+/// Create a vertical bar chart from the temperatures data.
+fn vertical_barchart(temperatures: &[u8]) -> BarChart {
+    let bars: Vec<Bar> = temperatures
         .iter()
         .enumerate()
-        .map(|(i, &month)| {
-            let bars: Vec<Bar> = app
-                .companies
-                .iter()
-                .map(|c| {
-                    let mut bar = Bar::default()
-                        .value(c.revenue[i])
-                        .style(c.bar_style)
-                        .value_style(
-                            Style::default()
-                                .bg(c.bar_style.fg.unwrap())
-                                .fg(Color::Black),
-                        );
-
-                    if combine_values_and_labels {
-                        bar = bar.text_value(format!(
-                            "{} ({:.1} M)",
-                            c.label,
-                            (c.revenue[i] as f64) / 1000.
-                        ));
-                    } else {
-                        bar = bar
-                            .text_value(format!("{:.1}", (c.revenue[i] as f64) / 1000.))
-                            .label(c.label.into());
-                    }
-                    bar
-                })
-                .collect();
-            BarGroup::default()
-                .label(Line::from(month).alignment(Alignment::Center))
-                .bars(&bars)
-        })
-        .collect()
+        .map(|(hour, value)| vertical_bar(hour, value))
+        .collect();
+    let title = Line::from("Weather (Vertical)").centered();
+    BarChart::default()
+        .data(BarGroup::default().bars(&bars))
+        .block(Block::new().title(title))
+        .bar_width(5)
 }
 
-fn draw_bar_with_group_labels(f: &mut Frame, app: &App, area: Rect) {
-    let groups = create_groups(app, false);
-
-    let mut barchart = BarChart::default()
-        .block(Block::default().title("Data1").borders(Borders::ALL))
-        .bar_width(7)
-        .group_gap(3);
-
-    for group in groups {
-        barchart = barchart.data(group)
-    }
-
-    f.render_widget(barchart, area);
-
-    const LEGEND_HEIGHT: u16 = 6;
-    if area.height >= LEGEND_HEIGHT && area.width >= TOTAL_REVENUE.len() as u16 + 2 {
-        let legend_width = TOTAL_REVENUE.len() as u16 + 2;
-        let legend_area = Rect {
-            height: LEGEND_HEIGHT,
-            width: legend_width,
-            y: area.y,
-            x: area.right() - legend_width,
-        };
-        draw_legend(f, legend_area);
-    }
+fn vertical_bar(hour: usize, temperature: &u8) -> Bar {
+    Bar::default()
+        .value(u64::from(*temperature))
+        .label(Line::from(format!("{hour:>02}:00")))
+        .text_value(format!("{temperature:>3}°"))
+        .style(temperature_style(*temperature))
+        .value_style(temperature_style(*temperature).reversed())
 }
 
-fn draw_horizontal_bars(f: &mut Frame, app: &App, area: Rect) {
-    let groups = create_groups(app, true);
-
-    let mut barchart = BarChart::default()
-        .block(Block::default().title("Data1").borders(Borders::ALL))
+/// Create a horizontal bar chart from the temperatures data.
+fn horizontal_barchart(temperatures: &[u8]) -> BarChart {
+    let bars: Vec<Bar> = temperatures
+        .iter()
+        .enumerate()
+        .map(|(hour, value)| horizontal_bar(hour, value))
+        .collect();
+    let title = Line::from("Weather (Horizontal)").centered();
+    BarChart::default()
+        .block(Block::new().title(title))
+        .data(BarGroup::default().bars(&bars))
         .bar_width(1)
-        .group_gap(1)
         .bar_gap(0)
-        .direction(Direction::Horizontal);
-
-    for group in groups {
-        barchart = barchart.data(group)
-    }
-
-    f.render_widget(barchart, area);
-
-    const LEGEND_HEIGHT: u16 = 6;
-    if area.height >= LEGEND_HEIGHT && area.width >= TOTAL_REVENUE.len() as u16 + 2 {
-        let legend_width = TOTAL_REVENUE.len() as u16 + 2;
-        let legend_area = Rect {
-            height: LEGEND_HEIGHT,
-            width: legend_width,
-            y: area.y,
-            x: area.right() - legend_width,
-        };
-        draw_legend(f, legend_area);
-    }
+        .direction(Direction::Horizontal)
 }
 
-fn draw_legend(f: &mut Frame, area: Rect) {
-    let text = vec![
-        Line::from(Span::styled(
-            TOTAL_REVENUE,
-            Style::default()
-                .add_modifier(Modifier::BOLD)
-                .fg(Color::White),
-        )),
-        Line::from(Span::styled(
-            "- Company A",
-            Style::default().fg(Color::Green),
-        )),
-        Line::from(Span::styled(
-            "- Company B",
-            Style::default().fg(Color::Yellow),
-        )),
-        Line::from(vec![Span::styled(
-            "- Company C",
-            Style::default().fg(Color::White),
-        )]),
-    ];
-
-    let block = Block::default()
-        .borders(Borders::ALL)
-        .style(Style::default().fg(Color::White));
-    let paragraph = Paragraph::new(text).block(block);
-    f.render_widget(paragraph, area);
+fn horizontal_bar(hour: usize, temperature: &u8) -> Bar {
+    let style = temperature_style(*temperature);
+    Bar::default()
+        .value(u64::from(*temperature))
+        .label(Line::from(format!("{hour:>02}:00")))
+        .text_value(format!("{temperature:>3}°"))
+        .style(style)
+        .value_style(style.reversed())
+}
+
+/// create a yellow to red value based on the value (50-90)
+fn temperature_style(value: u8) -> Style {
+    let green = (255.0 * (1.0 - f64::from(value - 50) / 40.0)) as u8;
+    let color = Color::Rgb(255, green, 0);
+    Style::new().fg(color)
 }

examples/block.rs

@@ -1,77 +1,53 @@
-use std::{
-    error::Error,
-    io::{stdout, Stdout},
-    ops::ControlFlow,
-    time::Duration,
-};
+//! # [Ratatui] Block example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
+use color_eyre::Result;
 use itertools::Itertools;
 use ratatui::{
-    prelude::*,
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{Style, Stylize},
+    text::Line,
     widgets::{
         block::{Position, Title},
         Block, BorderType, Borders, Padding, Paragraph, Wrap,
     },
+    DefaultTerminal, Frame,
 };
 
-// These type aliases are used to make the code more readable by reducing repetition of the generic
-// types. They are not necessary for the functionality of the code.
-type Terminal = ratatui::Terminal<CrosstermBackend<Stdout>>;
-type Result<T> = std::result::Result<T, Box<dyn Error>>;
-
 fn main() -> Result<()> {
-    let mut terminal = setup_terminal()?;
-    let result = run(&mut terminal);
-    restore_terminal(terminal)?;
-
-    if let Err(err) = result {
-        eprintln!("{err:?}");
-    }
-    Ok(())
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let result = run(terminal);
+    ratatui::restore();
+    result
 }
 
-fn setup_terminal() -> Result<Terminal> {
-    enable_raw_mode()?;
-    let mut stdout = stdout();
-    execute!(stdout, EnterAlternateScreen)?;
-    let backend = CrosstermBackend::new(stdout);
-    let terminal = Terminal::new(backend)?;
-    Ok(terminal)
-}
-
-fn restore_terminal(mut terminal: Terminal) -> Result<()> {
-    disable_raw_mode()?;
-    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
-    Ok(())
-}
-
-fn run(terminal: &mut Terminal) -> Result<()> {
+fn run(mut terminal: DefaultTerminal) -> Result<()> {
     loop {
-        terminal.draw(ui)?;
-        if handle_events()?.is_break() {
-            return Ok(());
-        }
-    }
-}
-
-fn handle_events() -> Result<ControlFlow<()>> {
-    if event::poll(Duration::from_millis(100))? {
+        terminal.draw(draw)?;
         if let Event::Key(key) = event::read()? {
-            if let KeyCode::Char('q') = key.code {
-                return Ok(ControlFlow::Break(()));
+            if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                break Ok(());
             }
         }
     }
-    Ok(ControlFlow::Continue(()))
 }
 
-fn ui(frame: &mut Frame) {
-    let (title_area, layout) = calculate_layout(frame.size());
+fn draw(frame: &mut Frame) {
+    let (title_area, layout) = calculate_layout(frame.area());
 
     render_title(frame, title_area);
 
@@ -103,20 +79,14 @@ fn ui(frame: &mut Frame) {
 ///
 /// Returns a tuple of the title area and the main areas.
 fn calculate_layout(area: Rect) -> (Rect, Vec<Vec<Rect>>) {
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Length(1), Constraint::Min(0)])
-        .split(area);
-    let title_area = layout[0];
-    let main_areas = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Max(4); 9])
-        .split(layout[1])
+    let main_layout = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
+    let block_layout = Layout::vertical([Constraint::Max(4); 9]);
+    let [title_area, main_area] = main_layout.areas(area);
+    let main_areas = block_layout
+        .split(main_area)
         .iter()
         .map(|&area| {
-            Layout::default()
-                .direction(Direction::Horizontal)
-                .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
+            Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)])
                 .split(area)
                 .to_vec()
         })
@@ -141,7 +111,7 @@ fn placeholder_paragraph() -> Paragraph<'static> {
 fn render_borders(paragraph: &Paragraph, border: Borders, frame: &mut Frame, area: Rect) {
     let block = Block::new()
         .borders(border)
-        .title(format!("Borders::{border:#?}", border = border));
+        .title(format!("Borders::{border:#?}"));
     frame.render_widget(paragraph.clone().block(block), area);
 }
 
@@ -151,32 +121,27 @@ fn render_border_type(
     frame: &mut Frame,
     area: Rect,
 ) {
-    let block = Block::new()
-        .borders(Borders::ALL)
+    let block = Block::bordered()
         .border_type(border_type)
         .title(format!("BorderType::{border_type:#?}"));
     frame.render_widget(paragraph.clone().block(block), area);
 }
 fn render_styled_borders(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
-    let block = Block::new()
-        .borders(Borders::ALL)
+    let block = Block::bordered()
         .border_style(Style::new().blue().on_white().bold().italic())
         .title("Styled borders");
     frame.render_widget(paragraph.clone().block(block), area);
 }
 
 fn render_styled_block(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
-    let block = Block::new()
-        .borders(Borders::ALL)
+    let block = Block::bordered()
         .style(Style::new().blue().on_white().bold().italic())
         .title("Styled block");
     frame.render_widget(paragraph.clone().block(block), area);
 }
 
-// Note: this currently renders incorrectly, see https://github.com/ratatui-org/ratatui/issues/349
 fn render_styled_title(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
-    let block = Block::new()
-        .borders(Borders::ALL)
+    let block = Block::bordered()
         .title("Styled title")
         .title_style(Style::new().blue().on_white().bold().italic());
     frame.render_widget(paragraph.clone().block(block), area);
@@ -187,21 +152,19 @@ fn render_styled_title_content(paragraph: &Paragraph, frame: &mut Frame, area: R
         "Styled ".blue().on_white().bold().italic(),
         "title content".red().on_white().bold().italic(),
     ]);
-    let block = Block::new().borders(Borders::ALL).title(title);
+    let block = Block::bordered().title(title);
     frame.render_widget(paragraph.clone().block(block), area);
 }
 
 fn render_multiple_titles(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
-    let block = Block::new()
-        .borders(Borders::ALL)
+    let block = Block::bordered()
         .title("Multiple".blue().on_white().bold().italic())
         .title("Titles".red().on_white().bold().italic());
     frame.render_widget(paragraph.clone().block(block), area);
 }
 
 fn render_multiple_title_positions(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
-    let block = Block::new()
-        .borders(Borders::ALL)
+    let block = Block::bordered()
         .title(
             Title::from("top left")
                 .position(Position::Top)
@@ -236,16 +199,15 @@ fn render_multiple_title_positions(paragraph: &Paragraph, frame: &mut Frame, are
 }
 
 fn render_padding(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
-    let block = Block::new()
-        .borders(Borders::ALL)
-        .title("Padding")
-        .padding(Padding::new(5, 10, 1, 2));
+    let block = Block::bordered()
+        .padding(Padding::new(5, 10, 1, 2))
+        .title("Padding");
     frame.render_widget(paragraph.clone().block(block), area);
 }
 
 fn render_nested_blocks(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
-    let outer_block = Block::new().borders(Borders::ALL).title("Outer block");
-    let inner_block = Block::new().borders(Borders::ALL).title("Inner block");
+    let outer_block = Block::bordered().title("Outer block");
+    let inner_block = Block::bordered().title("Inner block");
     let inner = outer_block.inner(area);
     frame.render_widget(outer_block, area);
     frame.render_widget(paragraph.clone().block(inner_block), inner);

examples/calendar.rs

@@ -1,49 +1,52 @@
-use std::{error::Error, io, rc::Rc};
+//! # [Ratatui] Calendar example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+use color_eyre::Result;
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Layout, Margin},
+    style::{Color, Modifier, Style},
+    widgets::calendar::{CalendarEventStore, DateStyler, Monthly},
+    DefaultTerminal, Frame,
 };
-use ratatui::{prelude::*, widgets::calendar::*};
 use time::{Date, Month, OffsetDateTime};
 
-fn main() -> Result<(), Box<dyn Error>> {
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    loop {
-        let _ = terminal.draw(draw);
-
-        if let Event::Key(key) = event::read()? {
-            #[allow(clippy::single_match)]
-            match key.code {
-                KeyCode::Char(_) => {
-                    break;
-                }
-                _ => {}
-            };
-        }
-    }
-
-    disable_raw_mode()?;
-    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
-    terminal.show_cursor()?;
-    Ok(())
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let result = run(terminal);
+    ratatui::restore();
+    result
 }
 
-fn draw(f: &mut Frame) {
-    let app_area = f.size();
+fn run(mut terminal: DefaultTerminal) -> Result<()> {
+    loop {
+        terminal.draw(draw)?;
+        if let Event::Key(key) = event::read()? {
+            if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                break Ok(());
+            }
+        }
+    }
+}
 
-    let calarea = Rect {
-        x: app_area.x + 1,
-        y: app_area.y + 1,
-        height: app_area.height - 1,
-        width: app_area.width - 1,
-    };
+fn draw(frame: &mut Frame) {
+    let area = frame.area().inner(Margin {
+        vertical: 1,
+        horizontal: 1,
+    });
 
     let mut start = OffsetDateTime::now_local()
         .unwrap()
@@ -55,43 +58,19 @@ fn draw(f: &mut Frame) {
 
     let list = make_dates(start.year());
 
-    for chunk in split_rows(&calarea)
-        .iter()
-        .flat_map(|row| split_cols(row).to_vec())
-    {
+    let rows = Layout::vertical([Constraint::Ratio(1, 3); 3]).split(area);
+    let cols = rows.iter().flat_map(|row| {
+        Layout::horizontal([Constraint::Ratio(1, 4); 4])
+            .split(*row)
+            .to_vec()
+    });
+    for col in cols {
         let cal = cals::get_cal(start.month(), start.year(), &list);
-        f.render_widget(cal, chunk);
+        frame.render_widget(cal, col);
         start = start.replace_month(start.month().next()).unwrap();
     }
 }
 
-fn split_rows(area: &Rect) -> Rc<[Rect]> {
-    let list_layout = Layout::default()
-        .direction(Direction::Vertical)
-        .margin(0)
-        .constraints([
-            Constraint::Percentage(33),
-            Constraint::Percentage(33),
-            Constraint::Percentage(33),
-        ]);
-
-    list_layout.split(*area)
-}
-
-fn split_cols(area: &Rect) -> Rc<[Rect]> {
-    let list_layout = Layout::default()
-        .direction(Direction::Horizontal)
-        .margin(0)
-        .constraints([
-            Constraint::Percentage(25),
-            Constraint::Percentage(25),
-            Constraint::Percentage(25),
-            Constraint::Percentage(25),
-        ]);
-
-    list_layout.split(*area)
-}
-
 fn make_dates(current_year: i32) -> CalendarEventStore {
     let mut list = CalendarEventStore::today(
         Style::default()
@@ -173,22 +152,21 @@ fn make_dates(current_year: i32) -> CalendarEventStore {
 }
 
 mod cals {
+    #[allow(clippy::wildcard_imports)]
     use super::*;
 
-    pub(super) fn get_cal<'a, S: DateStyler>(m: Month, y: i32, es: S) -> Monthly<'a, S> {
-        use Month::*;
+    pub fn get_cal<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
         match m {
-            May => example1(m, y, es),
-            June => example2(m, y, es),
-            July => example3(m, y, es),
-            December => example3(m, y, es),
-            February => example4(m, y, es),
-            November => example5(m, y, es),
+            Month::May => example1(m, y, es),
+            Month::June => example2(m, y, es),
+            Month::July | Month::December => example3(m, y, es),
+            Month::February => example4(m, y, es),
+            Month::November => example5(m, y, es),
             _ => default(m, y, es),
         }
     }
 
-    fn default<'a, S: DateStyler>(m: Month, y: i32, es: S) -> Monthly<'a, S> {
+    fn default<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
         let default_style = Style::default()
             .add_modifier(Modifier::BOLD)
             .bg(Color::Rgb(50, 50, 50));
@@ -198,7 +176,7 @@ mod cals {
             .default_style(default_style)
     }
 
-    fn example1<'a, S: DateStyler>(m: Month, y: i32, es: S) -> Monthly<'a, S> {
+    fn example1<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
         let default_style = Style::default()
             .add_modifier(Modifier::BOLD)
             .bg(Color::Rgb(50, 50, 50));
@@ -209,7 +187,7 @@ mod cals {
             .show_month_header(Style::default())
     }
 
-    fn example2<'a, S: DateStyler>(m: Month, y: i32, es: S) -> Monthly<'a, S> {
+    fn example2<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
         let header_style = Style::default()
             .add_modifier(Modifier::BOLD)
             .add_modifier(Modifier::DIM)
@@ -225,7 +203,7 @@ mod cals {
             .show_month_header(Style::default())
     }
 
-    fn example3<'a, S: DateStyler>(m: Month, y: i32, es: S) -> Monthly<'a, S> {
+    fn example3<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
         let header_style = Style::default()
             .add_modifier(Modifier::BOLD)
             .fg(Color::Green);
@@ -241,7 +219,7 @@ mod cals {
             .show_month_header(Style::default())
     }
 
-    fn example4<'a, S: DateStyler>(m: Month, y: i32, es: S) -> Monthly<'a, S> {
+    fn example4<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
         let header_style = Style::default()
             .add_modifier(Modifier::BOLD)
             .fg(Color::Green);
@@ -255,7 +233,7 @@ mod cals {
             .default_style(default_style)
     }
 
-    fn example5<'a, S: DateStyler>(m: Month, y: i32, es: S) -> Monthly<'a, S> {
+    fn example5<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
         let header_style = Style::default()
             .add_modifier(Modifier::BOLD)
             .fg(Color::Green);

examples/canvas.rs

@@ -1,20 +1,39 @@
-use std::{
-    io::{self, stdout, Stdout},
-    time::{Duration, Instant},
-};
+//! # [Ratatui] Canvas example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, Event, KeyCode},
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-    ExecutableCommand,
-};
+use std::time::{Duration, Instant};
+
+use color_eyre::Result;
 use ratatui::{
-    prelude::*,
-    widgets::{canvas::*, *},
+    crossterm::event::{self, Event, KeyCode},
+    layout::{Constraint, Layout, Rect},
+    style::{Color, Stylize},
+    symbols::Marker,
+    widgets::{
+        canvas::{Canvas, Circle, Map, MapResolution, Rectangle},
+        Block, Widget,
+    },
+    DefaultTerminal, Frame,
 };
 
-fn main() -> io::Result<()> {
-    App::run()
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
 }
 
 struct App {
@@ -29,8 +48,8 @@ struct App {
 }
 
 impl App {
-    fn new() -> App {
-        App {
+    fn new() -> Self {
+        Self {
             x: 0.0,
             y: 0.0,
             ball: Circle {
@@ -47,33 +66,30 @@ impl App {
         }
     }
 
-    pub fn run() -> io::Result<()> {
-        let mut terminal = init_terminal()?;
-        let mut app = App::new();
-        let mut last_tick = Instant::now();
+    pub fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
         let tick_rate = Duration::from_millis(16);
+        let mut last_tick = Instant::now();
         loop {
-            let _ = terminal.draw(|frame| app.ui(frame));
+            terminal.draw(|frame| self.draw(frame))?;
             let timeout = tick_rate.saturating_sub(last_tick.elapsed());
             if event::poll(timeout)? {
                 if let Event::Key(key) = event::read()? {
                     match key.code {
-                        KeyCode::Char('q') => break,
-                        KeyCode::Down | KeyCode::Char('j') => app.y += 1.0,
-                        KeyCode::Up | KeyCode::Char('k') => app.y -= 1.0,
-                        KeyCode::Right | KeyCode::Char('l') => app.x += 1.0,
-                        KeyCode::Left | KeyCode::Char('h') => app.x -= 1.0,
+                        KeyCode::Char('q') => break Ok(()),
+                        KeyCode::Down | KeyCode::Char('j') => self.y += 1.0,
+                        KeyCode::Up | KeyCode::Char('k') => self.y -= 1.0,
+                        KeyCode::Right | KeyCode::Char('l') => self.x += 1.0,
+                        KeyCode::Left | KeyCode::Char('h') => self.x -= 1.0,
                         _ => {}
                     }
                 }
             }
 
             if last_tick.elapsed() >= tick_rate {
-                app.on_tick();
+                self.on_tick();
                 last_tick = Instant::now();
             }
         }
-        restore_terminal()
     }
 
     fn on_tick(&mut self) {
@@ -91,13 +107,13 @@ impl App {
         // bounce the ball by flipping the velocity vector
         let ball = &self.ball;
         let playground = self.playground;
-        if ball.x - ball.radius < playground.left() as f64
-            || ball.x + ball.radius > playground.right() as f64
+        if ball.x - ball.radius < f64::from(playground.left())
+            || ball.x + ball.radius > f64::from(playground.right())
         {
             self.vx = -self.vx;
         }
-        if ball.y - ball.radius < playground.top() as f64
-            || ball.y + ball.radius > playground.bottom() as f64
+        if ball.y - ball.radius < f64::from(playground.top())
+            || ball.y + ball.radius > f64::from(playground.bottom())
         {
             self.vy = -self.vy;
         }
@@ -106,25 +122,21 @@ impl App {
         self.ball.y += self.vy;
     }
 
-    fn ui(&self, frame: &mut Frame) {
-        let main_layout = Layout::default()
-            .direction(Direction::Horizontal)
-            .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
-            .split(frame.size());
+    fn draw(&self, frame: &mut Frame) {
+        let horizontal =
+            Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]);
+        let vertical = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)]);
+        let [map, right] = horizontal.areas(frame.area());
+        let [pong, boxes] = vertical.areas(right);
 
-        let right_layout = Layout::default()
-            .direction(Direction::Vertical)
-            .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
-            .split(main_layout[1]);
-
-        frame.render_widget(self.map_canvas(), main_layout[0]);
-        frame.render_widget(self.pong_canvas(), right_layout[0]);
-        frame.render_widget(self.boxes_canvas(right_layout[1]), right_layout[1]);
+        frame.render_widget(self.map_canvas(), map);
+        frame.render_widget(self.pong_canvas(), pong);
+        frame.render_widget(self.boxes_canvas(boxes), boxes);
     }
 
     fn map_canvas(&self) -> impl Widget + '_ {
         Canvas::default()
-            .block(Block::default().borders(Borders::ALL).title("World"))
+            .block(Block::bordered().title("World"))
             .marker(self.marker)
             .paint(|ctx| {
                 ctx.draw(&Map {
@@ -139,7 +151,7 @@ impl App {
 
     fn pong_canvas(&self) -> impl Widget + '_ {
         Canvas::default()
-            .block(Block::default().borders(Borders::ALL).title("Pong"))
+            .block(Block::bordered().title("Pong"))
             .marker(self.marker)
             .paint(|ctx| {
                 ctx.draw(&self.ball);
@@ -149,50 +161,40 @@ impl App {
     }
 
     fn boxes_canvas(&self, area: Rect) -> impl Widget {
-        let (left, right, bottom, top) =
-            (0.0, area.width as f64, 0.0, area.height as f64 * 2.0 - 4.0);
+        let left = 0.0;
+        let right = f64::from(area.width);
+        let bottom = 0.0;
+        let top = f64::from(area.height).mul_add(2.0, -4.0);
         Canvas::default()
-            .block(Block::default().borders(Borders::ALL).title("Rects"))
+            .block(Block::bordered().title("Rects"))
             .marker(self.marker)
             .x_bounds([left, right])
             .y_bounds([bottom, top])
             .paint(|ctx| {
                 for i in 0..=11 {
                     ctx.draw(&Rectangle {
-                        x: (i * i + 3 * i) as f64 / 2.0 + 2.0,
+                        x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
                         y: 2.0,
-                        width: i as f64,
-                        height: i as f64,
+                        width: f64::from(i),
+                        height: f64::from(i),
                         color: Color::Red,
                     });
                     ctx.draw(&Rectangle {
-                        x: (i * i + 3 * i) as f64 / 2.0 + 2.0,
+                        x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
                         y: 21.0,
-                        width: i as f64,
-                        height: i as f64,
+                        width: f64::from(i),
+                        height: f64::from(i),
                         color: Color::Blue,
                     });
                 }
                 for i in 0..100 {
                     if i % 10 != 0 {
-                        ctx.print(i as f64 + 1.0, 0.0, format!("{i}", i = i % 10));
+                        ctx.print(f64::from(i) + 1.0, 0.0, format!("{i}", i = i % 10));
                     }
                     if i % 2 == 0 && i % 10 != 0 {
-                        ctx.print(0.0, i as f64, format!("{i}", i = i % 10));
+                        ctx.print(0.0, f64::from(i), format!("{i}", i = i % 10));
                     }
                 }
             })
     }
 }
-
-fn init_terminal() -> io::Result<Terminal<CrosstermBackend<Stdout>>> {
-    enable_raw_mode()?;
-    stdout().execute(EnterAlternateScreen)?;
-    Terminal::new(CrosstermBackend::new(stdout()))
-}
-
-fn restore_terminal() -> io::Result<()> {
-    disable_raw_mode()?;
-    stdout().execute(LeaveAlternateScreen)?;
-    Ok(())
-}

examples/chart.rs

@@ -1,29 +1,49 @@
-use std::{
-    error::Error,
-    io,
-    time::{Duration, Instant},
+//! # [Ratatui] Chart example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use std::time::{Duration, Instant};
+
+use color_eyre::Result;
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode},
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{Color, Modifier, Style, Stylize},
+    symbols::{self, Marker},
+    text::Span,
+    widgets::{block::Title, Axis, Block, Chart, Dataset, GraphType, LegendPosition},
+    DefaultTerminal, Frame,
 };
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
-use ratatui::{prelude::*, widgets::*};
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
+}
 
-const DATA: [(f64, f64); 5] = [(0.0, 0.0), (1.0, 1.0), (2.0, 2.0), (3.0, 3.0), (4.0, 4.0)];
-const DATA2: [(f64, f64); 7] = [
-    (0.0, 0.0),
-    (10.0, 1.0),
-    (20.0, 0.5),
-    (30.0, 1.5),
-    (40.0, 1.0),
-    (50.0, 2.5),
-    (60.0, 3.0),
-];
+struct App {
+    signal1: SinSignal,
+    data1: Vec<(f64, f64)>,
+    signal2: SinSignal,
+    data2: Vec<(f64, f64)>,
+    window: [f64; 2],
+}
 
 #[derive(Clone)]
-pub struct SinSignal {
+struct SinSignal {
     x: f64,
     interval: f64,
     period: f64,
@@ -31,8 +51,8 @@ pub struct SinSignal {
 }
 
 impl SinSignal {
-    pub fn new(interval: f64, period: f64, scale: f64) -> SinSignal {
-        SinSignal {
+    const fn new(interval: f64, period: f64, scale: f64) -> Self {
+        Self {
             x: 0.0,
             interval,
             period,
@@ -50,21 +70,13 @@ impl Iterator for SinSignal {
     }
 }
 
-struct App {
-    signal1: SinSignal,
-    data1: Vec<(f64, f64)>,
-    signal2: SinSignal,
-    data2: Vec<(f64, f64)>,
-    window: [f64; 2],
-}
-
 impl App {
-    fn new() -> App {
+    fn new() -> Self {
         let mut signal1 = SinSignal::new(0.2, 3.0, 18.0);
         let mut signal2 = SinSignal::new(0.1, 2.0, 10.0);
         let data1 = signal1.by_ref().take(200).collect::<Vec<(f64, f64)>>();
         let data2 = signal2.by_ref().take(200).collect::<Vec<(f64, f64)>>();
-        App {
+        Self {
             signal1,
             data1,
             signal2,
@@ -73,185 +85,293 @@ impl App {
         }
     }
 
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        let tick_rate = Duration::from_millis(250);
+        let mut last_tick = Instant::now();
+        loop {
+            terminal.draw(|frame| self.draw(frame))?;
+
+            let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+            if event::poll(timeout)? {
+                if let Event::Key(key) = event::read()? {
+                    if key.code == KeyCode::Char('q') {
+                        return Ok(());
+                    }
+                }
+            }
+            if last_tick.elapsed() >= tick_rate {
+                self.on_tick();
+                last_tick = Instant::now();
+            }
+        }
+    }
+
     fn on_tick(&mut self) {
-        for _ in 0..5 {
-            self.data1.remove(0);
-        }
+        self.data1.drain(0..5);
         self.data1.extend(self.signal1.by_ref().take(5));
-        for _ in 0..10 {
-            self.data2.remove(0);
-        }
+
+        self.data2.drain(0..10);
         self.data2.extend(self.signal2.by_ref().take(10));
+
         self.window[0] += 1.0;
         self.window[1] += 1.0;
     }
-}
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
+    fn draw(&self, frame: &mut Frame) {
+        let [top, bottom] = Layout::vertical([Constraint::Fill(1); 2]).areas(frame.area());
+        let [animated_chart, bar_chart] =
+            Layout::horizontal([Constraint::Fill(1), Constraint::Length(29)]).areas(top);
+        let [line_chart, scatter] = Layout::horizontal([Constraint::Fill(1); 2]).areas(bottom);
 
-    // create app and run it
-    let tick_rate = Duration::from_millis(250);
-    let app = App::new();
-    let res = run_app(&mut terminal, app, tick_rate);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
+        self.render_animated_chart(frame, animated_chart);
+        render_barchart(frame, bar_chart);
+        render_line_chart(frame, line_chart);
+        render_scatter(frame, scatter);
     }
 
-    Ok(())
-}
+    fn render_animated_chart(&self, frame: &mut Frame, area: Rect) {
+        let x_labels = vec![
+            Span::styled(
+                format!("{}", self.window[0]),
+                Style::default().add_modifier(Modifier::BOLD),
+            ),
+            Span::raw(format!("{}", (self.window[0] + self.window[1]) / 2.0)),
+            Span::styled(
+                format!("{}", self.window[1]),
+                Style::default().add_modifier(Modifier::BOLD),
+            ),
+        ];
+        let datasets = vec![
+            Dataset::default()
+                .name("data2")
+                .marker(symbols::Marker::Dot)
+                .style(Style::default().fg(Color::Cyan))
+                .data(&self.data1),
+            Dataset::default()
+                .name("data3")
+                .marker(symbols::Marker::Braille)
+                .style(Style::default().fg(Color::Yellow))
+                .data(&self.data2),
+        ];
 
-fn run_app<B: Backend>(
-    terminal: &mut Terminal<B>,
-    mut app: App,
-    tick_rate: Duration,
-) -> io::Result<()> {
-    let mut last_tick = Instant::now();
-    loop {
-        terminal.draw(|f| ui(f, &app))?;
+        let chart = Chart::new(datasets)
+            .block(Block::bordered())
+            .x_axis(
+                Axis::default()
+                    .title("X Axis")
+                    .style(Style::default().fg(Color::Gray))
+                    .labels(x_labels)
+                    .bounds(self.window),
+            )
+            .y_axis(
+                Axis::default()
+                    .title("Y Axis")
+                    .style(Style::default().fg(Color::Gray))
+                    .labels(["-20".bold(), "0".into(), "20".bold()])
+                    .bounds([-20.0, 20.0]),
+            );
 
-        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
-        if crossterm::event::poll(timeout)? {
-            if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
-                    return Ok(());
-                }
-            }
-        }
-        if last_tick.elapsed() >= tick_rate {
-            app.on_tick();
-            last_tick = Instant::now();
-        }
+        frame.render_widget(chart, area);
     }
 }
 
-fn ui(f: &mut Frame, app: &App) {
-    let size = f.size();
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Ratio(1, 3),
-            Constraint::Ratio(1, 3),
-            Constraint::Ratio(1, 3),
-        ])
-        .split(size);
-    let x_labels = vec![
-        Span::styled(
-            format!("{}", app.window[0]),
-            Style::default().add_modifier(Modifier::BOLD),
-        ),
-        Span::raw(format!("{}", (app.window[0] + app.window[1]) / 2.0)),
-        Span::styled(
-            format!("{}", app.window[1]),
-            Style::default().add_modifier(Modifier::BOLD),
-        ),
-    ];
-    let datasets = vec![
-        Dataset::default()
-            .name("data2")
-            .marker(symbols::Marker::Dot)
-            .style(Style::default().fg(Color::Cyan))
-            .data(&app.data1),
-        Dataset::default()
-            .name("data3")
-            .marker(symbols::Marker::Braille)
-            .style(Style::default().fg(Color::Yellow))
-            .data(&app.data2),
-    ];
+fn render_barchart(frame: &mut Frame, bar_chart: Rect) {
+    let dataset = Dataset::default()
+        .marker(symbols::Marker::HalfBlock)
+        .style(Style::new().fg(Color::Blue))
+        .graph_type(GraphType::Bar)
+        // a bell curve
+        .data(&[
+            (0., 0.4),
+            (10., 2.9),
+            (20., 13.5),
+            (30., 41.1),
+            (40., 80.1),
+            (50., 100.0),
+            (60., 80.1),
+            (70., 41.1),
+            (80., 13.5),
+            (90., 2.9),
+            (100., 0.4),
+        ]);
 
-    let chart = Chart::new(datasets)
+    let chart = Chart::new(vec![dataset])
         .block(
-            Block::default()
-                .title("Chart 1".cyan().bold())
-                .borders(Borders::ALL),
+            Block::bordered().title(
+                Title::default()
+                    .content("Bar chart".cyan().bold())
+                    .alignment(Alignment::Center),
+            ),
         )
         .x_axis(
             Axis::default()
-                .title("X Axis")
-                .style(Style::default().fg(Color::Gray))
-                .labels(x_labels)
-                .bounds(app.window),
+                .style(Style::default().gray())
+                .bounds([0.0, 100.0])
+                .labels(["0".bold(), "50".into(), "100.0".bold()]),
         )
         .y_axis(
             Axis::default()
-                .title("Y Axis")
-                .style(Style::default().fg(Color::Gray))
-                .labels(vec!["-20".bold(), "0".into(), "20".bold()])
-                .bounds([-20.0, 20.0]),
-        );
-    f.render_widget(chart, chunks[0]);
-
-    let datasets = vec![Dataset::default()
-        .name("data")
-        .marker(symbols::Marker::Braille)
-        .style(Style::default().fg(Color::Yellow))
-        .graph_type(GraphType::Line)
-        .data(&DATA)];
-    let chart = Chart::new(datasets)
-        .block(
-            Block::default()
-                .title("Chart 2".cyan().bold())
-                .borders(Borders::ALL),
-        )
-        .x_axis(
-            Axis::default()
-                .title("X Axis")
-                .style(Style::default().fg(Color::Gray))
-                .bounds([0.0, 5.0])
-                .labels(vec!["0".bold(), "2.5".into(), "5.0".bold()]),
-        )
-        .y_axis(
-            Axis::default()
-                .title("Y Axis")
-                .style(Style::default().fg(Color::Gray))
-                .bounds([0.0, 5.0])
-                .labels(vec!["0".bold(), "2.5".into(), "5.0".bold()]),
+                .style(Style::default().gray())
+                .bounds([0.0, 100.0])
+                .labels(["0".bold(), "50".into(), "100.0".bold()]),
         )
         .hidden_legend_constraints((Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)));
-    f.render_widget(chart, chunks[1]);
 
+    frame.render_widget(chart, bar_chart);
+}
+
+fn render_line_chart(frame: &mut Frame, area: Rect) {
     let datasets = vec![Dataset::default()
-        .name("data")
+        .name("Line from only 2 points".italic())
         .marker(symbols::Marker::Braille)
         .style(Style::default().fg(Color::Yellow))
         .graph_type(GraphType::Line)
-        .data(&DATA2)];
+        .data(&[(1., 1.), (4., 4.)])];
+
     let chart = Chart::new(datasets)
         .block(
-            Block::default()
-                .title("Chart 3".cyan().bold())
-                .borders(Borders::ALL),
+            Block::bordered().title(
+                Title::default()
+                    .content("Line chart".cyan().bold())
+                    .alignment(Alignment::Center),
+            ),
         )
         .x_axis(
             Axis::default()
                 .title("X Axis")
-                .style(Style::default().fg(Color::Gray))
-                .bounds([0.0, 50.0])
-                .labels(vec!["0".bold(), "25".into(), "50".bold()]),
+                .style(Style::default().gray())
+                .bounds([0.0, 5.0])
+                .labels(["0".bold(), "2.5".into(), "5.0".bold()]),
         )
         .y_axis(
             Axis::default()
                 .title("Y Axis")
-                .style(Style::default().fg(Color::Gray))
+                .style(Style::default().gray())
                 .bounds([0.0, 5.0])
-                .labels(vec!["0".bold(), "2.5".into(), "5".bold()]),
+                .labels(["0".bold(), "2.5".into(), "5.0".bold()]),
         )
         .legend_position(Some(LegendPosition::TopLeft))
         .hidden_legend_constraints((Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)));
-    f.render_widget(chart, chunks[2]);
+
+    frame.render_widget(chart, area);
 }
+
+fn render_scatter(frame: &mut Frame, area: Rect) {
+    let datasets = vec![
+        Dataset::default()
+            .name("Heavy")
+            .marker(Marker::Dot)
+            .graph_type(GraphType::Scatter)
+            .style(Style::new().yellow())
+            .data(&HEAVY_PAYLOAD_DATA),
+        Dataset::default()
+            .name("Medium".underlined())
+            .marker(Marker::Braille)
+            .graph_type(GraphType::Scatter)
+            .style(Style::new().magenta())
+            .data(&MEDIUM_PAYLOAD_DATA),
+        Dataset::default()
+            .name("Small")
+            .marker(Marker::Dot)
+            .graph_type(GraphType::Scatter)
+            .style(Style::new().cyan())
+            .data(&SMALL_PAYLOAD_DATA),
+    ];
+
+    let chart = Chart::new(datasets)
+        .block(
+            Block::bordered().title(
+                Title::default()
+                    .content("Scatter chart".cyan().bold())
+                    .alignment(Alignment::Center),
+            ),
+        )
+        .x_axis(
+            Axis::default()
+                .title("Year")
+                .bounds([1960., 2020.])
+                .style(Style::default().fg(Color::Gray))
+                .labels(["1960", "1990", "2020"]),
+        )
+        .y_axis(
+            Axis::default()
+                .title("Cost")
+                .bounds([0., 75000.])
+                .style(Style::default().fg(Color::Gray))
+                .labels(["0", "37 500", "75 000"]),
+        )
+        .hidden_legend_constraints((Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)));
+
+    frame.render_widget(chart, area);
+}
+
+// Data from https://ourworldindata.org/space-exploration-satellites
+const HEAVY_PAYLOAD_DATA: [(f64, f64); 9] = [
+    (1965., 8200.),
+    (1967., 5400.),
+    (1981., 65400.),
+    (1989., 30800.),
+    (1997., 10200.),
+    (2004., 11600.),
+    (2014., 4500.),
+    (2016., 7900.),
+    (2018., 1500.),
+];
+
+const MEDIUM_PAYLOAD_DATA: [(f64, f64); 29] = [
+    (1963., 29500.),
+    (1964., 30600.),
+    (1965., 177_900.),
+    (1965., 21000.),
+    (1966., 17900.),
+    (1966., 8400.),
+    (1975., 17500.),
+    (1982., 8300.),
+    (1985., 5100.),
+    (1988., 18300.),
+    (1990., 38800.),
+    (1990., 9900.),
+    (1991., 18700.),
+    (1992., 9100.),
+    (1994., 10500.),
+    (1994., 8500.),
+    (1994., 8700.),
+    (1997., 6200.),
+    (1999., 18000.),
+    (1999., 7600.),
+    (1999., 8900.),
+    (1999., 9600.),
+    (2000., 16000.),
+    (2001., 10000.),
+    (2002., 10400.),
+    (2002., 8100.),
+    (2010., 2600.),
+    (2013., 13600.),
+    (2017., 8000.),
+];
+
+const SMALL_PAYLOAD_DATA: [(f64, f64); 23] = [
+    (1961., 118_500.),
+    (1962., 14900.),
+    (1975., 21400.),
+    (1980., 32800.),
+    (1988., 31100.),
+    (1990., 41100.),
+    (1993., 23600.),
+    (1994., 20600.),
+    (1994., 34600.),
+    (1996., 50600.),
+    (1997., 19200.),
+    (1997., 45800.),
+    (1998., 19100.),
+    (2000., 73100.),
+    (2003., 11200.),
+    (2008., 12600.),
+    (2010., 30500.),
+    (2012., 20000.),
+    (2013., 10600.),
+    (2013., 34500.),
+    (2015., 10600.),
+    (2018., 23100.),
+    (2019., 17300.),
+];

examples/colors.rs

@@ -1,55 +1,58 @@
-/// This example shows all the colors supported by ratatui. It will render a grid of foreground
-/// and background colors with their names and indexes.
-use std::{
-    error::Error,
-    io::{self, Stdout},
-    result,
-    time::Duration,
-};
+//! # [Ratatui] Colors example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
+// This example shows all the colors supported by ratatui. It will render a grid of foreground
+// and background colors with their names and indexes.
+
+use color_eyre::Result;
 use itertools::Itertools;
-use ratatui::{prelude::*, widgets::*};
-
-type Result<T> = result::Result<T, Box<dyn Error>>;
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{Color, Style, Stylize},
+    text::Line,
+    widgets::{Block, Borders, Paragraph},
+    DefaultTerminal, Frame,
+};
 
 fn main() -> Result<()> {
-    let mut terminal = setup_terminal()?;
-    let res = run_app(&mut terminal);
-    restore_terminal(terminal)?;
-    if let Err(err) = res {
-        eprintln!("{err:?}");
-    }
-    Ok(())
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = run(terminal);
+    ratatui::restore();
+    app_result
 }
 
-fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
+fn run(mut terminal: DefaultTerminal) -> Result<()> {
     loop {
-        terminal.draw(ui)?;
-
-        if event::poll(Duration::from_millis(250))? {
-            if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
-                    return Ok(());
-                }
+        terminal.draw(draw)?;
+        if let Event::Key(key) = event::read()? {
+            if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                return Ok(());
             }
         }
     }
 }
 
-fn ui(frame: &mut Frame) {
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Length(30),
-            Constraint::Length(17),
-            Constraint::Length(2),
-        ])
-        .split(frame.size());
+fn draw(frame: &mut Frame) {
+    let layout = Layout::vertical([
+        Constraint::Length(30),
+        Constraint::Length(17),
+        Constraint::Length(2),
+    ])
+    .split(frame.area());
 
     render_named_colors(frame, layout[0]);
     render_indexed_colors(frame, layout[1]);
@@ -76,10 +79,7 @@ const NAMED_COLORS: [Color; 16] = [
 ];
 
 fn render_named_colors(frame: &mut Frame, area: Rect) {
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Length(3); 10])
-        .split(area);
+    let layout = Layout::vertical([Constraint::Length(3); 10]).split(area);
 
     render_fg_named_colors(frame, Color::Reset, layout[0]);
     render_fg_named_colors(frame, Color::Black, layout[1]);
@@ -99,15 +99,11 @@ fn render_fg_named_colors(frame: &mut Frame, bg: Color, area: Rect) {
     let inner = block.inner(area);
     frame.render_widget(block, area);
 
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Length(1); 2])
+    let layout = Layout::vertical([Constraint::Length(1); 2])
         .split(inner)
         .iter()
         .flat_map(|area| {
-            Layout::default()
-                .direction(Direction::Horizontal)
-                .constraints([Constraint::Ratio(1, 8); 8])
+            Layout::horizontal([Constraint::Ratio(1, 8); 8])
                 .split(*area)
                 .to_vec()
         })
@@ -124,15 +120,11 @@ fn render_bg_named_colors(frame: &mut Frame, fg: Color, area: Rect) {
     let inner = block.inner(area);
     frame.render_widget(block, area);
 
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Length(1); 2])
+    let layout = Layout::vertical([Constraint::Length(1); 2])
         .split(inner)
         .iter()
         .flat_map(|area| {
-            Layout::default()
-                .direction(Direction::Horizontal)
-                .constraints([Constraint::Ratio(1, 8); 8])
+            Layout::horizontal([Constraint::Ratio(1, 8); 8])
                 .split(*area)
                 .to_vec()
         })
@@ -149,23 +141,18 @@ fn render_indexed_colors(frame: &mut Frame, area: Rect) {
     let inner = block.inner(area);
     frame.render_widget(block, area);
 
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Length(1), // 0 - 15
-            Constraint::Length(1), // blank
-            Constraint::Min(6),    // 16 - 123
-            Constraint::Length(1), // blank
-            Constraint::Min(6),    // 124 - 231
-            Constraint::Length(1), // blank
-        ])
-        .split(inner);
+    let layout = Layout::vertical([
+        Constraint::Length(1), // 0 - 15
+        Constraint::Length(1), // blank
+        Constraint::Min(6),    // 16 - 123
+        Constraint::Length(1), // blank
+        Constraint::Min(6),    // 124 - 231
+        Constraint::Length(1), // blank
+    ])
+    .split(inner);
 
     //    0   1   2   3   4   5    6   7   8   9  10  11   12  13  14  15
-    let color_layout = Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([Constraint::Length(5); 16])
-        .split(layout[0]);
+    let color_layout = Layout::horizontal([Constraint::Length(5); 16]).split(layout[0]);
     for i in 0..16 {
         let color = Color::Indexed(i);
         let color_index = format!("{i:0>2}");
@@ -196,25 +183,19 @@ fn render_indexed_colors(frame: &mut Frame, area: Rect) {
         .iter()
         // two rows of 3 columns
         .flat_map(|area| {
-            Layout::default()
-                .direction(Direction::Horizontal)
-                .constraints([Constraint::Length(27); 3])
+            Layout::horizontal([Constraint::Length(27); 3])
                 .split(*area)
                 .to_vec()
         })
         // each with 6 rows
         .flat_map(|area| {
-            Layout::default()
-                .direction(Direction::Vertical)
-                .constraints([Constraint::Length(1); 6])
+            Layout::vertical([Constraint::Length(1); 6])
                 .split(area)
                 .to_vec()
         })
         // each with 6 columns
         .flat_map(|area| {
-            Layout::default()
-                .direction(Direction::Horizontal)
-                .constraints([Constraint::Min(4); 6])
+            Layout::horizontal([Constraint::Min(4); 6])
                 .split(area)
                 .to_vec()
         })
@@ -235,31 +216,27 @@ fn render_indexed_colors(frame: &mut Frame, area: Rect) {
 }
 
 fn title_block(title: String) -> Block<'static> {
-    Block::default()
+    Block::new()
         .borders(Borders::TOP)
-        .border_style(Style::new().dark_gray())
-        .title(title)
         .title_alignment(Alignment::Center)
+        .border_style(Style::new().dark_gray())
         .title_style(Style::new().reset())
+        .title(title)
 }
 
 fn render_indexed_grayscale(frame: &mut Frame, area: Rect) {
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Length(1), // 232 - 243
-            Constraint::Length(1), // 244 - 255
-        ])
-        .split(area)
-        .iter()
-        .flat_map(|area| {
-            Layout::default()
-                .direction(Direction::Horizontal)
-                .constraints([Constraint::Length(6); 12])
-                .split(*area)
-                .to_vec()
-        })
-        .collect_vec();
+    let layout = Layout::vertical([
+        Constraint::Length(1), // 232 - 243
+        Constraint::Length(1), // 244 - 255
+    ])
+    .split(area)
+    .iter()
+    .flat_map(|area| {
+        Layout::horizontal([Constraint::Length(6); 12])
+            .split(*area)
+            .to_vec()
+    })
+    .collect_vec();
 
     for i in 232..=255 {
         let color = Color::Indexed(i);
@@ -276,20 +253,3 @@ fn render_indexed_grayscale(frame: &mut Frame, area: Rect) {
         frame.render_widget(paragraph, layout[i as usize - 232]);
     }
 }
-
-fn setup_terminal() -> Result<Terminal<CrosstermBackend<Stdout>>> {
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-    terminal.hide_cursor()?;
-    Ok(terminal)
-}
-
-fn restore_terminal(mut terminal: Terminal<CrosstermBackend<Stdout>>) -> Result<()> {
-    disable_raw_mode()?;
-    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
-    terminal.show_cursor()?;
-    Ok(())
-}

examples/colors_rgb.rs

@@ -1,107 +1,245 @@
-/// This example shows the full range of RGB colors that can be displayed in the terminal.
-///
-/// Requires a terminal that supports 24-bit color (true color) and unicode.
-use std::{
-    io::stdout,
-    time::{Duration, Instant},
-};
+//! # [Ratatui] `Colors_RGB` example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use color_eyre::config::HookBuilder;
-use crossterm::{
-    event::{self, Event, KeyCode, KeyEventKind},
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-    ExecutableCommand,
-};
+// This example shows the full range of RGB colors that can be displayed in the terminal.
+//
+// Requires a terminal that supports 24-bit color (true color) and unicode.
+//
+// This example also demonstrates how implementing the Widget trait on a mutable reference
+// allows the widget to update its state while it is being rendered. This allows the fps
+// widget to update the fps calculation and the colors widget to update a cached version of
+// the colors to render instead of recalculating them every frame.
+//
+// This is an alternative to using the `StatefulWidget` trait and a separate state struct. It
+// is useful when the state is only used by the widget and doesn't need to be shared with
+// other widgets.
+
+use std::time::{Duration, Instant};
+
+use color_eyre::Result;
 use palette::{convert::FromColorUnclamped, Okhsv, Srgb};
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Layout, Position, Rect},
+    style::Color,
+    text::Text,
+    widgets::Widget,
+    DefaultTerminal,
+};
 
-fn main() -> color_eyre::Result<()> {
-    App::run()
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
 }
 
 #[derive(Debug, Default)]
 struct App {
-    should_quit: bool,
-    // a 2d vec of the colors to render, calculated when the size changes as this is expensive
-    // to calculate every frame
-    colors: Vec<Vec<Color>>,
-    last_size: Rect,
-    fps: Fps,
-    frame_count: usize,
+    /// The current state of the app (running or quit)
+    state: AppState,
+
+    /// A widget that displays the current frames per second
+    fps_widget: FpsWidget,
+
+    /// A widget that displays the full range of RGB colors that can be displayed in the terminal.
+    colors_widget: ColorsWidget,
 }
 
+#[derive(Debug, Default, PartialEq, Eq)]
+enum AppState {
+    /// The app is running
+    #[default]
+    Running,
+
+    /// The user has requested the app to quit
+    Quit,
+}
+
+/// A widget that displays the current frames per second
 #[derive(Debug)]
-struct Fps {
+struct FpsWidget {
+    /// The number of elapsed frames that have passed - used to calculate the fps
     frame_count: usize,
+
+    /// The last instant that the fps was calculated
     last_instant: Instant,
+
+    /// The current frames per second
     fps: Option<f32>,
 }
 
-struct AppWidget<'a> {
-    title: Paragraph<'a>,
-    fps_widget: FpsWidget<'a>,
-    rgb_colors_widget: RgbColorsWidget<'a>,
-}
+/// A widget that displays the full range of RGB colors that can be displayed in the terminal.
+///
+/// This widget is animated and will change colors over time.
+#[derive(Debug, Default)]
+struct ColorsWidget {
+    /// The colors to render - should be double the height of the area as we render two rows of
+    /// pixels for each row of the widget using the half block character. This is computed any time
+    /// the size of the widget changes.
+    colors: Vec<Vec<Color>>,
 
-struct FpsWidget<'a> {
-    fps: &'a Fps,
-}
-
-struct RgbColorsWidget<'a> {
-    /// The colors to render - should be double the height of the area
-    colors: &'a Vec<Vec<Color>>,
-    /// the number of elapsed frames that have passed - used to animate the colors
+    /// the number of elapsed frames that have passed - used to animate the colors by shifting the
+    /// x index by the frame number
     frame_count: usize,
 }
 
 impl App {
-    pub fn run() -> color_eyre::Result<()> {
-        install_panic_hook()?;
-
-        let mut terminal = init_terminal()?;
-        let mut app = Self::default();
-
-        while !app.should_quit {
-            app.tick();
-            terminal.draw(|frame| {
-                let size = frame.size();
-                app.setup_colors(size);
-                frame.render_widget(AppWidget::new(&app), size);
-            })?;
-            app.handle_events()?;
+    /// Run the app
+    ///
+    /// This is the main event loop for the app.
+    pub fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        while self.is_running() {
+            terminal.draw(|frame| frame.render_widget(&mut self, frame.area()))?;
+            self.handle_events()?;
         }
-        restore_terminal()?;
         Ok(())
     }
 
-    fn tick(&mut self) {
-        self.frame_count += 1;
-        self.fps.tick();
+    const fn is_running(&self) -> bool {
+        matches!(self.state, AppState::Running)
     }
 
-    fn handle_events(&mut self) -> color_eyre::Result<()> {
-        if event::poll(Duration::from_secs_f32(1.0 / 60.0))? {
+    /// Handle any events that have occurred since the last time the app was rendered.
+    ///
+    /// Currently, this only handles the q key to quit the app.
+    fn handle_events(&mut self) -> Result<()> {
+        // Ensure that the app only blocks for a period that allows the app to render at
+        // approximately 60 FPS (this doesn't account for the time to render the frame, and will
+        // also update the app immediately any time an event occurs)
+        let timeout = Duration::from_secs_f32(1.0 / 60.0);
+        if event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
                 if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
-                    self.should_quit = true;
+                    self.state = AppState::Quit;
                 };
             }
         }
         Ok(())
     }
+}
 
-    fn setup_colors(&mut self, size: Rect) {
-        // only update the colors if the size has changed since the last time we rendered
-        if self.last_size.width == size.width && self.last_size.height == size.height {
-            return;
+/// Implement the Widget trait for &mut App so that it can be rendered
+///
+/// This is implemented on a mutable reference so that the app can update its state while it is
+/// being rendered. This allows the fps widget to update the fps calculation and the colors widget
+/// to update the colors to render.
+impl Widget for &mut App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::{Length, Min};
+        let [top, colors] = Layout::vertical([Length(1), Min(0)]).areas(area);
+        let [title, fps] = Layout::horizontal([Min(0), Length(8)]).areas(top);
+        Text::from("colors_rgb example. Press q to quit")
+            .centered()
+            .render(title, buf);
+        self.fps_widget.render(fps, buf);
+        self.colors_widget.render(colors, buf);
+    }
+}
+
+/// Default impl for `FpsWidget`
+///
+/// Manual impl is required because we need to initialize the `last_instant` field to the current
+/// instant.
+impl Default for FpsWidget {
+    fn default() -> Self {
+        Self {
+            frame_count: 0,
+            last_instant: Instant::now(),
+            fps: None,
         }
-        self.last_size = size;
+    }
+}
+
+/// Widget impl for `FpsWidget`
+///
+/// This is implemented on a mutable reference so that we can update the frame count and fps
+/// calculation while rendering.
+impl Widget for &mut FpsWidget {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        self.calculate_fps();
+        if let Some(fps) = self.fps {
+            let text = format!("{fps:.1} fps");
+            Text::from(text).render(area, buf);
+        }
+    }
+}
+
+impl FpsWidget {
+    /// Update the fps calculation.
+    ///
+    /// This updates the fps once a second, but only if the widget has rendered at least 2 frames
+    /// since the last calculation. This avoids noise in the fps calculation when rendering on slow
+    /// machines that can't render at least 2 frames per second.
+    #[allow(clippy::cast_precision_loss)]
+    fn calculate_fps(&mut self) {
+        self.frame_count += 1;
+        let elapsed = self.last_instant.elapsed();
+        if elapsed > Duration::from_secs(1) && self.frame_count > 2 {
+            self.fps = Some(self.frame_count as f32 / elapsed.as_secs_f32());
+            self.frame_count = 0;
+            self.last_instant = Instant::now();
+        }
+    }
+}
+
+/// Widget impl for `ColorsWidget`
+///
+/// This is implemented on a mutable reference so that we can update the frame count and store a
+/// cached version of the colors to render instead of recalculating them every frame.
+impl Widget for &mut ColorsWidget {
+    /// Render the widget
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        self.setup_colors(area);
+        let colors = &self.colors;
+        for (xi, x) in (area.left()..area.right()).enumerate() {
+            // animate the colors by shifting the x index by the frame number
+            let xi = (xi + self.frame_count) % (area.width as usize);
+            for (yi, y) in (area.top()..area.bottom()).enumerate() {
+                // render a half block character for each row of pixels with the foreground color
+                // set to the color of the pixel and the background color set to the color of the
+                // pixel below it
+                let fg = colors[yi * 2][xi];
+                let bg = colors[yi * 2 + 1][xi];
+                buf[Position::new(x, y)].set_char('▀').set_fg(fg).set_bg(bg);
+            }
+        }
+        self.frame_count += 1;
+    }
+}
+
+impl ColorsWidget {
+    /// Setup the colors to render.
+    ///
+    /// This is called once per frame to setup the colors to render. It caches the colors so that
+    /// they don't need to be recalculated every frame.
+    #[allow(clippy::cast_precision_loss)]
+    fn setup_colors(&mut self, size: Rect) {
         let Rect { width, height, .. } = size;
         // double the height because each screen row has two rows of half block pixels
-        let height = height * 2;
-        self.colors.clear();
+        let height = height as usize * 2;
+        let width = width as usize;
+        // only update the colors if the size has changed since the last time we rendered
+        if self.colors.len() == height && self.colors[0].len() == width {
+            return;
+        }
+        self.colors = Vec::with_capacity(height);
         for y in 0..height {
-            let mut row = Vec::new();
+            let mut row = Vec::with_capacity(width);
             for x in 0..width {
                 let hue = x as f32 * 360.0 / width as f32;
                 let value = (height - y) as f32 / height as f32;
@@ -116,114 +254,3 @@ impl App {
         }
     }
 }
-
-impl Fps {
-    fn tick(&mut self) {
-        self.frame_count += 1;
-        let elapsed = self.last_instant.elapsed();
-        // update the fps every second, but only if we've rendered at least 2 frames (to avoid
-        // noise in the fps calculation)
-        if elapsed > Duration::from_secs(1) && self.frame_count > 2 {
-            self.fps = Some(self.frame_count as f32 / elapsed.as_secs_f32());
-            self.frame_count = 0;
-            self.last_instant = Instant::now();
-        }
-    }
-}
-
-impl Default for Fps {
-    fn default() -> Self {
-        Self {
-            frame_count: 0,
-            last_instant: Instant::now(),
-            fps: None,
-        }
-    }
-}
-
-impl<'a> AppWidget<'a> {
-    fn new(app: &'a App) -> Self {
-        let title =
-            Paragraph::new("colors_rgb example. Press q to quit").alignment(Alignment::Center);
-        Self {
-            title,
-            fps_widget: FpsWidget { fps: &app.fps },
-            rgb_colors_widget: RgbColorsWidget {
-                colors: &app.colors,
-                frame_count: app.frame_count,
-            },
-        }
-    }
-}
-
-impl Widget for AppWidget<'_> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
-        let main_layout = Layout::default()
-            .direction(Direction::Vertical)
-            .constraints([Constraint::Length(1), Constraint::Min(0)])
-            .split(area);
-        let title_layout = Layout::default()
-            .direction(Direction::Horizontal)
-            .constraints([Constraint::Min(0), Constraint::Length(8)])
-            .split(main_layout[0]);
-
-        self.title.render(title_layout[0], buf);
-        self.fps_widget.render(title_layout[1], buf);
-        self.rgb_colors_widget.render(main_layout[1], buf);
-    }
-}
-
-impl Widget for RgbColorsWidget<'_> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
-        let colors = self.colors;
-        for (xi, x) in (area.left()..area.right()).enumerate() {
-            // animate the colors by shifting the x index by the frame number
-            let xi = (xi + self.frame_count) % (area.width as usize);
-            for (yi, y) in (area.top()..area.bottom()).enumerate() {
-                let fg = colors[yi * 2][xi];
-                let bg = colors[yi * 2 + 1][xi];
-                buf.get_mut(x, y).set_char('▀').set_fg(fg).set_bg(bg);
-            }
-        }
-    }
-}
-
-impl<'a> Widget for FpsWidget<'a> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
-        if let Some(fps) = self.fps.fps {
-            let text = format!("{:.1} fps", fps);
-            Paragraph::new(text).render(area, buf);
-        }
-    }
-}
-
-/// Install a panic hook that restores the terminal before panicking.
-fn install_panic_hook() -> color_eyre::Result<()> {
-    let (panic, error) = HookBuilder::default().into_hooks();
-    let panic = panic.into_panic_hook();
-    let error = error.into_eyre_hook();
-    color_eyre::eyre::set_hook(Box::new(move |e| {
-        let _ = restore_terminal();
-        error(e)
-    }))?;
-    std::panic::set_hook(Box::new(move |info| {
-        let _ = restore_terminal();
-        panic(info)
-    }));
-    Ok(())
-}
-
-fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
-    enable_raw_mode()?;
-    stdout().execute(EnterAlternateScreen)?;
-    let mut terminal = Terminal::new(CrosstermBackend::new(stdout()))?;
-    terminal.clear()?;
-    terminal.hide_cursor()?;
-    Ok(terminal)
-}
-
-fn restore_terminal() -> color_eyre::Result<()> {
-    disable_raw_mode()?;
-    stdout().execute(LeaveAlternateScreen)?;
-    Ok(())
-}

examples/constraint-explorer.rs

@@ -0,0 +1,611 @@
+//! # [Ratatui] Constraint explorer example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use color_eyre::Result;
+use itertools::Itertools;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{
+        Constraint::{self, Fill, Length, Max, Min, Percentage, Ratio},
+        Flex, Layout, Rect,
+    },
+    style::{
+        palette::tailwind::{BLUE, SKY, SLATE, STONE},
+        Color, Style, Stylize,
+    },
+    symbols::{self, line},
+    text::{Line, Span, Text},
+    widgets::{Block, Paragraph, Widget, Wrap},
+    DefaultTerminal,
+};
+use strum::{Display, EnumIter, FromRepr};
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
+}
+
+#[derive(Default)]
+struct App {
+    mode: AppMode,
+    spacing: u16,
+    constraints: Vec<Constraint>,
+    selected_index: usize,
+    value: u16,
+}
+
+#[derive(Debug, Default, PartialEq, Eq)]
+enum AppMode {
+    #[default]
+    Running,
+    Quit,
+}
+
+/// A variant of [`Constraint`] that can be rendered as a tab.
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq, EnumIter, FromRepr, Display)]
+enum ConstraintName {
+    #[default]
+    Length,
+    Percentage,
+    Ratio,
+    Min,
+    Max,
+    Fill,
+}
+
+/// A widget that renders a [`Constraint`] as a block. E.g.:
+/// ```plain
+/// ┌──────────────┐
+/// │  Length(16)  │
+/// │     16px     │
+/// └──────────────┘
+/// ```
+struct ConstraintBlock {
+    constraint: Constraint,
+    legend: bool,
+    selected: bool,
+}
+
+/// A widget that renders a spacer with a label indicating the width of the spacer. E.g.:
+///
+/// ```plain
+/// ┌      ┐
+///   8 px
+/// └      ┘
+/// ```
+struct SpacerBlock;
+
+// App behaviour
+impl App {
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        self.insert_test_defaults();
+
+        while self.is_running() {
+            terminal.draw(|frame| frame.render_widget(&self, frame.area()))?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
+
+    // TODO remove these - these are just for testing
+    fn insert_test_defaults(&mut self) {
+        self.constraints = vec![
+            Constraint::Length(20),
+            Constraint::Length(20),
+            Constraint::Length(20),
+        ];
+        self.value = 20;
+    }
+
+    fn is_running(&self) -> bool {
+        self.mode == AppMode::Running
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        match event::read()? {
+            Event::Key(key) if key.kind == KeyEventKind::Press => match key.code {
+                KeyCode::Char('q') | KeyCode::Esc => self.exit(),
+                KeyCode::Char('1') => self.swap_constraint(ConstraintName::Min),
+                KeyCode::Char('2') => self.swap_constraint(ConstraintName::Max),
+                KeyCode::Char('3') => self.swap_constraint(ConstraintName::Length),
+                KeyCode::Char('4') => self.swap_constraint(ConstraintName::Percentage),
+                KeyCode::Char('5') => self.swap_constraint(ConstraintName::Ratio),
+                KeyCode::Char('6') => self.swap_constraint(ConstraintName::Fill),
+                KeyCode::Char('+') => self.increment_spacing(),
+                KeyCode::Char('-') => self.decrement_spacing(),
+                KeyCode::Char('x') => self.delete_block(),
+                KeyCode::Char('a') => self.insert_block(),
+                KeyCode::Char('k') | KeyCode::Up => self.increment_value(),
+                KeyCode::Char('j') | KeyCode::Down => self.decrement_value(),
+                KeyCode::Char('h') | KeyCode::Left => self.prev_block(),
+                KeyCode::Char('l') | KeyCode::Right => self.next_block(),
+                _ => {}
+            },
+            _ => {}
+        }
+        Ok(())
+    }
+
+    fn increment_value(&mut self) {
+        let Some(constraint) = self.constraints.get_mut(self.selected_index) else {
+            return;
+        };
+        match constraint {
+            Constraint::Length(v)
+            | Constraint::Min(v)
+            | Constraint::Max(v)
+            | Constraint::Fill(v)
+            | Constraint::Percentage(v) => *v = v.saturating_add(1),
+            Constraint::Ratio(_n, d) => *d = d.saturating_add(1),
+        };
+    }
+
+    fn decrement_value(&mut self) {
+        let Some(constraint) = self.constraints.get_mut(self.selected_index) else {
+            return;
+        };
+        match constraint {
+            Constraint::Length(v)
+            | Constraint::Min(v)
+            | Constraint::Max(v)
+            | Constraint::Fill(v)
+            | Constraint::Percentage(v) => *v = v.saturating_sub(1),
+            Constraint::Ratio(_n, d) => *d = d.saturating_sub(1),
+        };
+    }
+
+    /// select the next block with wrap around
+    fn next_block(&mut self) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        let len = self.constraints.len();
+        self.selected_index = (self.selected_index + 1) % len;
+    }
+
+    /// select the previous block with wrap around
+    fn prev_block(&mut self) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        let len = self.constraints.len();
+        self.selected_index = (self.selected_index + self.constraints.len() - 1) % len;
+    }
+
+    /// delete the selected block
+    fn delete_block(&mut self) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        self.constraints.remove(self.selected_index);
+        self.selected_index = self.selected_index.saturating_sub(1);
+    }
+
+    /// insert a block after the selected block
+    fn insert_block(&mut self) {
+        let index = self
+            .selected_index
+            .saturating_add(1)
+            .min(self.constraints.len());
+        let constraint = Constraint::Length(self.value);
+        self.constraints.insert(index, constraint);
+        self.selected_index = index;
+    }
+
+    fn increment_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_add(1);
+    }
+
+    fn decrement_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_sub(1);
+    }
+
+    fn exit(&mut self) {
+        self.mode = AppMode::Quit;
+    }
+
+    fn swap_constraint(&mut self, name: ConstraintName) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        let constraint = match name {
+            ConstraintName::Length => Length(self.value),
+            ConstraintName::Percentage => Percentage(self.value),
+            ConstraintName::Min => Min(self.value),
+            ConstraintName::Max => Max(self.value),
+            ConstraintName::Fill => Fill(self.value),
+            ConstraintName::Ratio => Ratio(1, u32::from(self.value) / 4), // for balance
+        };
+        self.constraints[self.selected_index] = constraint;
+    }
+}
+
+impl From<Constraint> for ConstraintName {
+    fn from(constraint: Constraint) -> Self {
+        match constraint {
+            Length(_) => Self::Length,
+            Percentage(_) => Self::Percentage,
+            Ratio(_, _) => Self::Ratio,
+            Min(_) => Self::Min,
+            Max(_) => Self::Max,
+            Fill(_) => Self::Fill,
+        }
+    }
+}
+
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let [header_area, instructions_area, swap_legend_area, _, blocks_area] =
+            Layout::vertical([
+                Length(2), // header
+                Length(2), // instructions
+                Length(1), // swap key legend
+                Length(1), // gap
+                Fill(1),   // blocks
+            ])
+            .areas(area);
+
+        App::header().render(header_area, buf);
+        App::instructions().render(instructions_area, buf);
+        App::swap_legend().render(swap_legend_area, buf);
+        self.render_layout_blocks(blocks_area, buf);
+    }
+}
+
+// App rendering
+impl App {
+    const HEADER_COLOR: Color = SLATE.c200;
+    const TEXT_COLOR: Color = SLATE.c400;
+    const AXIS_COLOR: Color = SLATE.c500;
+
+    fn header() -> impl Widget {
+        let text = "Constraint Explorer";
+        text.bold().fg(Self::HEADER_COLOR).into_centered_line()
+    }
+
+    fn instructions() -> impl Widget {
+        let text = "◄ ►: select, ▲ ▼: edit, 1-6: swap, a: add, x: delete, q: quit, + -: spacing";
+        Paragraph::new(text)
+            .fg(Self::TEXT_COLOR)
+            .centered()
+            .wrap(Wrap { trim: false })
+    }
+
+    fn swap_legend() -> impl Widget {
+        #[allow(unstable_name_collisions)]
+        Paragraph::new(
+            Line::from(
+                [
+                    ConstraintName::Min,
+                    ConstraintName::Max,
+                    ConstraintName::Length,
+                    ConstraintName::Percentage,
+                    ConstraintName::Ratio,
+                    ConstraintName::Fill,
+                ]
+                .iter()
+                .enumerate()
+                .map(|(i, name)| {
+                    format!("  {i}: {name}  ", i = i + 1)
+                        .fg(SLATE.c200)
+                        .bg(name.color())
+                })
+                .intersperse(Span::from(" "))
+                .collect_vec(),
+            )
+            .centered(),
+        )
+        .wrap(Wrap { trim: false })
+    }
+
+    /// A bar like `<----- 80 px (gap: 2 px) ----->`
+    ///
+    /// Only shows the gap when spacing is not zero
+    fn axis(&self, width: u16) -> impl Widget {
+        let label = if self.spacing != 0 {
+            format!("{} px (gap: {} px)", width, self.spacing)
+        } else {
+            format!("{width} px")
+        };
+        let bar_width = width.saturating_sub(2) as usize; // we want to `<` and `>` at the ends
+        let width_bar = format!("<{label:-^bar_width$}>");
+        Paragraph::new(width_bar).fg(Self::AXIS_COLOR).centered()
+    }
+
+    fn render_layout_blocks(&self, area: Rect, buf: &mut Buffer) {
+        let [user_constraints, area] = Layout::vertical([Length(3), Fill(1)])
+            .spacing(1)
+            .areas(area);
+
+        self.render_user_constraints_legend(user_constraints, buf);
+
+        let [start, center, end, space_around, space_between] =
+            Layout::vertical([Length(7); 5]).areas(area);
+
+        self.render_layout_block(Flex::Start, start, buf);
+        self.render_layout_block(Flex::Center, center, buf);
+        self.render_layout_block(Flex::End, end, buf);
+        self.render_layout_block(Flex::SpaceAround, space_around, buf);
+        self.render_layout_block(Flex::SpaceBetween, space_between, buf);
+    }
+
+    fn render_user_constraints_legend(&self, area: Rect, buf: &mut Buffer) {
+        let blocks = Layout::horizontal(
+            self.constraints
+                .iter()
+                .map(|_| Constraint::Fill(1))
+                .collect_vec(),
+        )
+        .split(area);
+
+        for (i, (area, constraint)) in blocks.iter().zip(self.constraints.iter()).enumerate() {
+            let selected = self.selected_index == i;
+            ConstraintBlock::new(*constraint, selected, true).render(*area, buf);
+        }
+    }
+
+    fn render_layout_block(&self, flex: Flex, area: Rect, buf: &mut Buffer) {
+        let [label_area, axis_area, blocks_area] =
+            Layout::vertical([Length(1), Max(1), Length(4)]).areas(area);
+
+        if label_area.height > 0 {
+            format!("Flex::{flex:?}").bold().render(label_area, buf);
+        }
+
+        self.axis(area.width).render(axis_area, buf);
+
+        let (blocks, spacers) = Layout::horizontal(&self.constraints)
+            .flex(flex)
+            .spacing(self.spacing)
+            .split_with_spacers(blocks_area);
+
+        for (i, (area, constraint)) in blocks.iter().zip(self.constraints.iter()).enumerate() {
+            let selected = self.selected_index == i;
+            ConstraintBlock::new(*constraint, selected, false).render(*area, buf);
+        }
+
+        for area in spacers.iter() {
+            SpacerBlock.render(*area, buf);
+        }
+    }
+}
+
+impl Widget for ConstraintBlock {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        match area.height {
+            1 => self.render_1px(area, buf),
+            2 => self.render_2px(area, buf),
+            _ => self.render_4px(area, buf),
+        }
+    }
+}
+
+impl ConstraintBlock {
+    const TEXT_COLOR: Color = SLATE.c200;
+
+    const fn new(constraint: Constraint, selected: bool, legend: bool) -> Self {
+        Self {
+            constraint,
+            legend,
+            selected,
+        }
+    }
+
+    fn label(&self, width: u16) -> String {
+        let long_width = format!("{width} px");
+        let short_width = format!("{width}");
+        // border takes up 2 columns
+        let available_space = width.saturating_sub(2) as usize;
+        let width_label = if long_width.len() < available_space {
+            long_width
+        } else if short_width.len() < available_space {
+            short_width
+        } else {
+            String::new()
+        };
+        format!("{}\n{}", self.constraint, width_label)
+    }
+
+    fn render_1px(&self, area: Rect, buf: &mut Buffer) {
+        let lighter_color = ConstraintName::from(self.constraint).lighter_color();
+        let main_color = ConstraintName::from(self.constraint).color();
+        let selected_color = if self.selected {
+            lighter_color
+        } else {
+            main_color
+        };
+        Block::new()
+            .fg(Self::TEXT_COLOR)
+            .bg(selected_color)
+            .render(area, buf);
+    }
+
+    fn render_2px(&self, area: Rect, buf: &mut Buffer) {
+        let lighter_color = ConstraintName::from(self.constraint).lighter_color();
+        let main_color = ConstraintName::from(self.constraint).color();
+        let selected_color = if self.selected {
+            lighter_color
+        } else {
+            main_color
+        };
+        Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(selected_color).reversed())
+            .render(area, buf);
+    }
+
+    fn render_4px(&self, area: Rect, buf: &mut Buffer) {
+        let lighter_color = ConstraintName::from(self.constraint).lighter_color();
+        let main_color = ConstraintName::from(self.constraint).color();
+        let selected_color = if self.selected {
+            lighter_color
+        } else {
+            main_color
+        };
+        let color = if self.legend {
+            selected_color
+        } else {
+            main_color
+        };
+        let label = self.label(area.width);
+        let block = Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(color).reversed())
+            .fg(Self::TEXT_COLOR)
+            .bg(color);
+        Paragraph::new(label)
+            .centered()
+            .fg(Self::TEXT_COLOR)
+            .bg(color)
+            .block(block)
+            .render(area, buf);
+
+        if !self.legend {
+            let border_color = if self.selected {
+                lighter_color
+            } else {
+                main_color
+            };
+            if let Some(last_row) = area.rows().last() {
+                buf.set_style(last_row, border_color);
+            }
+        }
+    }
+}
+
+impl Widget for SpacerBlock {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        match area.height {
+            1 => (),
+            2 => Self::render_2px(area, buf),
+            3 => Self::render_3px(area, buf),
+            _ => Self::render_4px(area, buf),
+        }
+    }
+}
+
+impl SpacerBlock {
+    const TEXT_COLOR: Color = SLATE.c500;
+    const BORDER_COLOR: Color = SLATE.c600;
+
+    /// A block with a corner borders
+    fn block() -> impl Widget {
+        let corners_only = symbols::border::Set {
+            top_left: line::NORMAL.top_left,
+            top_right: line::NORMAL.top_right,
+            bottom_left: line::NORMAL.bottom_left,
+            bottom_right: line::NORMAL.bottom_right,
+            vertical_left: " ",
+            vertical_right: " ",
+            horizontal_top: " ",
+            horizontal_bottom: " ",
+        };
+        Block::bordered()
+            .border_set(corners_only)
+            .border_style(Self::BORDER_COLOR)
+    }
+
+    /// A vertical line used if there is not enough space to render the block
+    fn line() -> impl Widget {
+        Paragraph::new(Text::from(vec![
+            Line::from(""),
+            Line::from("│"),
+            Line::from("│"),
+            Line::from(""),
+        ]))
+        .style(Self::BORDER_COLOR)
+    }
+
+    /// A label that says "Spacer" if there is enough space
+    fn spacer_label(width: u16) -> impl Widget {
+        let label = if width >= 6 { "Spacer" } else { "" };
+        label.fg(Self::TEXT_COLOR).into_centered_line()
+    }
+
+    /// A label that says "8 px" if there is enough space
+    fn label(width: u16) -> impl Widget {
+        let long_label = format!("{width} px");
+        let short_label = format!("{width}");
+        let label = if long_label.len() < width as usize {
+            long_label
+        } else if short_label.len() < width as usize {
+            short_label
+        } else {
+            String::new()
+        };
+        Line::styled(label, Self::TEXT_COLOR).centered()
+    }
+
+    fn render_2px(area: Rect, buf: &mut Buffer) {
+        if area.width > 1 {
+            Self::block().render(area, buf);
+        } else {
+            Self::line().render(area, buf);
+        }
+    }
+
+    fn render_3px(area: Rect, buf: &mut Buffer) {
+        if area.width > 1 {
+            Self::block().render(area, buf);
+        } else {
+            Self::line().render(area, buf);
+        }
+
+        let row = area.rows().nth(1).unwrap_or_default();
+        Self::spacer_label(area.width).render(row, buf);
+    }
+
+    fn render_4px(area: Rect, buf: &mut Buffer) {
+        if area.width > 1 {
+            Self::block().render(area, buf);
+        } else {
+            Self::line().render(area, buf);
+        }
+
+        let row = area.rows().nth(1).unwrap_or_default();
+        Self::spacer_label(area.width).render(row, buf);
+
+        let row = area.rows().nth(2).unwrap_or_default();
+        Self::label(area.width).render(row, buf);
+    }
+}
+
+impl ConstraintName {
+    const fn color(self) -> Color {
+        match self {
+            Self::Length => SLATE.c700,
+            Self::Percentage => SLATE.c800,
+            Self::Ratio => SLATE.c900,
+            Self::Fill => SLATE.c950,
+            Self::Min => BLUE.c800,
+            Self::Max => BLUE.c900,
+        }
+    }
+
+    const fn lighter_color(self) -> Color {
+        match self {
+            Self::Length => STONE.c500,
+            Self::Percentage => STONE.c600,
+            Self::Ratio => STONE.c700,
+            Self::Fill => STONE.c800,
+            Self::Min => SKY.c600,
+            Self::Max => SKY.c700,
+        }
+    }
+}

examples/constraints.rs

@@ -0,0 +1,405 @@
+//! # [Ratatui] Constraints example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use color_eyre::Result;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{
+        Constraint::{self, Fill, Length, Max, Min, Percentage, Ratio},
+        Layout, Rect,
+    },
+    style::{palette::tailwind, Color, Modifier, Style, Stylize},
+    symbols,
+    text::Line,
+    widgets::{
+        Block, Padding, Paragraph, Scrollbar, ScrollbarOrientation, ScrollbarState, StatefulWidget,
+        Tabs, Widget,
+    },
+    DefaultTerminal,
+};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
+
+const SPACER_HEIGHT: u16 = 0;
+const ILLUSTRATION_HEIGHT: u16 = 4;
+const EXAMPLE_HEIGHT: u16 = ILLUSTRATION_HEIGHT + SPACER_HEIGHT;
+
+// priority 2
+const MIN_COLOR: Color = tailwind::BLUE.c900;
+const MAX_COLOR: Color = tailwind::BLUE.c800;
+// priority 3
+const LENGTH_COLOR: Color = tailwind::SLATE.c700;
+const PERCENTAGE_COLOR: Color = tailwind::SLATE.c800;
+const RATIO_COLOR: Color = tailwind::SLATE.c900;
+// priority 4
+const FILL_COLOR: Color = tailwind::SLATE.c950;
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
+}
+
+#[derive(Default, Clone, Copy)]
+struct App {
+    selected_tab: SelectedTab,
+    scroll_offset: u16,
+    max_scroll_offset: u16,
+    state: AppState,
+}
+
+/// Tabs for the different examples
+///
+/// The order of the variants is the order in which they are displayed.
+#[derive(Default, Debug, Copy, Clone, Display, FromRepr, EnumIter, PartialEq, Eq)]
+enum SelectedTab {
+    #[default]
+    Min,
+    Max,
+    Length,
+    Percentage,
+    Ratio,
+    Fill,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Quit,
+}
+
+impl App {
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        self.update_max_scroll_offset();
+        while self.is_running() {
+            terminal.draw(|frame| frame.render_widget(self, frame.area()))?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
+
+    fn update_max_scroll_offset(&mut self) {
+        self.max_scroll_offset = (self.selected_tab.get_example_count() - 1) * EXAMPLE_HEIGHT;
+    }
+
+    fn is_running(self) -> bool {
+        self.state == AppState::Running
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        if let Event::Key(key) = event::read()? {
+            if key.kind != KeyEventKind::Press {
+                return Ok(());
+            }
+            match key.code {
+                KeyCode::Char('q') | KeyCode::Esc => self.quit(),
+                KeyCode::Char('l') | KeyCode::Right => self.next(),
+                KeyCode::Char('h') | KeyCode::Left => self.previous(),
+                KeyCode::Char('j') | KeyCode::Down => self.down(),
+                KeyCode::Char('k') | KeyCode::Up => self.up(),
+                KeyCode::Char('g') | KeyCode::Home => self.top(),
+                KeyCode::Char('G') | KeyCode::End => self.bottom(),
+                _ => (),
+            }
+        }
+        Ok(())
+    }
+
+    fn quit(&mut self) {
+        self.state = AppState::Quit;
+    }
+
+    fn next(&mut self) {
+        self.selected_tab = self.selected_tab.next();
+        self.update_max_scroll_offset();
+        self.scroll_offset = 0;
+    }
+
+    fn previous(&mut self) {
+        self.selected_tab = self.selected_tab.previous();
+        self.update_max_scroll_offset();
+        self.scroll_offset = 0;
+    }
+
+    fn up(&mut self) {
+        self.scroll_offset = self.scroll_offset.saturating_sub(1);
+    }
+
+    fn down(&mut self) {
+        self.scroll_offset = self
+            .scroll_offset
+            .saturating_add(1)
+            .min(self.max_scroll_offset);
+    }
+
+    fn top(&mut self) {
+        self.scroll_offset = 0;
+    }
+
+    fn bottom(&mut self) {
+        self.scroll_offset = self.max_scroll_offset;
+    }
+}
+
+impl Widget for App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let [tabs, axis, demo] = Layout::vertical([Length(3), Length(3), Fill(0)]).areas(area);
+
+        self.render_tabs(tabs, buf);
+        Self::render_axis(axis, buf);
+        self.render_demo(demo, buf);
+    }
+}
+
+impl App {
+    fn render_tabs(self, area: Rect, buf: &mut Buffer) {
+        let titles = SelectedTab::iter().map(SelectedTab::to_tab_title);
+        let block = Block::new()
+            .title("Constraints ".bold())
+            .title(" Use h l or ◄ ► to change tab and j k or ▲ ▼  to scroll");
+        Tabs::new(titles)
+            .block(block)
+            .highlight_style(Modifier::REVERSED)
+            .select(self.selected_tab as usize)
+            .padding("", "")
+            .divider(" ")
+            .render(area, buf);
+    }
+
+    fn render_axis(area: Rect, buf: &mut Buffer) {
+        let width = area.width as usize;
+        // a bar like `<----- 80 px ----->`
+        let width_label = format!("{width} px");
+        let width_bar = format!(
+            "<{width_label:-^width$}>",
+            width = width - width_label.len() / 2
+        );
+        Paragraph::new(width_bar.dark_gray())
+            .centered()
+            .block(Block::new().padding(Padding {
+                left: 0,
+                right: 0,
+                top: 1,
+                bottom: 0,
+            }))
+            .render(area, buf);
+    }
+
+    /// Render the demo content
+    ///
+    /// This function renders the demo content into a separate buffer and then splices the buffer
+    /// into the main buffer. This is done to make it possible to handle scrolling easily.
+    #[allow(clippy::cast_possible_truncation)]
+    fn render_demo(self, area: Rect, buf: &mut Buffer) {
+        // render demo content into a separate buffer so all examples fit we add an extra
+        // area.height to make sure the last example is fully visible even when the scroll offset is
+        // at the max
+        let height = self.selected_tab.get_example_count() * EXAMPLE_HEIGHT;
+        let demo_area = Rect::new(0, 0, area.width, height + area.height);
+        let mut demo_buf = Buffer::empty(demo_area);
+
+        let scrollbar_needed = self.scroll_offset != 0 || height > area.height;
+        let content_area = if scrollbar_needed {
+            Rect {
+                width: demo_area.width - 1,
+                ..demo_area
+            }
+        } else {
+            demo_area
+        };
+        self.selected_tab.render(content_area, &mut demo_buf);
+
+        let visible_content = demo_buf
+            .content
+            .into_iter()
+            .skip((demo_area.width * self.scroll_offset) as usize)
+            .take(area.area() as usize);
+        for (i, cell) in visible_content.enumerate() {
+            let x = i as u16 % area.width;
+            let y = i as u16 / area.width;
+            buf[(area.x + x, area.y + y)] = cell;
+        }
+
+        if scrollbar_needed {
+            let mut state = ScrollbarState::new(self.max_scroll_offset as usize)
+                .position(self.scroll_offset as usize);
+            Scrollbar::new(ScrollbarOrientation::VerticalRight).render(area, buf, &mut state);
+        }
+    }
+}
+
+impl SelectedTab {
+    /// Get the previous tab, if there is no previous tab return the current tab.
+    fn previous(self) -> Self {
+        let current_index: usize = self as usize;
+        let previous_index = current_index.saturating_sub(1);
+        Self::from_repr(previous_index).unwrap_or(self)
+    }
+
+    /// Get the next tab, if there is no next tab return the current tab.
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+
+    const fn get_example_count(self) -> u16 {
+        #[allow(clippy::match_same_arms)]
+        match self {
+            Self::Length => 4,
+            Self::Percentage => 5,
+            Self::Ratio => 4,
+            Self::Fill => 2,
+            Self::Min => 5,
+            Self::Max => 5,
+        }
+    }
+
+    fn to_tab_title(value: Self) -> Line<'static> {
+        let text = format!("  {value}  ");
+        let color = match value {
+            Self::Length => LENGTH_COLOR,
+            Self::Percentage => PERCENTAGE_COLOR,
+            Self::Ratio => RATIO_COLOR,
+            Self::Fill => FILL_COLOR,
+            Self::Min => MIN_COLOR,
+            Self::Max => MAX_COLOR,
+        };
+        text.fg(tailwind::SLATE.c200).bg(color).into()
+    }
+}
+
+impl Widget for SelectedTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        match self {
+            Self::Length => Self::render_length_example(area, buf),
+            Self::Percentage => Self::render_percentage_example(area, buf),
+            Self::Ratio => Self::render_ratio_example(area, buf),
+            Self::Fill => Self::render_fill_example(area, buf),
+            Self::Min => Self::render_min_example(area, buf),
+            Self::Max => Self::render_max_example(area, buf),
+        }
+    }
+}
+
+impl SelectedTab {
+    fn render_length_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 4]).areas(area);
+
+        Example::new(&[Length(20), Length(20)]).render(example1, buf);
+        Example::new(&[Length(20), Min(20)]).render(example2, buf);
+        Example::new(&[Length(20), Max(20)]).render(example3, buf);
+    }
+
+    fn render_percentage_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, example4, example5, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 6]).areas(area);
+
+        Example::new(&[Percentage(75), Fill(0)]).render(example1, buf);
+        Example::new(&[Percentage(25), Fill(0)]).render(example2, buf);
+        Example::new(&[Percentage(50), Min(20)]).render(example3, buf);
+        Example::new(&[Percentage(0), Max(0)]).render(example4, buf);
+        Example::new(&[Percentage(0), Fill(0)]).render(example5, buf);
+    }
+
+    fn render_ratio_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, example4, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 5]).areas(area);
+
+        Example::new(&[Ratio(1, 2); 2]).render(example1, buf);
+        Example::new(&[Ratio(1, 4); 4]).render(example2, buf);
+        Example::new(&[Ratio(1, 2), Ratio(1, 3), Ratio(1, 4)]).render(example3, buf);
+        Example::new(&[Ratio(1, 2), Percentage(25), Length(10)]).render(example4, buf);
+    }
+
+    fn render_fill_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, _] = Layout::vertical([Length(EXAMPLE_HEIGHT); 3]).areas(area);
+
+        Example::new(&[Fill(1), Fill(2), Fill(3)]).render(example1, buf);
+        Example::new(&[Fill(1), Percentage(50), Fill(1)]).render(example2, buf);
+    }
+
+    fn render_min_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, example4, example5, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 6]).areas(area);
+
+        Example::new(&[Percentage(100), Min(0)]).render(example1, buf);
+        Example::new(&[Percentage(100), Min(20)]).render(example2, buf);
+        Example::new(&[Percentage(100), Min(40)]).render(example3, buf);
+        Example::new(&[Percentage(100), Min(60)]).render(example4, buf);
+        Example::new(&[Percentage(100), Min(80)]).render(example5, buf);
+    }
+
+    fn render_max_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, example4, example5, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 6]).areas(area);
+
+        Example::new(&[Percentage(0), Max(0)]).render(example1, buf);
+        Example::new(&[Percentage(0), Max(20)]).render(example2, buf);
+        Example::new(&[Percentage(0), Max(40)]).render(example3, buf);
+        Example::new(&[Percentage(0), Max(60)]).render(example4, buf);
+        Example::new(&[Percentage(0), Max(80)]).render(example5, buf);
+    }
+}
+
+struct Example {
+    constraints: Vec<Constraint>,
+}
+
+impl Example {
+    fn new(constraints: &[Constraint]) -> Self {
+        Self {
+            constraints: constraints.into(),
+        }
+    }
+}
+
+impl Widget for Example {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let [area, _] =
+            Layout::vertical([Length(ILLUSTRATION_HEIGHT), Length(SPACER_HEIGHT)]).areas(area);
+        let blocks = Layout::horizontal(&self.constraints).split(area);
+
+        for (block, constraint) in blocks.iter().zip(&self.constraints) {
+            Self::illustration(*constraint, block.width).render(*block, buf);
+        }
+    }
+}
+
+impl Example {
+    fn illustration(constraint: Constraint, width: u16) -> impl Widget {
+        let color = match constraint {
+            Constraint::Length(_) => LENGTH_COLOR,
+            Constraint::Percentage(_) => PERCENTAGE_COLOR,
+            Constraint::Ratio(_, _) => RATIO_COLOR,
+            Constraint::Fill(_) => FILL_COLOR,
+            Constraint::Min(_) => MIN_COLOR,
+            Constraint::Max(_) => MAX_COLOR,
+        };
+        let fg = Color::White;
+        let title = format!("{constraint}");
+        let content = format!("{width} px");
+        let text = format!("{title}\n{content}");
+        let block = Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(color).reversed())
+            .style(Style::default().fg(fg).bg(color));
+        Paragraph::new(text).centered().block(block)
+    }
+}

examples/custom_widget.rs

@@ -1,14 +1,48 @@
-use std::{error::Error, io, ops::ControlFlow, time::Duration};
+//! # [Ratatui] Custom Widget example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{
-        self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, MouseButton, MouseEvent,
-        MouseEventKind,
+use std::{io::stdout, ops::ControlFlow, time::Duration};
+
+use color_eyre::Result;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::{
+        event::{
+            self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, MouseButton, MouseEvent,
+            MouseEventKind,
+        },
+        execute,
     },
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    layout::{Constraint, Layout, Rect},
+    style::{Color, Style},
+    text::Line,
+    widgets::{Paragraph, Widget},
+    DefaultTerminal, Frame,
 };
-use ratatui::{prelude::*, widgets::*};
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    execute!(stdout(), EnableMouseCapture)?;
+    let app_result = run(terminal);
+    ratatui::restore();
+    if let Err(err) = execute!(stdout(), DisableMouseCapture) {
+        eprintln!("Error disabling mouse capture: {err}");
+    }
+    app_result
+}
 
 /// A custom widget that renders a button with a label, theme and state.
 #[derive(Debug, Clone)]
@@ -56,7 +90,7 @@ const GREEN: Theme = Theme {
 
 /// A button with a label that can be themed.
 impl<'a> Button<'a> {
-    pub fn new<T: Into<Line<'a>>>(label: T) -> Button<'a> {
+    pub fn new<T: Into<Line<'a>>>(label: T) -> Self {
         Button {
             label: label.into(),
             theme: BLUE,
@@ -64,18 +98,19 @@ impl<'a> Button<'a> {
         }
     }
 
-    pub fn theme(mut self, theme: Theme) -> Button<'a> {
+    pub const fn theme(mut self, theme: Theme) -> Self {
         self.theme = theme;
         self
     }
 
-    pub fn state(mut self, state: State) -> Button<'a> {
+    pub const fn state(mut self, state: State) -> Self {
         self.state = state;
         self
     }
 }
 
 impl<'a> Widget for Button<'a> {
+    #[allow(clippy::cast_possible_truncation)]
     fn render(self, area: Rect, buf: &mut Buffer) {
         let (background, text, shadow, highlight) = self.colors();
         buf.set_style(area, Style::new().bg(background).fg(text));
@@ -109,7 +144,7 @@ impl<'a> Widget for Button<'a> {
 }
 
 impl Button<'_> {
-    fn colors(&self) -> (Color, Color, Color, Color) {
+    const fn colors(&self) -> (Color, Color, Color, Color) {
         let theme = self.theme;
         match self.state {
             State::Normal => (theme.background, theme.text, theme.shadow, theme.highlight),
@@ -119,38 +154,11 @@ impl Button<'_> {
     }
 }
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let res = run_app(&mut terminal);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
-    }
-
-    Ok(())
-}
-
-fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
+fn run(mut terminal: DefaultTerminal) -> Result<()> {
     let mut selected_button: usize = 0;
-    let button_states = &mut [State::Selected, State::Normal, State::Normal];
+    let mut button_states = [State::Selected, State::Normal, State::Normal];
     loop {
-        terminal.draw(|frame| ui(frame, button_states))?;
+        terminal.draw(|frame| draw(frame, button_states))?;
         if !event::poll(Duration::from_millis(100))? {
             continue;
         }
@@ -159,54 +167,48 @@ fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
                 if key.kind != event::KeyEventKind::Press {
                     continue;
                 }
-                if handle_key_event(key, button_states, &mut selected_button).is_break() {
+                if handle_key_event(key, &mut button_states, &mut selected_button).is_break() {
                     break;
                 }
             }
-            Event::Mouse(mouse) => handle_mouse_event(mouse, button_states, &mut selected_button),
+            Event::Mouse(mouse) => {
+                handle_mouse_event(mouse, &mut button_states, &mut selected_button);
+            }
             _ => (),
         }
     }
     Ok(())
 }
 
-fn ui(frame: &mut Frame, states: &[State; 3]) {
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Length(1),
-            Constraint::Max(3),
-            Constraint::Length(1),
-            Constraint::Min(0), // ignore remaining space
-        ])
-        .split(frame.size());
+fn draw(frame: &mut Frame, states: [State; 3]) {
+    let vertical = Layout::vertical([
+        Constraint::Length(1),
+        Constraint::Max(3),
+        Constraint::Length(1),
+        Constraint::Min(0), // ignore remaining space
+    ]);
+    let [title, buttons, help, _] = vertical.areas(frame.area());
+
     frame.render_widget(
         Paragraph::new("Custom Widget Example (mouse enabled)"),
-        layout[0],
-    );
-    render_buttons(frame, layout[1], states);
-    frame.render_widget(
-        Paragraph::new("←/→: select, Space: toggle, q: quit"),
-        layout[2],
+        title,
     );
+    render_buttons(frame, buttons, states);
+    frame.render_widget(Paragraph::new("←/→: select, Space: toggle, q: quit"), help);
 }
 
-fn render_buttons(frame: &mut Frame<'_>, area: Rect, states: &[State; 3]) {
-    let layout = Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([
-            Constraint::Length(15),
-            Constraint::Length(15),
-            Constraint::Length(15),
-            Constraint::Min(0), // ignore remaining space
-        ])
-        .split(area);
-    frame.render_widget(Button::new("Red").theme(RED).state(states[0]), layout[0]);
-    frame.render_widget(
-        Button::new("Green").theme(GREEN).state(states[1]),
-        layout[1],
-    );
-    frame.render_widget(Button::new("Blue").theme(BLUE).state(states[2]), layout[2]);
+fn render_buttons(frame: &mut Frame<'_>, area: Rect, states: [State; 3]) {
+    let horizontal = Layout::horizontal([
+        Constraint::Length(15),
+        Constraint::Length(15),
+        Constraint::Length(15),
+        Constraint::Min(0), // ignore remaining space
+    ]);
+    let [red, green, blue, _] = horizontal.areas(area);
+
+    frame.render_widget(Button::new("Red").theme(RED).state(states[0]), red);
+    frame.render_widget(Button::new("Green").theme(GREEN).state(states[1]), green);
+    frame.render_widget(Button::new("Blue").theme(BLUE).state(states[2]), blue);
 }
 
 fn handle_key_event(

examples/demo/app.rs

@@ -2,7 +2,7 @@ use rand::{
     distributions::{Distribution, Uniform},
     rngs::ThreadRng,
 };
-use ratatui::widgets::*;
+use ratatui::widgets::ListState;
 
 const TASKS: [&str; 24] = [
     "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9", "Item10",
@@ -73,8 +73,8 @@ pub struct RandomSignal {
 }
 
 impl RandomSignal {
-    pub fn new(lower: u64, upper: u64) -> RandomSignal {
-        RandomSignal {
+    pub fn new(lower: u64, upper: u64) -> Self {
+        Self {
             distribution: Uniform::new(lower, upper),
             rng: rand::thread_rng(),
         }
@@ -97,8 +97,8 @@ pub struct SinSignal {
 }
 
 impl SinSignal {
-    pub fn new(interval: f64, period: f64, scale: f64) -> SinSignal {
-        SinSignal {
+    pub const fn new(interval: f64, period: f64, scale: f64) -> Self {
+        Self {
             x: 0.0,
             interval,
             period,
@@ -122,8 +122,8 @@ pub struct TabsState<'a> {
 }
 
 impl<'a> TabsState<'a> {
-    pub fn new(titles: Vec<&'a str>) -> TabsState {
-        TabsState { titles, index: 0 }
+    pub fn new(titles: Vec<&'a str>) -> Self {
+        Self { titles, index: 0 }
     }
     pub fn next(&mut self) {
         self.index = (self.index + 1) % self.titles.len();
@@ -144,8 +144,8 @@ pub struct StatefulList<T> {
 }
 
 impl<T> StatefulList<T> {
-    pub fn with_items(items: Vec<T>) -> StatefulList<T> {
-        StatefulList {
+    pub fn with_items(items: Vec<T>) -> Self {
+        Self {
             state: ListState::default(),
             items,
         }
@@ -191,9 +191,7 @@ where
     S: Iterator,
 {
     fn on_tick(&mut self) {
-        for _ in 0..self.tick_rate {
-            self.points.remove(0);
-        }
+        self.points.drain(0..self.tick_rate);
         self.points
             .extend(self.source.by_ref().take(self.tick_rate));
     }
@@ -237,7 +235,7 @@ pub struct App<'a> {
 }
 
 impl<'a> App<'a> {
-    pub fn new(title: &'a str, enhanced_graphics: bool) -> App<'a> {
+    pub fn new(title: &'a str, enhanced_graphics: bool) -> Self {
         let mut rand_signal = RandomSignal::new(0, 100);
         let sparkline_points = rand_signal.by_ref().take(300).collect();
         let mut sin_signal = SinSignal::new(0.2, 3.0, 18.0);

examples/demo/crossterm.rs

@@ -4,12 +4,15 @@ use std::{
     time::{Duration, Instant},
 };
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+use ratatui::{
+    backend::{Backend, CrosstermBackend},
+    crossterm::{
+        event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
+        execute,
+        terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    },
+    Terminal,
 };
-use ratatui::prelude::*;
 
 use crate::{app::App, ui};
 
@@ -23,7 +26,7 @@ pub fn run(tick_rate: Duration, enhanced_graphics: bool) -> Result<(), Box<dyn E
 
     // create app and run it
     let app = App::new("Crossterm Demo", enhanced_graphics);
-    let res = run_app(&mut terminal, app, tick_rate);
+    let app_result = run_app(&mut terminal, app, tick_rate);
 
     // restore terminal
     disable_raw_mode()?;
@@ -34,7 +37,7 @@ pub fn run(tick_rate: Duration, enhanced_graphics: bool) -> Result<(), Box<dyn E
     )?;
     terminal.show_cursor()?;
 
-    if let Err(err) = res {
+    if let Err(err) = app_result {
         println!("{err:?}");
     }
 
@@ -48,10 +51,10 @@ fn run_app<B: Backend>(
 ) -> io::Result<()> {
     let mut last_tick = Instant::now();
     loop {
-        terminal.draw(|f| ui::draw(f, &mut app))?;
+        terminal.draw(|frame| ui::draw(frame, &mut app))?;
 
         let timeout = tick_rate.saturating_sub(last_tick.elapsed());
-        if crossterm::event::poll(timeout)? {
+        if event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
                 if key.kind == KeyEventKind::Press {
                     match key.code {

examples/demo/main.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Original Demo example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
 use std::{error::Error, time::Duration};
 
 use argh::FromArgs;
@@ -5,7 +20,7 @@ use argh::FromArgs;
 mod app;
 #[cfg(feature = "crossterm")]
 mod crossterm;
-#[cfg(feature = "termion")]
+#[cfg(all(not(windows), feature = "termion"))]
 mod termion;
 #[cfg(feature = "termwiz")]
 mod termwiz;
@@ -28,9 +43,13 @@ fn main() -> Result<(), Box<dyn Error>> {
     let tick_rate = Duration::from_millis(cli.tick_rate);
     #[cfg(feature = "crossterm")]
     crate::crossterm::run(tick_rate, cli.enhanced_graphics)?;
-    #[cfg(feature = "termion")]
+    #[cfg(all(not(windows), feature = "termion", not(feature = "crossterm")))]
     crate::termion::run(tick_rate, cli.enhanced_graphics)?;
-    #[cfg(feature = "termwiz")]
+    #[cfg(all(
+        feature = "termwiz",
+        not(feature = "crossterm"),
+        not(feature = "termion")
+    ))]
     crate::termwiz::run(tick_rate, cli.enhanced_graphics)?;
     Ok(())
 }

examples/demo/termion.rs

@@ -1,11 +1,15 @@
+#![allow(dead_code)]
 use std::{error::Error, io, sync::mpsc, thread, time::Duration};
 
-use ratatui::prelude::*;
-use termion::{
-    event::Key,
-    input::{MouseTerminal, TermRead},
-    raw::IntoRawMode,
-    screen::IntoAlternateScreen,
+use ratatui::{
+    backend::{Backend, TermionBackend},
+    termion::{
+        event::Key,
+        input::{MouseTerminal, TermRead},
+        raw::IntoRawMode,
+        screen::IntoAlternateScreen,
+    },
+    Terminal,
 };
 
 use crate::{app::App, ui};
@@ -35,7 +39,7 @@ fn run_app<B: Backend>(
 ) -> Result<(), Box<dyn Error>> {
     let events = events(tick_rate);
     loop {
-        terminal.draw(|f| ui::draw(f, &mut app))?;
+        terminal.draw(|frame| ui::draw(frame, &mut app))?;
 
         match events.recv()? {
             Event::Input(key) => match key {

examples/demo/termwiz.rs

@@ -1,10 +1,17 @@
+#![allow(dead_code)]
 use std::{
     error::Error,
     time::{Duration, Instant},
 };
 
-use ratatui::prelude::*;
-use termwiz::{input::*, terminal::Terminal as TermwizTerminal};
+use ratatui::{
+    backend::TermwizBackend,
+    termwiz::{
+        input::{InputEvent, KeyCode},
+        terminal::Terminal as TermwizTerminal,
+    },
+    Terminal,
+};
 
 use crate::{app::App, ui};
 
@@ -15,12 +22,12 @@ pub fn run(tick_rate: Duration, enhanced_graphics: bool) -> Result<(), Box<dyn E
 
     // create app and run it
     let app = App::new("Termwiz Demo", enhanced_graphics);
-    let res = run_app(&mut terminal, app, tick_rate);
+    let app_result = run_app(&mut terminal, app, tick_rate);
 
     terminal.show_cursor()?;
     terminal.flush()?;
 
-    if let Err(err) = res {
+    if let Err(err) = app_result {
         println!("{err:?}");
     }
 
@@ -34,7 +41,7 @@ fn run_app(
 ) -> Result<(), Box<dyn Error>> {
     let mut last_tick = Instant::now();
     loop {
-        terminal.draw(|f| ui::draw(f, &mut app))?;
+        terminal.draw(|frame| ui::draw(frame, &mut app))?;
 
         let timeout = tick_rate.saturating_sub(last_tick.elapsed());
         if let Some(input) = terminal

examples/demo/ui.rs

@@ -1,61 +1,64 @@
 use ratatui::{
-    prelude::*,
-    widgets::{canvas::*, *},
+    layout::{Constraint, Layout, Rect},
+    style::{Color, Modifier, Style},
+    symbols,
+    text::{self, Span},
+    widgets::{
+        canvas::{self, Canvas, Circle, Map, MapResolution, Rectangle},
+        Axis, BarChart, Block, Cell, Chart, Dataset, Gauge, LineGauge, List, ListItem, Paragraph,
+        Row, Sparkline, Table, Tabs, Wrap,
+    },
+    Frame,
 };
 
 use crate::app::App;
 
-pub fn draw(f: &mut Frame, app: &mut App) {
-    let chunks = Layout::default()
-        .constraints([Constraint::Length(3), Constraint::Min(0)])
-        .split(f.size());
-    let titles = app
+pub fn draw(frame: &mut Frame, app: &mut App) {
+    let chunks = Layout::vertical([Constraint::Length(3), Constraint::Min(0)]).split(frame.area());
+    let tabs = app
         .tabs
         .titles
         .iter()
         .map(|t| text::Line::from(Span::styled(*t, Style::default().fg(Color::Green))))
-        .collect();
-    let tabs = Tabs::new(titles)
-        .block(Block::default().borders(Borders::ALL).title(app.title))
+        .collect::<Tabs>()
+        .block(Block::bordered().title(app.title))
         .highlight_style(Style::default().fg(Color::Yellow))
         .select(app.tabs.index);
-    f.render_widget(tabs, chunks[0]);
+    frame.render_widget(tabs, chunks[0]);
     match app.tabs.index {
-        0 => draw_first_tab(f, app, chunks[1]),
-        1 => draw_second_tab(f, app, chunks[1]),
-        2 => draw_third_tab(f, app, chunks[1]),
+        0 => draw_first_tab(frame, app, chunks[1]),
+        1 => draw_second_tab(frame, app, chunks[1]),
+        2 => draw_third_tab(frame, app, chunks[1]),
         _ => {}
     };
 }
 
-fn draw_first_tab(f: &mut Frame, app: &mut App, area: Rect) {
-    let chunks = Layout::default()
-        .constraints([
-            Constraint::Length(9),
-            Constraint::Min(8),
-            Constraint::Length(7),
-        ])
-        .split(area);
-    draw_gauges(f, app, chunks[0]);
-    draw_charts(f, app, chunks[1]);
-    draw_text(f, chunks[2]);
+fn draw_first_tab(frame: &mut Frame, app: &mut App, area: Rect) {
+    let chunks = Layout::vertical([
+        Constraint::Length(9),
+        Constraint::Min(8),
+        Constraint::Length(7),
+    ])
+    .split(area);
+    draw_gauges(frame, app, chunks[0]);
+    draw_charts(frame, app, chunks[1]);
+    draw_text(frame, chunks[2]);
 }
 
-fn draw_gauges(f: &mut Frame, app: &mut App, area: Rect) {
-    let chunks = Layout::default()
-        .constraints([
-            Constraint::Length(2),
-            Constraint::Length(3),
-            Constraint::Length(1),
-        ])
-        .margin(1)
-        .split(area);
-    let block = Block::default().borders(Borders::ALL).title("Graphs");
-    f.render_widget(block, area);
+fn draw_gauges(frame: &mut Frame, app: &mut App, area: Rect) {
+    let chunks = Layout::vertical([
+        Constraint::Length(2),
+        Constraint::Length(3),
+        Constraint::Length(2),
+    ])
+    .margin(1)
+    .split(area);
+    let block = Block::bordered().title("Graphs");
+    frame.render_widget(block, area);
 
     let label = format!("{:.2}%", app.progress * 100.0);
     let gauge = Gauge::default()
-        .block(Block::default().title("Gauge:"))
+        .block(Block::new().title("Gauge:"))
         .gauge_style(
             Style::default()
                 .fg(Color::Magenta)
@@ -65,10 +68,10 @@ fn draw_gauges(f: &mut Frame, app: &mut App, area: Rect) {
         .use_unicode(app.enhanced_graphics)
         .label(label)
         .ratio(app.progress);
-    f.render_widget(gauge, chunks[0]);
+    frame.render_widget(gauge, chunks[0]);
 
     let sparkline = Sparkline::default()
-        .block(Block::default().title("Sparkline:"))
+        .block(Block::new().title("Sparkline:"))
         .style(Style::default().fg(Color::Green))
         .data(&app.sparkline.points)
         .bar_set(if app.enhanced_graphics {
@@ -76,39 +79,35 @@ fn draw_gauges(f: &mut Frame, app: &mut App, area: Rect) {
         } else {
             symbols::bar::THREE_LEVELS
         });
-    f.render_widget(sparkline, chunks[1]);
+    frame.render_widget(sparkline, chunks[1]);
 
     let line_gauge = LineGauge::default()
-        .block(Block::default().title("LineGauge:"))
-        .gauge_style(Style::default().fg(Color::Magenta))
+        .block(Block::new().title("LineGauge:"))
+        .filled_style(Style::default().fg(Color::Magenta))
         .line_set(if app.enhanced_graphics {
             symbols::line::THICK
         } else {
             symbols::line::NORMAL
         })
         .ratio(app.progress);
-    f.render_widget(line_gauge, chunks[2]);
+    frame.render_widget(line_gauge, chunks[2]);
 }
 
-fn draw_charts(f: &mut Frame, app: &mut App, area: Rect) {
+#[allow(clippy::too_many_lines)]
+fn draw_charts(frame: &mut Frame, app: &mut App, area: Rect) {
     let constraints = if app.show_chart {
         vec![Constraint::Percentage(50), Constraint::Percentage(50)]
     } else {
         vec![Constraint::Percentage(100)]
     };
-    let chunks = Layout::default()
-        .constraints(constraints)
-        .direction(Direction::Horizontal)
-        .split(area);
+    let chunks = Layout::horizontal(constraints).split(area);
     {
-        let chunks = Layout::default()
-            .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
+        let chunks = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)])
             .split(chunks[0]);
         {
-            let chunks = Layout::default()
-                .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
-                .direction(Direction::Horizontal)
-                .split(chunks[0]);
+            let chunks =
+                Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)])
+                    .split(chunks[0]);
 
             // Draw tasks
             let tasks: Vec<ListItem> = app
@@ -118,10 +117,10 @@ fn draw_charts(f: &mut Frame, app: &mut App, area: Rect) {
                 .map(|i| ListItem::new(vec![text::Line::from(Span::raw(*i))]))
                 .collect();
             let tasks = List::new(tasks)
-                .block(Block::default().borders(Borders::ALL).title("List"))
+                .block(Block::bordered().title("List"))
                 .highlight_style(Style::default().add_modifier(Modifier::BOLD))
                 .highlight_symbol("> ");
-            f.render_stateful_widget(tasks, chunks[0], &mut app.tasks.state);
+            frame.render_stateful_widget(tasks, chunks[0], &mut app.tasks.state);
 
             // Draw logs
             let info_style = Style::default().fg(Color::Blue);
@@ -146,12 +145,12 @@ fn draw_charts(f: &mut Frame, app: &mut App, area: Rect) {
                     ListItem::new(content)
                 })
                 .collect();
-            let logs = List::new(logs).block(Block::default().borders(Borders::ALL).title("List"));
-            f.render_stateful_widget(logs, chunks[1], &mut app.logs.state);
+            let logs = List::new(logs).block(Block::bordered().title("List"));
+            frame.render_stateful_widget(logs, chunks[1], &mut app.logs.state);
         }
 
         let barchart = BarChart::default()
-            .block(Block::default().borders(Borders::ALL).title("Bar chart"))
+            .block(Block::bordered().title("Bar chart"))
             .data(&app.barchart)
             .bar_width(3)
             .bar_gap(2)
@@ -168,7 +167,7 @@ fn draw_charts(f: &mut Frame, app: &mut App, area: Rect) {
             )
             .label_style(Style::default().fg(Color::Yellow))
             .bar_style(Style::default().fg(Color::Green));
-        f.render_widget(barchart, chunks[1]);
+        frame.render_widget(barchart, chunks[1]);
     }
     if app.show_chart {
         let x_labels = vec![
@@ -203,14 +202,12 @@ fn draw_charts(f: &mut Frame, app: &mut App, area: Rect) {
         ];
         let chart = Chart::new(datasets)
             .block(
-                Block::default()
-                    .title(Span::styled(
-                        "Chart",
-                        Style::default()
-                            .fg(Color::Cyan)
-                            .add_modifier(Modifier::BOLD),
-                    ))
-                    .borders(Borders::ALL),
+                Block::bordered().title(Span::styled(
+                    "Chart",
+                    Style::default()
+                        .fg(Color::Cyan)
+                        .add_modifier(Modifier::BOLD),
+                )),
             )
             .x_axis(
                 Axis::default()
@@ -224,17 +221,17 @@ fn draw_charts(f: &mut Frame, app: &mut App, area: Rect) {
                     .title("Y Axis")
                     .style(Style::default().fg(Color::Gray))
                     .bounds([-20.0, 20.0])
-                    .labels(vec![
+                    .labels([
                         Span::styled("-20", Style::default().add_modifier(Modifier::BOLD)),
                         Span::raw("0"),
                         Span::styled("20", Style::default().add_modifier(Modifier::BOLD)),
                     ]),
             );
-        f.render_widget(chart, chunks[1]);
+        frame.render_widget(chart, chunks[1]);
     }
 }
 
-fn draw_text(f: &mut Frame, area: Rect) {
+fn draw_text(frame: &mut Frame, area: Rect) {
     let text = vec![
         text::Line::from("This is a paragraph with several lines. You can change style your text the way you want"),
         text::Line::from(""),
@@ -262,21 +259,19 @@ fn draw_text(f: &mut Frame, area: Rect) {
             "One more thing is that it should display unicode characters: 10€"
         ),
     ];
-    let block = Block::default().borders(Borders::ALL).title(Span::styled(
+    let block = Block::bordered().title(Span::styled(
         "Footer",
         Style::default()
             .fg(Color::Magenta)
             .add_modifier(Modifier::BOLD),
     ));
     let paragraph = Paragraph::new(text).block(block).wrap(Wrap { trim: true });
-    f.render_widget(paragraph, area);
+    frame.render_widget(paragraph, area);
 }
 
-fn draw_second_tab(f: &mut Frame, app: &mut App, area: Rect) {
-    let chunks = Layout::default()
-        .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
-        .direction(Direction::Horizontal)
-        .split(area);
+fn draw_second_tab(frame: &mut Frame, app: &mut App, area: Rect) {
+    let chunks =
+        Layout::horizontal([Constraint::Percentage(30), Constraint::Percentage(70)]).split(area);
     let up_style = Style::default().fg(Color::Green);
     let failure_style = Style::default()
         .fg(Color::Red)
@@ -302,11 +297,11 @@ fn draw_second_tab(f: &mut Frame, app: &mut App, area: Rect) {
             .style(Style::default().fg(Color::Yellow))
             .bottom_margin(1),
     )
-    .block(Block::default().title("Servers").borders(Borders::ALL));
-    f.render_widget(table, chunks[0]);
+    .block(Block::bordered().title("Servers"));
+    frame.render_widget(table, chunks[0]);
 
     let map = Canvas::default()
-        .block(Block::default().title("World").borders(Borders::ALL))
+        .block(Block::bordered().title("World"))
         .paint(|ctx| {
             ctx.draw(&Map {
                 color: Color::White,
@@ -357,14 +352,11 @@ fn draw_second_tab(f: &mut Frame, app: &mut App, area: Rect) {
         })
         .x_bounds([-180.0, 180.0])
         .y_bounds([-90.0, 90.0]);
-    f.render_widget(map, chunks[1]);
+    frame.render_widget(map, chunks[1]);
 }
 
-fn draw_third_tab(f: &mut Frame, _app: &mut App, area: Rect) {
-    let chunks = Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)])
-        .split(area);
+fn draw_third_tab(frame: &mut Frame, _app: &mut App, area: Rect) {
+    let chunks = Layout::horizontal([Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)]).split(area);
     let colors = [
         Color::Reset,
         Color::Black,
@@ -403,6 +395,6 @@ fn draw_third_tab(f: &mut Frame, _app: &mut App, area: Rect) {
             Constraint::Ratio(1, 3),
         ],
     )
-    .block(Block::default().title("Colors").borders(Borders::ALL));
-    f.render_widget(table, chunks[0]);
+    .block(Block::bordered().title("Colors"));
+    frame.render_widget(table, chunks[0]);
 }

examples/demo2/app.rs

@@ -1,99 +1,225 @@
 use std::time::Duration;
 
-use anyhow::{Context, Result};
-use crossterm::event::{Event, KeyCode, KeyEvent, KeyEventKind, KeyModifiers};
-use ratatui::prelude::Rect;
+use color_eyre::{eyre::Context, Result};
+use crossterm::event;
+use itertools::Itertools;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{Event, KeyCode, KeyEvent, KeyEventKind},
+    layout::{Constraint, Layout, Rect},
+    style::Color,
+    text::{Line, Span},
+    widgets::{Block, Tabs, Widget},
+    DefaultTerminal, Frame,
+};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
 
-use crate::{Root, Term};
+use crate::{
+    destroy,
+    tabs::{AboutTab, EmailTab, RecipeTab, TracerouteTab, WeatherTab},
+    THEME,
+};
 
-#[derive(Debug)]
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
 pub struct App {
-    term: Term,
-    should_quit: bool,
-    context: AppContext,
+    mode: Mode,
+    tab: Tab,
+    about_tab: AboutTab,
+    recipe_tab: RecipeTab,
+    email_tab: EmailTab,
+    traceroute_tab: TracerouteTab,
+    weather_tab: WeatherTab,
 }
 
-#[derive(Debug, Default, Clone, Copy)]
-pub struct AppContext {
-    pub tab_index: usize,
-    pub row_index: usize,
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum Mode {
+    #[default]
+    Running,
+    Destroy,
+    Quit,
+}
+
+#[derive(Debug, Clone, Copy, Default, Display, EnumIter, FromRepr, PartialEq, Eq)]
+enum Tab {
+    #[default]
+    About,
+    Recipe,
+    Email,
+    Traceroute,
+    Weather,
 }
 
 impl App {
-    fn new() -> Result<Self> {
-        Ok(Self {
-            term: Term::start()?,
-            should_quit: false,
-            context: AppContext::default(),
-        })
-    }
-
-    pub fn run() -> Result<()> {
-        install_panic_hook();
-        let mut app = Self::new()?;
-        while !app.should_quit {
-            app.draw()?;
-            app.handle_events()?;
+    /// Run the app until the user quits.
+    pub fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        while self.is_running() {
+            terminal
+                .draw(|frame| self.draw(frame))
+                .wrap_err("terminal.draw")?;
+            self.handle_events()?;
         }
-        Term::stop()?;
         Ok(())
     }
 
-    fn draw(&mut self) -> Result<()> {
-        self.term
-            .draw(|frame| frame.render_widget(Root::new(&self.context), frame.size()))
-            .context("terminal.draw")?;
-        Ok(())
+    fn is_running(&self) -> bool {
+        self.mode != Mode::Quit
     }
 
+    /// Draw a single frame of the app.
+    fn draw(&self, frame: &mut Frame) {
+        frame.render_widget(self, frame.area());
+        if self.mode == Mode::Destroy {
+            destroy::destroy(frame);
+        }
+    }
+
+    /// Handle events from the terminal.
+    ///
+    /// This function is called once per frame, The events are polled from the stdin with timeout of
+    /// 1/50th of a second. This was chosen to try to match the default frame rate of a GIF in VHS.
     fn handle_events(&mut self) -> Result<()> {
-        match Term::next_event(Duration::from_millis(16))? {
-            Some(Event::Key(key)) => self.handle_key_event(key),
-            Some(Event::Resize(width, height)) => {
-                Ok(self.term.resize(Rect::new(0, 0, width, height))?)
-            }
-            _ => Ok(()),
-        }
-    }
-
-    fn handle_key_event(&mut self, key: KeyEvent) -> Result<()> {
-        if key.kind != KeyEventKind::Press {
+        let timeout = Duration::from_secs_f64(1.0 / 50.0);
+        if !event::poll(timeout)? {
             return Ok(());
         }
+        match event::read()? {
+            Event::Key(key) if key.kind == KeyEventKind::Press => self.handle_key_press(key),
+            _ => {}
+        }
+        Ok(())
+    }
 
-        let context = &mut self.context;
-        const TAB_COUNT: usize = 5;
+    fn handle_key_press(&mut self, key: KeyEvent) {
         match key.code {
-            KeyCode::Char('q') | KeyCode::Esc => {
-                self.should_quit = true;
-            }
-            KeyCode::Tab | KeyCode::BackTab if key.modifiers.contains(KeyModifiers::SHIFT) => {
-                let tab_index = context.tab_index + TAB_COUNT; // to wrap around properly
-                context.tab_index = tab_index.saturating_sub(1) % TAB_COUNT;
-                context.row_index = 0;
-            }
-            KeyCode::Tab | KeyCode::BackTab => {
-                context.tab_index = context.tab_index.saturating_add(1) % TAB_COUNT;
-                context.row_index = 0;
-            }
-            KeyCode::Up | KeyCode::Char('k') => {
-                context.row_index = context.row_index.saturating_sub(1);
-            }
-            KeyCode::Down | KeyCode::Char('j') => {
-                context.row_index = context.row_index.saturating_add(1);
-            }
+            KeyCode::Char('q') | KeyCode::Esc => self.mode = Mode::Quit,
+            KeyCode::Char('h') | KeyCode::Left => self.prev_tab(),
+            KeyCode::Char('l') | KeyCode::Right => self.next_tab(),
+            KeyCode::Char('k') | KeyCode::Up => self.prev(),
+            KeyCode::Char('j') | KeyCode::Down => self.next(),
+            KeyCode::Char('d') | KeyCode::Delete => self.destroy(),
             _ => {}
         };
-        Ok(())
+    }
+
+    fn prev(&mut self) {
+        match self.tab {
+            Tab::About => self.about_tab.prev_row(),
+            Tab::Recipe => self.recipe_tab.prev(),
+            Tab::Email => self.email_tab.prev(),
+            Tab::Traceroute => self.traceroute_tab.prev_row(),
+            Tab::Weather => self.weather_tab.prev(),
+        }
+    }
+
+    fn next(&mut self) {
+        match self.tab {
+            Tab::About => self.about_tab.next_row(),
+            Tab::Recipe => self.recipe_tab.next(),
+            Tab::Email => self.email_tab.next(),
+            Tab::Traceroute => self.traceroute_tab.next_row(),
+            Tab::Weather => self.weather_tab.next(),
+        }
+    }
+
+    fn prev_tab(&mut self) {
+        self.tab = self.tab.prev();
+    }
+
+    fn next_tab(&mut self) {
+        self.tab = self.tab.next();
+    }
+
+    fn destroy(&mut self) {
+        self.mode = Mode::Destroy;
     }
 }
 
-pub fn install_panic_hook() {
-    better_panic::install();
-    let hook = std::panic::take_hook();
-    std::panic::set_hook(Box::new(move |info| {
-        let _ = Term::stop();
-        hook(info);
-        std::process::exit(1);
-    }));
+/// Implement Widget for &App rather than for App as we would otherwise have to clone or copy the
+/// entire app state on every frame. For this example, the app state is small enough that it doesn't
+/// matter, but for larger apps this can be a significant performance improvement.
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let vertical = Layout::vertical([
+            Constraint::Length(1),
+            Constraint::Min(0),
+            Constraint::Length(1),
+        ]);
+        let [title_bar, tab, bottom_bar] = vertical.areas(area);
+
+        Block::new().style(THEME.root).render(area, buf);
+        self.render_title_bar(title_bar, buf);
+        self.render_selected_tab(tab, buf);
+        App::render_bottom_bar(bottom_bar, buf);
+    }
+}
+
+impl App {
+    fn render_title_bar(&self, area: Rect, buf: &mut Buffer) {
+        let layout = Layout::horizontal([Constraint::Min(0), Constraint::Length(43)]);
+        let [title, tabs] = layout.areas(area);
+
+        Span::styled("Ratatui", THEME.app_title).render(title, buf);
+        let titles = Tab::iter().map(Tab::title);
+        Tabs::new(titles)
+            .style(THEME.tabs)
+            .highlight_style(THEME.tabs_selected)
+            .select(self.tab as usize)
+            .divider("")
+            .padding("", "")
+            .render(tabs, buf);
+    }
+
+    fn render_selected_tab(&self, area: Rect, buf: &mut Buffer) {
+        match self.tab {
+            Tab::About => self.about_tab.render(area, buf),
+            Tab::Recipe => self.recipe_tab.render(area, buf),
+            Tab::Email => self.email_tab.render(area, buf),
+            Tab::Traceroute => self.traceroute_tab.render(area, buf),
+            Tab::Weather => self.weather_tab.render(area, buf),
+        };
+    }
+
+    fn render_bottom_bar(area: Rect, buf: &mut Buffer) {
+        let keys = [
+            ("H/←", "Left"),
+            ("L/→", "Right"),
+            ("K/↑", "Up"),
+            ("J/↓", "Down"),
+            ("D/Del", "Destroy"),
+            ("Q/Esc", "Quit"),
+        ];
+        let spans = keys
+            .iter()
+            .flat_map(|(key, desc)| {
+                let key = Span::styled(format!(" {key} "), THEME.key_binding.key);
+                let desc = Span::styled(format!(" {desc} "), THEME.key_binding.description);
+                [key, desc]
+            })
+            .collect_vec();
+        Line::from(spans)
+            .centered()
+            .style((Color::Indexed(236), Color::Indexed(232)))
+            .render(area, buf);
+    }
+}
+
+impl Tab {
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+
+    fn prev(self) -> Self {
+        let current_index = self as usize;
+        let prev_index = current_index.saturating_sub(1);
+        Self::from_repr(prev_index).unwrap_or(self)
+    }
+
+    fn title(self) -> String {
+        match self {
+            Self::About => String::new(),
+            tab => format!(" {tab} "),
+        }
+    }
 }

examples/demo2/colors.rs

@@ -1,5 +1,5 @@
 use palette::{IntoColor, Okhsv, Srgb};
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{buffer::Buffer, layout::Rect, style::Color, widgets::Widget};
 
 /// A widget that renders a color swatch of RGB colors.
 ///
@@ -9,22 +9,23 @@ use ratatui::{prelude::*, widgets::*};
 pub struct RgbSwatch;
 
 impl Widget for RgbSwatch {
+    #[allow(clippy::cast_precision_loss, clippy::similar_names)]
     fn render(self, area: Rect, buf: &mut Buffer) {
         for (yi, y) in (area.top()..area.bottom()).enumerate() {
-            let value = area.height as f32 - yi as f32;
-            let value_fg = value / (area.height as f32);
-            let value_bg = (value - 0.5) / (area.height as f32);
+            let value = f32::from(area.height) - yi as f32;
+            let value_fg = value / f32::from(area.height);
+            let value_bg = (value - 0.5) / f32::from(area.height);
             for (xi, x) in (area.left()..area.right()).enumerate() {
-                let hue = xi as f32 * 360.0 / area.width as f32;
+                let hue = xi as f32 * 360.0 / f32::from(area.width);
                 let fg = color_from_oklab(hue, Okhsv::max_saturation(), value_fg);
                 let bg = color_from_oklab(hue, Okhsv::max_saturation(), value_bg);
-                buf.get_mut(x, y).set_char('▀').set_fg(fg).set_bg(bg);
+                buf[(x, y)].set_char('▀').set_fg(fg).set_bg(bg);
             }
         }
     }
 }
 
-/// Convert a hue and value into an RGB color via the OkLab color space.
+/// Convert a hue and value into an RGB color via the Oklab color space.
 ///
 /// See <https://bottosson.github.io/posts/oklab/> for more details.
 pub fn color_from_oklab(hue: f32, saturation: f32, value: f32) -> Color {

examples/demo2/destroy.rs

@@ -0,0 +1,142 @@
+use rand::Rng;
+use rand_chacha::rand_core::SeedableRng;
+use ratatui::{
+    buffer::Buffer,
+    layout::{Flex, Layout, Rect},
+    style::{Color, Style},
+    text::Text,
+    widgets::Widget,
+    Frame,
+};
+
+/// delay the start of the animation so it doesn't start immediately
+const DELAY: usize = 120;
+/// higher means more pixels per frame are modified in the animation
+const DRIP_SPEED: usize = 500;
+/// delay the start of the text animation so it doesn't start immediately after the initial delay
+const TEXT_DELAY: usize = 180;
+
+/// Destroy mode activated by pressing `d`
+pub fn destroy(frame: &mut Frame<'_>) {
+    let frame_count = frame.count().saturating_sub(DELAY);
+    if frame_count == 0 {
+        return;
+    }
+
+    let area = frame.area();
+    let buf = frame.buffer_mut();
+
+    drip(frame_count, area, buf);
+    text(frame_count, area, buf);
+}
+
+/// Move a bunch of random pixels down one row.
+///
+/// Each pick some random pixels and move them each down one row. This is a very inefficient way to
+/// do this, but it works well enough for this demo.
+#[allow(
+    clippy::cast_possible_truncation,
+    clippy::cast_precision_loss,
+    clippy::cast_sign_loss
+)]
+fn drip(frame_count: usize, area: Rect, buf: &mut Buffer) {
+    // a seeded rng as we have to move the same random pixels each frame
+    let mut rng = rand_chacha::ChaCha8Rng::seed_from_u64(10);
+    let ramp_frames = 450;
+    let fractional_speed = frame_count as f64 / f64::from(ramp_frames);
+    let variable_speed = DRIP_SPEED as f64 * fractional_speed * fractional_speed * fractional_speed;
+    let pixel_count = (frame_count as f64 * variable_speed).floor() as usize;
+    for _ in 0..pixel_count {
+        let src_x = rng.gen_range(0..area.width);
+        let src_y = rng.gen_range(1..area.height - 2);
+        let src = buf[(src_x, src_y)].clone();
+        // 1% of the time, move a blank or pixel (10:1) to the top line of the screen
+        if rng.gen_ratio(1, 100) {
+            let dest_x = rng
+                .gen_range(src_x.saturating_sub(5)..src_x.saturating_add(5))
+                .clamp(area.left(), area.right() - 1);
+            let dest_y = area.top() + 1;
+
+            let dest = &mut buf[(dest_x, dest_y)];
+            // copy the cell to the new location about 1/10 of the time blank out the cell the rest
+            // of the time. This has the effect of gradually removing the pixels from the screen.
+            if rng.gen_ratio(1, 10) {
+                *dest = src;
+            } else {
+                dest.reset();
+            }
+        } else {
+            // move the pixel down one row
+            let dest_x = src_x;
+            let dest_y = src_y.saturating_add(1).min(area.bottom() - 2);
+            // copy the cell to the new location
+            buf[(dest_x, dest_y)] = src;
+        }
+    }
+}
+
+/// draw some text fading in and out from black to red and back
+#[allow(clippy::cast_possible_truncation, clippy::cast_precision_loss)]
+fn text(frame_count: usize, area: Rect, buf: &mut Buffer) {
+    let sub_frame = frame_count.saturating_sub(TEXT_DELAY);
+    if sub_frame == 0 {
+        return;
+    }
+
+    let logo = indoc::indoc! {"
+        ██████      ████    ██████    ████    ██████  ██    ██  ██
+        ██    ██  ██    ██    ██    ██    ██    ██    ██    ██  ██
+        ██████    ████████    ██    ████████    ██    ██    ██  ██
+        ██  ██    ██    ██    ██    ██    ██    ██    ██    ██  ██
+        ██    ██  ██    ██    ██    ██    ██    ██      ████    ██
+    "};
+    let logo_text = Text::styled(logo, Color::Rgb(255, 255, 255));
+    let area = centered_rect(area, logo_text.width() as u16, logo_text.height() as u16);
+
+    let mask_buf = &mut Buffer::empty(area);
+    logo_text.render(area, mask_buf);
+
+    let percentage = (sub_frame as f64 / 480.0).clamp(0.0, 1.0);
+
+    for row in area.rows() {
+        for col in row.columns() {
+            let cell = &mut buf[(col.x, col.y)];
+            let mask_cell = &mut mask_buf[(col.x, col.y)];
+            cell.set_symbol(mask_cell.symbol());
+
+            // blend the mask cell color with the cell color
+            let cell_color = cell.style().bg.unwrap_or(Color::Rgb(0, 0, 0));
+            let mask_color = mask_cell.style().fg.unwrap_or(Color::Rgb(255, 0, 0));
+
+            let color = blend(mask_color, cell_color, percentage);
+            cell.set_style(Style::new().fg(color));
+        }
+    }
+}
+
+fn blend(mask_color: Color, cell_color: Color, percentage: f64) -> Color {
+    let Color::Rgb(mask_red, mask_green, mask_blue) = mask_color else {
+        return mask_color;
+    };
+    let Color::Rgb(cell_red, cell_green, cell_blue) = cell_color else {
+        return mask_color;
+    };
+
+    let remain = 1.0 - percentage;
+
+    let red = f64::from(mask_red).mul_add(percentage, f64::from(cell_red) * remain);
+    let green = f64::from(mask_green).mul_add(percentage, f64::from(cell_green) * remain);
+    let blue = f64::from(mask_blue).mul_add(percentage, f64::from(cell_blue) * remain);
+
+    #[allow(clippy::cast_possible_truncation, clippy::cast_sign_loss)]
+    Color::Rgb(red as u8, green as u8, blue as u8)
+}
+
+/// a centered rect of the given size
+fn centered_rect(area: Rect, width: u16, height: u16) -> Rect {
+    let horizontal = Layout::horizontal([width]).flex(Flex::Center);
+    let vertical = Layout::vertical([height]).flex(Flex::Center);
+    let [area] = vertical.areas(area);
+    let [area] = horizontal.areas(area);
+    area
+}

examples/demo2/main.rs

@@ -1,17 +1,54 @@
-use anyhow::Result;
-pub use app::*;
-pub use colors::*;
-pub use root::*;
-pub use term::*;
-pub use theme::*;
+//! # [Ratatui] Demo2 example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+#![allow(
+    clippy::missing_errors_doc,
+    clippy::module_name_repetitions,
+    clippy::must_use_candidate
+)]
 
 mod app;
 mod colors;
-mod root;
+mod destroy;
 mod tabs;
-mod term;
 mod theme;
 
+use std::io::stdout;
+
+use app::App;
+use color_eyre::Result;
+use crossterm::{
+    execute,
+    terminal::{EnterAlternateScreen, LeaveAlternateScreen},
+};
+use ratatui::{layout::Rect, TerminalOptions, Viewport};
+
+pub use self::{
+    colors::{color_from_oklab, RgbSwatch},
+    theme::THEME,
+};
+
 fn main() -> Result<()> {
-    App::run()
+    color_eyre::install()?;
+    // this size is to match the size of the terminal when running the demo
+    // using vhs in a 1280x640 sized window (github social preview size)
+    let viewport = Viewport::Fixed(Rect::new(0, 0, 81, 18));
+    let terminal = ratatui::init_with_options(TerminalOptions { viewport });
+    execute!(stdout(), EnterAlternateScreen).expect("failed to enter alternate screen");
+    let app_result = App::default().run(terminal);
+    execute!(stdout(), LeaveAlternateScreen).expect("failed to leave alternate screen");
+    ratatui::restore();
+    app_result
 }

examples/demo2/root.rs

@@ -1,93 +0,0 @@
-use std::rc::Rc;
-
-use itertools::Itertools;
-use ratatui::{prelude::*, widgets::*};
-
-use crate::{tabs::*, AppContext, THEME};
-
-pub struct Root<'a> {
-    context: &'a AppContext,
-}
-
-impl<'a> Root<'a> {
-    pub fn new(context: &'a AppContext) -> Self {
-        Root { context }
-    }
-}
-
-impl Widget for Root<'_> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
-        Block::new().style(THEME.root).render(area, buf);
-        let area = layout(area, Direction::Vertical, vec![1, 0, 1]);
-        self.render_title_bar(area[0], buf);
-        self.render_selected_tab(area[1], buf);
-        self.render_bottom_bar(area[2], buf);
-    }
-}
-
-impl Root<'_> {
-    fn render_title_bar(&self, area: Rect, buf: &mut Buffer) {
-        let area = layout(area, Direction::Horizontal, vec![0, 45]);
-
-        Paragraph::new(Span::styled("Ratatui", THEME.app_title)).render(area[0], buf);
-        let titles = vec!["", " Recipe ", " Email ", " Traceroute ", " Weather "];
-        Tabs::new(titles)
-            .style(THEME.tabs)
-            .highlight_style(THEME.tabs_selected)
-            .select(self.context.tab_index)
-            .divider("")
-            .render(area[1], buf);
-    }
-
-    fn render_selected_tab(&self, area: Rect, buf: &mut Buffer) {
-        let row_index = self.context.row_index;
-        match self.context.tab_index {
-            0 => AboutTab::new(row_index).render(area, buf),
-            1 => RecipeTab::new(row_index).render(area, buf),
-            2 => EmailTab::new(row_index).render(area, buf),
-            3 => TracerouteTab::new(row_index).render(area, buf),
-            4 => WeatherTab::new(row_index).render(area, buf),
-            _ => unreachable!(),
-        };
-    }
-
-    fn render_bottom_bar(&self, area: Rect, buf: &mut Buffer) {
-        let keys = [
-            ("Q/Esc", "Quit"),
-            ("Tab", "Next Tab"),
-            ("↑/k", "Up"),
-            ("↓/j", "Down"),
-        ];
-        let spans = keys
-            .iter()
-            .flat_map(|(key, desc)| {
-                let key = Span::styled(format!(" {} ", key), THEME.key_binding.key);
-                let desc = Span::styled(format!(" {} ", desc), THEME.key_binding.description);
-                [key, desc]
-            })
-            .collect_vec();
-        Paragraph::new(Line::from(spans))
-            .alignment(Alignment::Center)
-            .fg(Color::Indexed(236))
-            .bg(Color::Indexed(232))
-            .render(area, buf);
-    }
-}
-
-/// simple helper method to split an area into multiple sub-areas
-pub fn layout(area: Rect, direction: Direction, heights: Vec<u16>) -> Rc<[Rect]> {
-    let constraints = heights
-        .iter()
-        .map(|&h| {
-            if h > 0 {
-                Constraint::Length(h)
-            } else {
-                Constraint::Min(0)
-            }
-        })
-        .collect_vec();
-    Layout::default()
-        .direction(direction)
-        .constraints(constraints)
-        .split(area)
-}

examples/demo2/tabs/about.rs

@@ -1,7 +1,11 @@
 use itertools::Itertools;
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Constraint, Layout, Margin, Rect},
+    widgets::{Block, Borders, Clear, Padding, Paragraph, Widget, Wrap},
+};
 
-use crate::{layout, RgbSwatch, THEME};
+use crate::{RgbSwatch, THEME};
 
 const RATATUI_LOGO: [&str; 32] = [
     "               ███              ",
@@ -38,40 +42,42 @@ const RATATUI_LOGO: [&str; 32] = [
     "  █xxxxxxxxxxxxxxxxxxxxx█ █     ",
 ];
 
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
 pub struct AboutTab {
-    selected_row: usize,
+    row_index: usize,
 }
 
 impl AboutTab {
-    pub fn new(selected_row: usize) -> Self {
-        Self { selected_row }
+    pub fn prev_row(&mut self) {
+        self.row_index = self.row_index.saturating_sub(1);
+    }
+
+    pub fn next_row(&mut self) {
+        self.row_index = self.row_index.saturating_add(1);
     }
 }
 
 impl Widget for AboutTab {
     fn render(self, area: Rect, buf: &mut Buffer) {
         RgbSwatch.render(area, buf);
-        let area = layout(area, Direction::Horizontal, vec![34, 0]);
-        render_crate_description(area[1], buf);
-        render_logo(self.selected_row, area[0], buf);
+        let horizontal = Layout::horizontal([Constraint::Length(34), Constraint::Min(0)]);
+        let [description, logo] = horizontal.areas(area);
+        render_crate_description(description, buf);
+        render_logo(self.row_index, logo, buf);
     }
 }
 
 fn render_crate_description(area: Rect, buf: &mut Buffer) {
-    let area = area.inner(
-        &(Margin {
-            vertical: 4,
-            horizontal: 2,
-        }),
-    );
+    let area = area.inner(Margin {
+        vertical: 4,
+        horizontal: 2,
+    });
     Clear.render(area, buf); // clear out the color swatches
     Block::new().style(THEME.content).render(area, buf);
-    let area = area.inner(
-        &(Margin {
-            vertical: 1,
-            horizontal: 2,
-        }),
-    );
+    let area = area.inner(Margin {
+        vertical: 1,
+        horizontal: 2,
+    });
     let text = "- cooking up terminal user interfaces -
 
     Ratatui is a Rust crate that provides widgets (e.g. Paragraph, Table) and draws them to the \
@@ -91,17 +97,18 @@ fn render_crate_description(area: Rect, buf: &mut Buffer) {
         .render(area, buf);
 }
 
-/// Use half block characters to render a logo based on the RATATUI_LOGO const.
+/// Use half block characters to render a logo based on the `RATATUI_LOGO` const.
 ///
 /// The logo is rendered in three colors, one for the rat, one for the terminal, and one for the
 /// rat's eye. The eye color alternates between two colors based on the selected row.
+#[allow(clippy::cast_possible_truncation)]
 pub fn render_logo(selected_row: usize, area: Rect, buf: &mut Buffer) {
     let eye_color = if selected_row % 2 == 0 {
         THEME.logo.rat_eye
     } else {
         THEME.logo.rat_eye_alt
     };
-    let area = area.inner(&Margin {
+    let area = area.inner(Margin {
         vertical: 0,
         horizontal: 2,
     });
@@ -109,13 +116,14 @@ pub fn render_logo(selected_row: usize, area: Rect, buf: &mut Buffer) {
         for (x, (ch1, ch2)) in line1.chars().zip(line2.chars()).enumerate() {
             let x = area.left() + x as u16;
             let y = area.top() + y as u16;
-            let cell = buf.get_mut(x, y);
+            let cell = &mut buf[(x, y)];
             let rat_color = THEME.logo.rat;
             let term_color = THEME.logo.term;
             match (ch1, ch2) {
                 ('█', '█') => {
                     cell.set_char('█');
                     cell.fg = rat_color;
+                    cell.bg = rat_color;
                 }
                 ('█', ' ') => {
                     cell.set_char('▀');

examples/demo2/tabs/email.rs

@@ -1,8 +1,17 @@
 use itertools::Itertools;
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    buffer::Buffer,
+    layout::{Constraint, Layout, Margin, Rect},
+    style::{Styled, Stylize},
+    text::Line,
+    widgets::{
+        Block, BorderType, Borders, Clear, List, ListItem, ListState, Padding, Paragraph,
+        Scrollbar, ScrollbarState, StatefulWidget, Tabs, Widget,
+    },
+};
 use unicode_width::UnicodeWidthStr;
 
-use crate::{layout, RgbSwatch, THEME};
+use crate::{RgbSwatch, THEME};
 
 #[derive(Debug, Default)]
 pub struct Email {
@@ -39,41 +48,47 @@ const EMAILS: &[Email] = &[
     },
 ];
 
-#[derive(Debug, Default)]
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
 pub struct EmailTab {
-    selected_index: usize,
+    row_index: usize,
 }
 
 impl EmailTab {
-    pub fn new(selected_index: usize) -> Self {
-        Self {
-            selected_index: selected_index % EMAILS.len(),
-        }
+    /// Select the previous email (with wrap around).
+    pub fn prev(&mut self) {
+        self.row_index = self.row_index.saturating_add(EMAILS.len() - 1) % EMAILS.len();
+    }
+
+    /// Select the next email (with wrap around).
+    pub fn next(&mut self) {
+        self.row_index = self.row_index.saturating_add(1) % EMAILS.len();
     }
 }
 
 impl Widget for EmailTab {
     fn render(self, area: Rect, buf: &mut Buffer) {
         RgbSwatch.render(area, buf);
-        let area = area.inner(&Margin {
+        let area = area.inner(Margin {
             vertical: 1,
             horizontal: 2,
         });
         Clear.render(area, buf);
-        let area = layout(area, Direction::Vertical, vec![5, 0]);
-        render_inbox(self.selected_index, area[0], buf);
-        render_email(self.selected_index, area[1], buf);
+        let vertical = Layout::vertical([Constraint::Length(5), Constraint::Min(0)]);
+        let [inbox, email] = vertical.areas(area);
+        render_inbox(self.row_index, inbox, buf);
+        render_email(self.row_index, email, buf);
     }
 }
 fn render_inbox(selected_index: usize, area: Rect, buf: &mut Buffer) {
-    let area = layout(area, Direction::Vertical, vec![1, 0]);
+    let vertical = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
+    let [tabs, inbox] = vertical.areas(area);
     let theme = THEME.email;
     Tabs::new(vec![" Inbox ", " Sent ", " Drafts "])
         .style(theme.tabs)
         .highlight_style(theme.tabs_selected)
         .select(0)
         .divider("")
-        .render(area[0], buf);
+        .render(tabs, buf);
 
     let highlight_symbol = ">>";
     let from_width = EMAILS
@@ -94,7 +109,7 @@ fn render_inbox(selected_index: usize, area: Rect, buf: &mut Buffer) {
             .style(theme.inbox)
             .highlight_style(theme.selected_item)
             .highlight_symbol(highlight_symbol),
-        area[1],
+        inbox,
         buf,
         &mut state,
     );
@@ -106,7 +121,7 @@ fn render_inbox(selected_index: usize, area: Rect, buf: &mut Buffer) {
         .end_symbol(None)
         .track_symbol(None)
         .thumb_symbol("▐")
-        .render(area[1], buf, &mut scrollbar_state);
+        .render(inbox, buf, &mut scrollbar_state);
 }
 
 fn render_email(selected_index: usize, area: Rect, buf: &mut Buffer) {
@@ -120,7 +135,8 @@ fn render_email(selected_index: usize, area: Rect, buf: &mut Buffer) {
     let inner = block.inner(area);
     block.render(area, buf);
     if let Some(email) = email {
-        let area = layout(inner, Direction::Vertical, vec![3, 0]);
+        let vertical = Layout::vertical([Constraint::Length(3), Constraint::Min(0)]);
+        let [headers_area, body_area] = vertical.areas(inner);
         let headers = vec![
             Line::from(vec![
                 "From: ".set_style(theme.header),
@@ -134,9 +150,11 @@ fn render_email(selected_index: usize, area: Rect, buf: &mut Buffer) {
         ];
         Paragraph::new(headers)
             .style(theme.body)
-            .render(area[0], buf);
+            .render(headers_area, buf);
         let body = email.body.lines().map(Line::from).collect_vec();
-        Paragraph::new(body).style(theme.body).render(area[1], buf);
+        Paragraph::new(body)
+            .style(theme.body)
+            .render(body_area, buf);
     } else {
         Paragraph::new("No email selected").render(inner, buf);
     }

examples/demo2/tabs/recipe.rs

@@ -1,7 +1,16 @@
 use itertools::Itertools;
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    buffer::Buffer,
+    layout::{Alignment, Constraint, Layout, Margin, Rect},
+    style::{Style, Stylize},
+    text::Line,
+    widgets::{
+        Block, Clear, Padding, Paragraph, Row, Scrollbar, ScrollbarOrientation, ScrollbarState,
+        StatefulWidget, Table, TableState, Widget, Wrap,
+    },
+};
 
-use crate::{layout, RgbSwatch, THEME};
+use crate::{RgbSwatch, THEME};
 
 #[derive(Debug, Default, Clone, Copy)]
 struct Ingredient {
@@ -10,6 +19,7 @@ struct Ingredient {
 }
 
 impl Ingredient {
+    #[allow(clippy::cast_possible_truncation)]
     fn height(&self) -> u16 {
         self.name.lines().count() as u16
     }
@@ -84,23 +94,27 @@ const INGREDIENTS: &[Ingredient] = &[
     },
 ];
 
-#[derive(Debug)]
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
 pub struct RecipeTab {
-    selected_row: usize,
+    row_index: usize,
 }
 
 impl RecipeTab {
-    pub fn new(selected_row: usize) -> Self {
-        Self {
-            selected_row: selected_row % INGREDIENTS.len(),
-        }
+    /// Select the previous item in the ingredients list (with wrap around)
+    pub fn prev(&mut self) {
+        self.row_index = self.row_index.saturating_add(INGREDIENTS.len() - 1) % INGREDIENTS.len();
+    }
+
+    /// Select the next item in the ingredients list (with wrap around)
+    pub fn next(&mut self) {
+        self.row_index = self.row_index.saturating_add(1) % INGREDIENTS.len();
     }
 }
 
 impl Widget for RecipeTab {
     fn render(self, area: Rect, buf: &mut Buffer) {
         RgbSwatch.render(area, buf);
-        let area = area.inner(&Margin {
+        let area = area.inner(Margin {
             vertical: 1,
             horizontal: 2,
         });
@@ -117,16 +131,17 @@ impl Widget for RecipeTab {
             height: area.height - 3,
             ..area
         };
-        render_scrollbar(self.selected_row, scrollbar_area, buf);
+        render_scrollbar(self.row_index, scrollbar_area, buf);
 
-        let area = area.inner(&Margin {
+        let area = area.inner(Margin {
             horizontal: 2,
             vertical: 1,
         });
-        let area = layout(area, Direction::Horizontal, vec![44, 0]);
+        let [recipe, ingredients] =
+            Layout::horizontal([Constraint::Length(44), Constraint::Min(0)]).areas(area);
 
-        render_recipe(area[0], buf);
-        render_ingredients(self.selected_row, area[1], buf);
+        render_recipe(recipe, buf);
+        render_ingredients(self.row_index, ingredients, buf);
     }
 }
 
@@ -143,7 +158,7 @@ fn render_recipe(area: Rect, buf: &mut Buffer) {
 
 fn render_ingredients(selected_row: usize, area: Rect, buf: &mut Buffer) {
     let mut state = TableState::default().with_selected(Some(selected_row));
-    let rows = INGREDIENTS.iter().map(|&i| i.into()).collect_vec();
+    let rows = INGREDIENTS.iter().copied();
     let theme = THEME.recipe;
     StatefulWidget::render(
         Table::new(rows, [Constraint::Length(7), Constraint::Length(30)])
@@ -166,5 +181,5 @@ fn render_scrollbar(position: usize, area: Rect, buf: &mut Buffer) {
         .end_symbol(None)
         .track_symbol(None)
         .thumb_symbol("▐")
-        .render(area, buf, &mut state)
+        .render(area, buf, &mut state);
 }

examples/demo2/tabs/traceroute.rs

@@ -1,41 +1,52 @@
 use itertools::Itertools;
 use ratatui::{
-    prelude::*,
-    widgets::{canvas::*, *},
+    buffer::Buffer,
+    layout::{Alignment, Constraint, Layout, Margin, Rect},
+    style::{Styled, Stylize},
+    symbols::Marker,
+    widgets::{
+        canvas::{self, Canvas, Map, MapResolution, Points},
+        Block, BorderType, Clear, Padding, Row, Scrollbar, ScrollbarOrientation, ScrollbarState,
+        Sparkline, StatefulWidget, Table, TableState, Widget,
+    },
 };
 
-use crate::{layout, RgbSwatch, THEME};
+use crate::{RgbSwatch, THEME};
 
-#[derive(Debug)]
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
 pub struct TracerouteTab {
-    selected_row: usize,
+    row_index: usize,
 }
 
 impl TracerouteTab {
-    pub fn new(selected_row: usize) -> Self {
-        Self {
-            selected_row: selected_row % HOPS.len(),
-        }
+    /// Select the previous row (with wrap around).
+    pub fn prev_row(&mut self) {
+        self.row_index = self.row_index.saturating_add(HOPS.len() - 1) % HOPS.len();
+    }
+
+    /// Select the next row (with wrap around).
+    pub fn next_row(&mut self) {
+        self.row_index = self.row_index.saturating_add(1) % HOPS.len();
     }
 }
 
 impl Widget for TracerouteTab {
     fn render(self, area: Rect, buf: &mut Buffer) {
         RgbSwatch.render(area, buf);
-        let area = area.inner(&Margin {
+        let area = area.inner(Margin {
             vertical: 1,
             horizontal: 2,
         });
         Clear.render(area, buf);
         Block::new().style(THEME.content).render(area, buf);
-        let area = Layout::default()
-            .direction(Direction::Horizontal)
-            .constraints([Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)])
-            .split(area);
-        let left_area = layout(area[0], Direction::Vertical, vec![0, 3]);
-        render_hops(self.selected_row, left_area[0], buf);
-        render_ping(self.selected_row, left_area[1], buf);
-        render_map(self.selected_row, area[1], buf);
+        let horizontal = Layout::horizontal([Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)]);
+        let vertical = Layout::vertical([Constraint::Min(0), Constraint::Length(3)]);
+        let [left, map] = horizontal.areas(area);
+        let [hops, pings] = vertical.areas(left);
+
+        render_hops(self.row_index, hops, buf);
+        render_ping(self.row_index, pings, buf);
+        render_map(self.row_index, map, buf);
     }
 }
 
@@ -45,10 +56,10 @@ fn render_hops(selected_row: usize, area: Rect, buf: &mut Buffer) {
         .iter()
         .map(|hop| Row::new(vec![hop.host, hop.address]))
         .collect_vec();
-    let block = Block::default()
-        .title("Traceroute bad.horse".bold().white())
+    let block = Block::new()
+        .padding(Padding::new(1, 1, 1, 1))
         .title_alignment(Alignment::Center)
-        .padding(Padding::new(1, 1, 1, 1));
+        .title("Traceroute bad.horse".bold().white());
     StatefulWidget::render(
         Table::new(rows, [Constraint::Max(100), Constraint::Length(15)])
             .header(Row::new(vec!["Host", "Address"]).set_style(THEME.traceroute.header))
@@ -100,7 +111,7 @@ fn render_map(selected_row: usize, area: Rect, buf: &mut Buffer) {
     let theme = THEME.traceroute.map;
     let path: Option<(&Hop, &Hop)> = HOPS.iter().tuple_windows().nth(selected_row);
     let map = Map {
-        resolution: canvas::MapResolution::High,
+        resolution: MapResolution::High,
         color: theme.color,
     };
     Canvas::default()

examples/demo2/tabs/weather.rs

@@ -1,51 +1,71 @@
 use itertools::Itertools;
 use palette::Okhsv;
 use ratatui::{
-    prelude::*,
-    widgets::{calendar::CalendarEventStore, *},
+    buffer::Buffer,
+    layout::{Constraint, Direction, Layout, Margin, Rect},
+    style::{Color, Style, Stylize},
+    symbols,
+    widgets::{
+        calendar::{CalendarEventStore, Monthly},
+        Bar, BarChart, BarGroup, Block, Clear, LineGauge, Padding, Widget,
+    },
 };
 use time::OffsetDateTime;
 
-use crate::{color_from_oklab, layout, RgbSwatch, THEME};
+use crate::{color_from_oklab, RgbSwatch, THEME};
 
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
 pub struct WeatherTab {
-    pub selected_row: usize,
+    pub download_progress: usize,
 }
 
 impl WeatherTab {
-    pub fn new(selected_row: usize) -> Self {
-        Self { selected_row }
+    /// Simulate a download indicator by decrementing the row index.
+    pub fn prev(&mut self) {
+        self.download_progress = self.download_progress.saturating_sub(1);
+    }
+
+    /// Simulate a download indicator by incrementing the row index.
+    pub fn next(&mut self) {
+        self.download_progress = self.download_progress.saturating_add(1);
     }
 }
 
 impl Widget for WeatherTab {
     fn render(self, area: Rect, buf: &mut Buffer) {
         RgbSwatch.render(area, buf);
-        let area = area.inner(&Margin {
+        let area = area.inner(Margin {
             vertical: 1,
             horizontal: 2,
         });
         Clear.render(area, buf);
         Block::new().style(THEME.content).render(area, buf);
 
-        let area = area.inner(&Margin {
+        let area = area.inner(Margin {
             horizontal: 2,
             vertical: 1,
         });
-        let area = layout(area, Direction::Vertical, vec![0, 1, 1]);
-        render_gauges(self.selected_row, area[2], buf);
+        let [main, _, gauges] = Layout::vertical([
+            Constraint::Min(0),
+            Constraint::Length(1),
+            Constraint::Length(1),
+        ])
+        .areas(area);
+        let [calendar, charts] =
+            Layout::horizontal([Constraint::Length(23), Constraint::Min(0)]).areas(main);
+        let [simple, horizontal] =
+            Layout::vertical([Constraint::Length(29), Constraint::Min(0)]).areas(charts);
 
-        let area = layout(area[0], Direction::Horizontal, vec![23, 0]);
-        render_calendar(area[0], buf);
-        let area = layout(area[1], Direction::Horizontal, vec![29, 0]);
-        render_simple_barchart(area[0], buf);
-        render_horizontal_barchart(area[1], buf);
+        render_calendar(calendar, buf);
+        render_simple_barchart(simple, buf);
+        render_horizontal_barchart(horizontal, buf);
+        render_gauge(self.download_progress, gauges, buf);
     }
 }
 
 fn render_calendar(area: Rect, buf: &mut Buffer) {
     let date = OffsetDateTime::now_utc().date();
-    calendar::Monthly::new(date, CalendarEventStore::today(Style::new().red().bold()))
+    Monthly::new(date, CalendarEventStore::today(Style::new().red().bold()))
         .block(Block::new().padding(Padding::new(0, 0, 2, 0)))
         .show_month_header(Style::new().bold())
         .show_weekdays_header(Style::new().italic())
@@ -68,9 +88,9 @@ fn render_simple_barchart(area: Rect, buf: &mut Buffer) {
             Bar::default()
                 .value(value)
                 // This doesn't actually render correctly as the text is too wide for the bar
-                // See https://github.com/ratatui-org/ratatui/issues/513 for more info
+                // See https://github.com/ratatui/ratatui/issues/513 for more info
                 // (the demo GIFs hack around this by hacking the calculation in bars.rs)
-                .text_value(format!("{}°", value))
+                .text_value(format!("{value}°"))
                 .style(if value > 70 {
                     Style::new().fg(Color::Red)
                 } else {
@@ -114,20 +134,22 @@ fn render_horizontal_barchart(area: Rect, buf: &mut Buffer) {
         .render(area, buf);
 }
 
-pub fn render_gauges(progress: usize, area: Rect, buf: &mut Buffer) {
+#[allow(clippy::cast_precision_loss)]
+pub fn render_gauge(progress: usize, area: Rect, buf: &mut Buffer) {
     let percent = (progress * 3).min(100) as f64;
 
     render_line_gauge(percent, area, buf);
 }
 
+#[allow(clippy::cast_possible_truncation)]
 fn render_line_gauge(percent: f64, area: Rect, buf: &mut Buffer) {
     // cycle color hue based on the percent for a neat effect yellow -> red
     let hue = 90.0 - (percent as f32 * 0.6);
     let value = Okhsv::max_value();
-    let fg = color_from_oklab(hue, Okhsv::max_saturation(), value);
-    let bg = color_from_oklab(hue, Okhsv::max_saturation(), value * 0.5);
+    let filled_color = color_from_oklab(hue, Okhsv::max_saturation(), value);
+    let unfilled_color = color_from_oklab(hue, Okhsv::max_saturation(), value * 0.5);
     let label = if percent < 100.0 {
-        format!("Downloading: {}%", percent)
+        format!("Downloading: {percent}%")
     } else {
         "Download Complete!".into()
     };
@@ -135,7 +157,8 @@ fn render_line_gauge(percent: f64, area: Rect, buf: &mut Buffer) {
         .ratio(percent / 100.0)
         .label(label)
         .style(Style::new().light_blue())
-        .gauge_style(Style::new().fg(fg).bg(bg))
+        .filled_style(Style::new().fg(filled_color))
+        .unfilled_style(Style::new().fg(unfilled_color))
         .line_set(symbols::line::THICK)
         .render(area, buf);
 }

examples/demo2/term.rs

@@ -1,71 +0,0 @@
-use std::{
-    io::{self, stdout, Stdout},
-    ops::{Deref, DerefMut},
-    time::Duration,
-};
-
-use anyhow::{Context, Result};
-use crossterm::{
-    event::{self, Event},
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-    ExecutableCommand,
-};
-use ratatui::prelude::*;
-
-/// A wrapper around the terminal that handles setting up and tearing down the terminal
-/// and provides a helper method to read events from the terminal.
-#[derive(Debug)]
-pub struct Term {
-    terminal: Terminal<CrosstermBackend<Stdout>>,
-}
-
-impl Term {
-    pub fn start() -> Result<Self> {
-        // this size is to match the size of the terminal when running the demo
-        // using vhs in a 1280x640 sized window (github social preview size)
-        let options = TerminalOptions {
-            viewport: Viewport::Fixed(Rect::new(0, 0, 81, 18)),
-        };
-        let terminal = Terminal::with_options(CrosstermBackend::new(io::stdout()), options)?;
-        enable_raw_mode().context("enable raw mode")?;
-        stdout()
-            .execute(EnterAlternateScreen)
-            .context("enter alternate screen")?;
-        Ok(Self { terminal })
-    }
-
-    pub fn stop() -> Result<()> {
-        disable_raw_mode().context("disable raw mode")?;
-        stdout()
-            .execute(LeaveAlternateScreen)
-            .context("leave alternate screen")?;
-        Ok(())
-    }
-
-    pub fn next_event(timeout: Duration) -> io::Result<Option<Event>> {
-        if !event::poll(timeout)? {
-            return Ok(None);
-        }
-        let event = event::read()?;
-        Ok(Some(event))
-    }
-}
-
-impl Deref for Term {
-    type Target = Terminal<CrosstermBackend<Stdout>>;
-    fn deref(&self) -> &Self::Target {
-        &self.terminal
-    }
-}
-
-impl DerefMut for Term {
-    fn deref_mut(&mut self) -> &mut Self::Target {
-        &mut self.terminal
-    }
-}
-
-impl Drop for Term {
-    fn drop(&mut self) {
-        let _ = Term::stop();
-    }
-}

examples/demo2/theme.rs

@@ -1,4 +1,4 @@
-use ratatui::prelude::*;
+use ratatui::style::{Color, Modifier, Style};
 
 pub struct Theme {
     pub root: Style,
@@ -128,9 +128,9 @@ const LIGHT_BLUE: Color = Color::Rgb(64, 96, 192);
 const LIGHT_YELLOW: Color = Color::Rgb(192, 192, 96);
 const LIGHT_GREEN: Color = Color::Rgb(64, 192, 96);
 const LIGHT_RED: Color = Color::Rgb(192, 96, 96);
-const RED: Color = Color::Indexed(160);
-const BLACK: Color = Color::Indexed(232); // not really black, often #080808
-const DARK_GRAY: Color = Color::Indexed(238);
-const MID_GRAY: Color = Color::Indexed(244);
-const LIGHT_GRAY: Color = Color::Indexed(250);
-const WHITE: Color = Color::Indexed(255); // not really white, often #eeeeee
+const RED: Color = Color::Rgb(215, 0, 0);
+const BLACK: Color = Color::Rgb(8, 8, 8); // not really black, often #080808
+const DARK_GRAY: Color = Color::Rgb(68, 68, 68);
+const MID_GRAY: Color = Color::Rgb(128, 128, 128);
+const LIGHT_GRAY: Color = Color::Rgb(188, 188, 188);
+const WHITE: Color = Color::Rgb(238, 238, 238); // not really white, often #eeeeee

examples/docsrs.rs

@@ -1,100 +1,101 @@
-use std::io::{self, stdout};
+//! # [Ratatui] Docs.rs example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-    ExecutableCommand,
+use color_eyre::Result;
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode},
+    layout::{Constraint, Layout},
+    style::{Color, Modifier, Style, Stylize},
+    text::{Line, Span, Text},
+    widgets::{Block, Borders, Paragraph},
+    DefaultTerminal, Frame,
 };
-use ratatui::{prelude::*, widgets::*};
 
-/// Example code for libr.rs
+/// Example code for lib.rs
 ///
 /// When cargo-rdme supports doc comments that import from code, this will be imported
 /// rather than copied to the lib.rs file.
-fn main() -> io::Result<()> {
-    let arg = std::env::args().nth(1).unwrap_or_default();
-    enable_raw_mode()?;
-    stdout().execute(EnterAlternateScreen)?;
-    let mut terminal = Terminal::new(CrosstermBackend::new(stdout()))?;
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let first_arg = std::env::args().nth(1).unwrap_or_default();
+    let terminal = ratatui::init();
+    let app_result = run(terminal, &first_arg);
+    ratatui::restore();
+    app_result
+}
 
+fn run(mut terminal: DefaultTerminal, first_arg: &str) -> Result<()> {
     let mut should_quit = false;
     while !should_quit {
-        terminal.draw(match arg.as_str() {
-            "hello_world" => hello_world,
+        terminal.draw(match first_arg {
             "layout" => layout,
             "styling" => styling,
             _ => hello_world,
         })?;
         should_quit = handle_events()?;
     }
-
-    disable_raw_mode()?;
-    stdout().execute(LeaveAlternateScreen)?;
     Ok(())
 }
 
-fn hello_world(frame: &mut Frame) {
-    frame.render_widget(
-        Paragraph::new("Hello World!")
-            .block(Block::default().title("Greeting").borders(Borders::ALL)),
-        frame.size(),
-    );
-}
-
-use crossterm::event::{self, Event, KeyCode};
-fn handle_events() -> io::Result<bool> {
-    if event::poll(std::time::Duration::from_millis(50))? {
-        if let Event::Key(key) = event::read()? {
-            if key.kind == event::KeyEventKind::Press && key.code == KeyCode::Char('q') {
-                return Ok(true);
-            }
+fn handle_events() -> std::io::Result<bool> {
+    if let Event::Key(key) = event::read()? {
+        if key.kind == event::KeyEventKind::Press && key.code == KeyCode::Char('q') {
+            return Ok(true);
         }
     }
     Ok(false)
 }
 
-fn layout(frame: &mut Frame) {
-    let main_layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Length(1),
-            Constraint::Min(0),
-            Constraint::Length(1),
-        ])
-        .split(frame.size());
+fn hello_world(frame: &mut Frame) {
     frame.render_widget(
-        Block::new().borders(Borders::TOP).title("Title Bar"),
-        main_layout[0],
-    );
-    frame.render_widget(
-        Block::new().borders(Borders::TOP).title("Status Bar"),
-        main_layout[2],
-    );
-
-    let inner_layout = Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
-        .split(main_layout[1]);
-    frame.render_widget(
-        Block::default().borders(Borders::ALL).title("Left"),
-        inner_layout[0],
-    );
-    frame.render_widget(
-        Block::default().borders(Borders::ALL).title("Right"),
-        inner_layout[1],
+        Paragraph::new("Hello World!").block(Block::bordered().title("Greeting")),
+        frame.area(),
     );
 }
 
+fn layout(frame: &mut Frame) {
+    let vertical = Layout::vertical([
+        Constraint::Length(1),
+        Constraint::Min(0),
+        Constraint::Length(1),
+    ]);
+    let horizontal = Layout::horizontal([Constraint::Ratio(1, 2); 2]);
+    let [title_bar, main_area, status_bar] = vertical.areas(frame.area());
+    let [left, right] = horizontal.areas(main_area);
+
+    frame.render_widget(
+        Block::new().borders(Borders::TOP).title("Title Bar"),
+        title_bar,
+    );
+    frame.render_widget(
+        Block::new().borders(Borders::TOP).title("Status Bar"),
+        status_bar,
+    );
+    frame.render_widget(Block::bordered().title("Left"), left);
+    frame.render_widget(Block::bordered().title("Right"), right);
+}
+
 fn styling(frame: &mut Frame) {
-    let areas = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Length(1),
-            Constraint::Length(1),
-            Constraint::Length(1),
-            Constraint::Length(1),
-            Constraint::Min(0),
-        ])
-        .split(frame.size());
+    let areas = Layout::vertical([
+        Constraint::Length(1),
+        Constraint::Length(1),
+        Constraint::Length(1),
+        Constraint::Length(1),
+        Constraint::Min(0),
+    ])
+    .split(frame.area());
 
     let span1 = Span::raw("Hello ");
     let span2 = Span::styled(

examples/flex.rs

@@ -0,0 +1,530 @@
+//! # [Ratatui] Flex example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use std::num::NonZeroUsize;
+
+use color_eyre::Result;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{
+        Alignment,
+        Constraint::{self, Fill, Length, Max, Min, Percentage, Ratio},
+        Flex, Layout, Rect,
+    },
+    style::{palette::tailwind, Color, Modifier, Style, Stylize},
+    symbols::{self, line},
+    text::{Line, Text},
+    widgets::{
+        block::Title, Block, Paragraph, Scrollbar, ScrollbarOrientation, ScrollbarState,
+        StatefulWidget, Tabs, Widget,
+    },
+    DefaultTerminal,
+};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
+}
+
+const EXAMPLE_DATA: &[(&str, &[Constraint])] = &[
+    (
+        "Min(u16) takes any excess space always",
+        &[Length(10), Min(10), Max(10), Percentage(10), Ratio(1,10)],
+    ),
+    (
+        "Fill(u16) takes any excess space always",
+        &[Length(20), Percentage(20), Ratio(1, 5), Fill(1)],
+    ),
+    (
+        "Here's all constraints in one line",
+        &[Length(10), Min(10), Max(10), Percentage(10), Ratio(1,10), Fill(1)],
+    ),
+    (
+        "",
+        &[Max(50), Min(50)],
+    ),
+    (
+        "",
+        &[Max(20), Length(10)],
+    ),
+    (
+        "",
+        &[Max(20), Length(10)],
+    ),
+    (
+        "Min grows always but also allows Fill to grow",
+        &[Percentage(50), Fill(1), Fill(2), Min(50)],
+    ),
+    (
+        "In `Legacy`, the last constraint of lowest priority takes excess space",
+        &[Length(20), Length(20), Percentage(20)],
+    ),
+    ("", &[Length(20), Percentage(20), Length(20)]),
+    ("A lowest priority constraint will be broken before a high priority constraint", &[Ratio(1,4), Percentage(20)]),
+    ("`Length` is higher priority than `Percentage`", &[Percentage(20), Length(10)]),
+    ("`Min/Max` is higher priority than `Length`", &[Length(10), Max(20)]),
+    ("", &[Length(100), Min(20)]),
+    ("`Length` is higher priority than `Min/Max`", &[Max(20), Length(10)]),
+    ("", &[Min(20), Length(90)]),
+    ("Fill is the lowest priority and will fill any excess space", &[Fill(1), Ratio(1, 4)]),
+    ("Fill can be used to scale proportionally with other Fill blocks", &[Fill(1), Percentage(20), Fill(2)]),
+    ("", &[Ratio(1, 3), Percentage(20), Ratio(2, 3)]),
+    ("Legacy will stretch the last lowest priority constraint\nStretch will only stretch equal weighted constraints", &[Length(20), Length(15)]),
+    ("", &[Percentage(20), Length(15)]),
+    ("`Fill(u16)` fills up excess space, but is lower priority to spacers.\ni.e. Fill will only have widths in Flex::Stretch and Flex::Legacy", &[Fill(1), Fill(1)]),
+    ("", &[Length(20), Length(20)]),
+    (
+        "When not using `Flex::Stretch` or `Flex::Legacy`,\n`Min(u16)` and `Max(u16)` collapse to their lowest values",
+        &[Min(20), Max(20)],
+    ),
+    (
+        "",
+        &[Max(20)],
+    ),
+    ("", &[Min(20), Max(20), Length(20), Length(20)]),
+    ("", &[Fill(0), Fill(0)]),
+    (
+        "`Fill(1)` can be to scale with respect to other `Fill(2)`",
+        &[Fill(1), Fill(2)],
+    ),
+    (
+        "",
+        &[Fill(1), Min(10), Max(10), Fill(2)],
+    ),
+    (
+        "`Fill(0)` collapses if there are other non-zero `Fill(_)`\nconstraints. e.g. `[Fill(0), Fill(0), Fill(1)]`:",
+        &[
+            Fill(0),
+            Fill(0),
+            Fill(1),
+        ],
+    ),
+];
+
+#[derive(Default, Clone, Copy)]
+struct App {
+    selected_tab: SelectedTab,
+    scroll_offset: u16,
+    spacing: u16,
+    state: AppState,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Quit,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+struct Example {
+    constraints: Vec<Constraint>,
+    description: String,
+    flex: Flex,
+    spacing: u16,
+}
+
+/// Tabs for the different layouts
+///
+/// Note: the order of the variants will determine the order of the tabs this uses several derive
+/// macros from the `strum` crate to make it easier to iterate over the variants.
+/// (`FromRepr`,`Display`,`EnumIter`).
+#[derive(Default, Debug, Copy, Clone, PartialEq, Eq, FromRepr, Display, EnumIter)]
+enum SelectedTab {
+    #[default]
+    Legacy,
+    Start,
+    Center,
+    End,
+    SpaceAround,
+    SpaceBetween,
+}
+
+impl App {
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        // increase the layout cache to account for the number of layout events. This ensures that
+        // layout is not generally reprocessed on every frame (which would lead to possible janky
+        // results when there are more than one possible solution to the requested layout). This
+        // assumes the user changes spacing about a 100 times or so.
+        let cache_size = EXAMPLE_DATA.len() * SelectedTab::iter().len() * 100;
+        Layout::init_cache(NonZeroUsize::new(cache_size).unwrap());
+
+        while self.is_running() {
+            terminal.draw(|frame| frame.render_widget(self, frame.area()))?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
+
+    fn is_running(self) -> bool {
+        self.state == AppState::Running
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        match event::read()? {
+            Event::Key(key) if key.kind == KeyEventKind::Press => match key.code {
+                KeyCode::Char('q') | KeyCode::Esc => self.quit(),
+                KeyCode::Char('l') | KeyCode::Right => self.next(),
+                KeyCode::Char('h') | KeyCode::Left => self.previous(),
+                KeyCode::Char('j') | KeyCode::Down => self.down(),
+                KeyCode::Char('k') | KeyCode::Up => self.up(),
+                KeyCode::Char('g') | KeyCode::Home => self.top(),
+                KeyCode::Char('G') | KeyCode::End => self.bottom(),
+                KeyCode::Char('+') => self.increment_spacing(),
+                KeyCode::Char('-') => self.decrement_spacing(),
+                _ => (),
+            },
+            _ => {}
+        }
+        Ok(())
+    }
+
+    fn next(&mut self) {
+        self.selected_tab = self.selected_tab.next();
+    }
+
+    fn previous(&mut self) {
+        self.selected_tab = self.selected_tab.previous();
+    }
+
+    fn up(&mut self) {
+        self.scroll_offset = self.scroll_offset.saturating_sub(1);
+    }
+
+    fn down(&mut self) {
+        self.scroll_offset = self
+            .scroll_offset
+            .saturating_add(1)
+            .min(max_scroll_offset());
+    }
+
+    fn top(&mut self) {
+        self.scroll_offset = 0;
+    }
+
+    fn bottom(&mut self) {
+        self.scroll_offset = max_scroll_offset();
+    }
+
+    fn increment_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_add(1);
+    }
+
+    fn decrement_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_sub(1);
+    }
+
+    fn quit(&mut self) {
+        self.state = AppState::Quit;
+    }
+}
+
+// when scrolling, make sure we don't scroll past the last example
+fn max_scroll_offset() -> u16 {
+    example_height()
+        - EXAMPLE_DATA
+            .last()
+            .map_or(0, |(desc, _)| get_description_height(desc) + 4)
+}
+
+/// The height of all examples combined
+///
+/// Each may or may not have a title so we need to account for that.
+fn example_height() -> u16 {
+    EXAMPLE_DATA
+        .iter()
+        .map(|(desc, _)| get_description_height(desc) + 4)
+        .sum()
+}
+
+impl Widget for App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let layout = Layout::vertical([Length(3), Length(1), Fill(0)]);
+        let [tabs, axis, demo] = layout.areas(area);
+        self.tabs().render(tabs, buf);
+        let scroll_needed = self.render_demo(demo, buf);
+        let axis_width = if scroll_needed {
+            axis.width.saturating_sub(1)
+        } else {
+            axis.width
+        };
+        Self::axis(axis_width, self.spacing).render(axis, buf);
+    }
+}
+
+impl App {
+    fn tabs(self) -> impl Widget {
+        let tab_titles = SelectedTab::iter().map(SelectedTab::to_tab_title);
+        let block = Block::new()
+            .title(Title::from("Flex Layouts ".bold()))
+            .title(" Use ◄ ► to change tab, ▲ ▼  to scroll, - + to change spacing ");
+        Tabs::new(tab_titles)
+            .block(block)
+            .highlight_style(Modifier::REVERSED)
+            .select(self.selected_tab as usize)
+            .divider(" ")
+            .padding("", "")
+    }
+
+    /// a bar like `<----- 80 px (gap: 2 px)? ----->`
+    fn axis(width: u16, spacing: u16) -> impl Widget {
+        let width = width as usize;
+        // only show gap when spacing is not zero
+        let label = if spacing != 0 {
+            format!("{width} px (gap: {spacing} px)")
+        } else {
+            format!("{width} px")
+        };
+        let bar_width = width.saturating_sub(2); // we want to `<` and `>` at the ends
+        let width_bar = format!("<{label:-^bar_width$}>");
+        Paragraph::new(width_bar.dark_gray()).centered()
+    }
+
+    /// Render the demo content
+    ///
+    /// This function renders the demo content into a separate buffer and then splices the buffer
+    /// into the main buffer. This is done to make it possible to handle scrolling easily.
+    ///
+    /// Returns bool indicating whether scroll was needed
+    #[allow(clippy::cast_possible_truncation)]
+    fn render_demo(self, area: Rect, buf: &mut Buffer) -> bool {
+        // render demo content into a separate buffer so all examples fit we add an extra
+        // area.height to make sure the last example is fully visible even when the scroll offset is
+        // at the max
+        let height = example_height();
+        let demo_area = Rect::new(0, 0, area.width, height);
+        let mut demo_buf = Buffer::empty(demo_area);
+
+        let scrollbar_needed = self.scroll_offset != 0 || height > area.height;
+        let content_area = if scrollbar_needed {
+            Rect {
+                width: demo_area.width - 1,
+                ..demo_area
+            }
+        } else {
+            demo_area
+        };
+
+        let mut spacing = self.spacing;
+        self.selected_tab
+            .render(content_area, &mut demo_buf, &mut spacing);
+
+        let visible_content = demo_buf
+            .content
+            .into_iter()
+            .skip((area.width * self.scroll_offset) as usize)
+            .take(area.area() as usize);
+        for (i, cell) in visible_content.enumerate() {
+            let x = i as u16 % area.width;
+            let y = i as u16 / area.width;
+            buf[(area.x + x, area.y + y)] = cell;
+        }
+
+        if scrollbar_needed {
+            let area = area.intersection(buf.area);
+            let mut state = ScrollbarState::new(max_scroll_offset() as usize)
+                .position(self.scroll_offset as usize);
+            Scrollbar::new(ScrollbarOrientation::VerticalRight).render(area, buf, &mut state);
+        }
+        scrollbar_needed
+    }
+}
+
+impl SelectedTab {
+    /// Get the previous tab, if there is no previous tab return the current tab.
+    fn previous(self) -> Self {
+        let current_index: usize = self as usize;
+        let previous_index = current_index.saturating_sub(1);
+        Self::from_repr(previous_index).unwrap_or(self)
+    }
+
+    /// Get the next tab, if there is no next tab return the current tab.
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+
+    /// Convert a `SelectedTab` into a `Line` to display it by the `Tabs` widget.
+    fn to_tab_title(value: Self) -> Line<'static> {
+        use tailwind::{INDIGO, ORANGE, SKY};
+        let text = value.to_string();
+        let color = match value {
+            Self::Legacy => ORANGE.c400,
+            Self::Start => SKY.c400,
+            Self::Center => SKY.c300,
+            Self::End => SKY.c200,
+            Self::SpaceAround => INDIGO.c400,
+            Self::SpaceBetween => INDIGO.c300,
+        };
+        format!(" {text} ").fg(color).bg(Color::Black).into()
+    }
+}
+
+impl StatefulWidget for SelectedTab {
+    type State = u16;
+    fn render(self, area: Rect, buf: &mut Buffer, spacing: &mut Self::State) {
+        let spacing = *spacing;
+        match self {
+            Self::Legacy => Self::render_examples(area, buf, Flex::Legacy, spacing),
+            Self::Start => Self::render_examples(area, buf, Flex::Start, spacing),
+            Self::Center => Self::render_examples(area, buf, Flex::Center, spacing),
+            Self::End => Self::render_examples(area, buf, Flex::End, spacing),
+            Self::SpaceAround => Self::render_examples(area, buf, Flex::SpaceAround, spacing),
+            Self::SpaceBetween => Self::render_examples(area, buf, Flex::SpaceBetween, spacing),
+        }
+    }
+}
+
+impl SelectedTab {
+    fn render_examples(area: Rect, buf: &mut Buffer, flex: Flex, spacing: u16) {
+        let heights = EXAMPLE_DATA
+            .iter()
+            .map(|(desc, _)| get_description_height(desc) + 4);
+        let areas = Layout::vertical(heights).flex(Flex::Start).split(area);
+        for (area, (description, constraints)) in areas.iter().zip(EXAMPLE_DATA.iter()) {
+            Example::new(constraints, description, flex, spacing).render(*area, buf);
+        }
+    }
+}
+
+impl Example {
+    fn new(constraints: &[Constraint], description: &str, flex: Flex, spacing: u16) -> Self {
+        Self {
+            constraints: constraints.into(),
+            description: description.into(),
+            flex,
+            spacing,
+        }
+    }
+}
+
+impl Widget for Example {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let title_height = get_description_height(&self.description);
+        let layout = Layout::vertical([Length(title_height), Fill(0)]);
+        let [title, illustrations] = layout.areas(area);
+
+        let (blocks, spacers) = Layout::horizontal(&self.constraints)
+            .flex(self.flex)
+            .spacing(self.spacing)
+            .split_with_spacers(illustrations);
+
+        if !self.description.is_empty() {
+            Paragraph::new(
+                self.description
+                    .split('\n')
+                    .map(|s| format!("// {s}").italic().fg(tailwind::SLATE.c400))
+                    .map(Line::from)
+                    .collect::<Vec<Line>>(),
+            )
+            .render(title, buf);
+        }
+
+        for (block, constraint) in blocks.iter().zip(&self.constraints) {
+            Self::illustration(*constraint, block.width).render(*block, buf);
+        }
+
+        for spacer in spacers.iter() {
+            Self::render_spacer(*spacer, buf);
+        }
+    }
+}
+
+impl Example {
+    fn render_spacer(spacer: Rect, buf: &mut Buffer) {
+        if spacer.width > 1 {
+            let corners_only = symbols::border::Set {
+                top_left: line::NORMAL.top_left,
+                top_right: line::NORMAL.top_right,
+                bottom_left: line::NORMAL.bottom_left,
+                bottom_right: line::NORMAL.bottom_right,
+                vertical_left: " ",
+                vertical_right: " ",
+                horizontal_top: " ",
+                horizontal_bottom: " ",
+            };
+            Block::bordered()
+                .border_set(corners_only)
+                .border_style(Style::reset().dark_gray())
+                .render(spacer, buf);
+        } else {
+            Paragraph::new(Text::from(vec![
+                Line::from(""),
+                Line::from("│"),
+                Line::from("│"),
+                Line::from(""),
+            ]))
+            .style(Style::reset().dark_gray())
+            .render(spacer, buf);
+        }
+        let width = spacer.width;
+        let label = if width > 4 {
+            format!("{width} px")
+        } else if width > 2 {
+            format!("{width}")
+        } else {
+            String::new()
+        };
+        let text = Text::from(vec![
+            Line::raw(""),
+            Line::raw(""),
+            Line::styled(label, Style::reset().dark_gray()),
+        ]);
+        Paragraph::new(text)
+            .style(Style::reset().dark_gray())
+            .alignment(Alignment::Center)
+            .render(spacer, buf);
+    }
+
+    fn illustration(constraint: Constraint, width: u16) -> impl Widget {
+        let main_color = color_for_constraint(constraint);
+        let fg_color = Color::White;
+        let title = format!("{constraint}");
+        let content = format!("{width} px");
+        let text = format!("{title}\n{content}");
+        let block = Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(main_color).reversed())
+            .style(Style::default().fg(fg_color).bg(main_color));
+        Paragraph::new(text).centered().block(block)
+    }
+}
+
+const fn color_for_constraint(constraint: Constraint) -> Color {
+    use tailwind::{BLUE, SLATE};
+    match constraint {
+        Constraint::Min(_) => BLUE.c900,
+        Constraint::Max(_) => BLUE.c800,
+        Constraint::Length(_) => SLATE.c700,
+        Constraint::Percentage(_) => SLATE.c800,
+        Constraint::Ratio(_, _) => SLATE.c900,
+        Constraint::Fill(_) => SLATE.c950,
+    }
+}
+
+#[allow(clippy::cast_possible_truncation)]
+fn get_description_height(s: &str) -> u16 {
+    if s.is_empty() {
+        0
+    } else {
+        s.split('\n').count() as u16
+    }
+}

examples/gauge.rs

@@ -1,95 +1,100 @@
-use std::{
-    io::{self, stdout, Stdout},
-    rc::Rc,
-    time::Duration,
-};
+//! # [Ratatui] Gauge example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use anyhow::Result;
-use crossterm::{
-    event::{self, Event, KeyCode, KeyEventKind},
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-    ExecutableCommand,
-};
+use std::time::Duration;
+
+use color_eyre::Result;
 use ratatui::{
-    prelude::*,
-    widgets::{block::Title, *},
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{palette::tailwind, Color, Style, Stylize},
+    text::Span,
+    widgets::{block::Title, Block, Borders, Gauge, Padding, Paragraph, Widget},
+    DefaultTerminal,
 };
 
-fn main() -> Result<()> {
-    App::run()
-}
-
-struct App {
-    term: Term,
-    should_quit: bool,
-    state: AppState,
-}
+const GAUGE1_COLOR: Color = tailwind::RED.c800;
+const GAUGE2_COLOR: Color = tailwind::GREEN.c800;
+const GAUGE3_COLOR: Color = tailwind::BLUE.c800;
+const GAUGE4_COLOR: Color = tailwind::ORANGE.c800;
+const CUSTOM_LABEL_COLOR: Color = tailwind::SLATE.c200;
 
 #[derive(Debug, Default, Clone, Copy)]
-struct AppState {
+struct App {
+    state: AppState,
+    progress_columns: u16,
     progress1: u16,
-    progress2: u16,
+    progress2: f64,
     progress3: f64,
-    progress4: u16,
+    progress4: f64,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Started,
+    Quitting,
+}
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
 }
 
 impl App {
-    fn run() -> Result<()> {
-        // run at ~10 fps minus the time it takes to draw
-        let timeout = Duration::from_secs_f32(1.0 / 10.0);
-        let mut app = Self::start()?;
-        while !app.should_quit {
-            app.update();
-            app.draw()?;
-            app.handle_events(timeout)?;
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        while self.state != AppState::Quitting {
+            terminal.draw(|frame| frame.render_widget(&self, frame.area()))?;
+            self.handle_events()?;
+            self.update(terminal.size()?.width);
         }
-        app.stop()?;
         Ok(())
     }
 
-    fn start() -> Result<Self> {
-        Ok(App {
-            term: Term::start()?,
-            should_quit: false,
-            state: AppState {
-                progress1: 0,
-                progress2: 0,
-                progress3: 0.0,
-                progress4: 0,
-            },
-        })
+    fn update(&mut self, terminal_width: u16) {
+        if self.state != AppState::Started {
+            return;
+        }
+
+        // progress1 and progress2 help show the difference between ratio and percentage measuring
+        // the same thing, but converting to either a u16 or f64. Effectively, we're showing the
+        // difference between how a continuous gauge acts for floor and rounded values.
+        self.progress_columns = (self.progress_columns + 1).clamp(0, terminal_width);
+        self.progress1 = self.progress_columns * 100 / terminal_width;
+        self.progress2 = f64::from(self.progress_columns) * 100.0 / f64::from(terminal_width);
+
+        // progress3 and progress4 similarly show the difference between unicode and non-unicode
+        // gauges measuring the same thing.
+        self.progress3 = (self.progress3 + 0.1).clamp(40.0, 100.0);
+        self.progress4 = (self.progress4 + 0.1).clamp(40.0, 100.0);
     }
 
-    fn stop(&mut self) -> Result<()> {
-        Term::stop()?;
-        Ok(())
-    }
-
-    fn update(&mut self) {
-        self.state.progress1 = (self.state.progress1 + 4).min(100);
-        self.state.progress2 = (self.state.progress2 + 3).min(100);
-        self.state.progress3 = (self.state.progress3 + 0.02).min(1.0);
-        self.state.progress4 = (self.state.progress4 + 1).min(100);
-    }
-
-    fn draw(&mut self) -> Result<()> {
-        self.term.draw(|frame| {
-            let state = self.state;
-            let layout = Self::equal_layout(frame);
-            Self::render_gauge1(state.progress1, frame, layout[0]);
-            Self::render_gauge2(state.progress2, frame, layout[1]);
-            Self::render_gauge3(state.progress3, frame, layout[2]);
-            Self::render_gauge4(state.progress4, frame, layout[3]);
-        })?;
-        Ok(())
-    }
-
-    fn handle_events(&mut self, timeout: Duration) -> io::Result<()> {
+    fn handle_events(&mut self) -> Result<()> {
+        let timeout = Duration::from_secs_f32(1.0 / 20.0);
         if event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
                 if key.kind == KeyEventKind::Press {
-                    if let KeyCode::Char('q') = key.code {
-                        self.should_quit = true;
+                    match key.code {
+                        KeyCode::Char(' ') | KeyCode::Enter => self.start(),
+                        KeyCode::Char('q') | KeyCode::Esc => self.quit(),
+                        _ => {}
                     }
                 }
             }
@@ -97,91 +102,104 @@ impl App {
         Ok(())
     }
 
-    fn equal_layout(frame: &Frame) -> Rc<[Rect]> {
-        Layout::default()
-            .direction(Direction::Vertical)
-            .constraints([
-                Constraint::Percentage(25),
-                Constraint::Percentage(25),
-                Constraint::Percentage(25),
-                Constraint::Percentage(25),
-            ])
-            .split(frame.size())
+    fn start(&mut self) {
+        self.state = AppState::Started;
     }
 
-    fn render_gauge1(progress: u16, frame: &mut Frame, area: Rect) {
-        let title = Self::title_block("Gauge with percentage progress");
-        let gauge = Gauge::default()
+    fn quit(&mut self) {
+        self.state = AppState::Quitting;
+    }
+}
+
+impl Widget for &App {
+    #[allow(clippy::similar_names)]
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::{Length, Min, Ratio};
+        let layout = Layout::vertical([Length(2), Min(0), Length(1)]);
+        let [header_area, gauge_area, footer_area] = layout.areas(area);
+
+        let layout = Layout::vertical([Ratio(1, 4); 4]);
+        let [gauge1_area, gauge2_area, gauge3_area, gauge4_area] = layout.areas(gauge_area);
+
+        render_header(header_area, buf);
+        render_footer(footer_area, buf);
+
+        self.render_gauge1(gauge1_area, buf);
+        self.render_gauge2(gauge2_area, buf);
+        self.render_gauge3(gauge3_area, buf);
+        self.render_gauge4(gauge4_area, buf);
+    }
+}
+
+fn render_header(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("Ratatui Gauge Example")
+        .bold()
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+        .render(area, buf);
+}
+
+fn render_footer(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("Press ENTER to start")
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+        .bold()
+        .render(area, buf);
+}
+
+impl App {
+    fn render_gauge1(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with percentage");
+        Gauge::default()
             .block(title)
-            .gauge_style(Style::new().light_red())
-            .percent(progress);
-        frame.render_widget(gauge, area);
+            .gauge_style(GAUGE1_COLOR)
+            .percent(self.progress1)
+            .render(area, buf);
     }
 
-    fn render_gauge2(progress: u16, frame: &mut Frame, area: Rect) {
-        let title = Self::title_block("Gauge with percentage progress and custom label");
-        let label = format!("{}/100", progress);
-        let gauge = Gauge::default()
-            .block(title)
-            .gauge_style(Style::new().blue().on_light_blue())
-            .percent(progress)
-            .label(label);
-        frame.render_widget(gauge, area);
-    }
-
-    fn render_gauge3(progress: f64, frame: &mut Frame, area: Rect) {
-        let title =
-            Self::title_block("Gauge with ratio progress, custom label with style, and unicode");
+    fn render_gauge2(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with ratio and custom label");
         let label = Span::styled(
-            format!("{:.2}%", progress * 100.0),
-            Style::new().red().italic().bold(),
+            format!("{:.1}/100", self.progress2),
+            Style::new().italic().bold().fg(CUSTOM_LABEL_COLOR),
         );
-        let gauge = Gauge::default()
+        Gauge::default()
             .block(title)
-            .gauge_style(Style::default().fg(Color::Yellow))
-            .ratio(progress)
+            .gauge_style(GAUGE2_COLOR)
+            .ratio(self.progress2 / 100.0)
             .label(label)
-            .use_unicode(true);
-        frame.render_widget(gauge, area);
+            .render(area, buf);
     }
 
-    fn render_gauge4(progress: u16, frame: &mut Frame, area: Rect) {
-        let title = Self::title_block("Gauge with percentage progress and label");
-        let label = format!("{}/100", progress);
-        let gauge = Gauge::default()
+    fn render_gauge3(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with ratio (no unicode)");
+        let label = format!("{:.1}%", self.progress3);
+        Gauge::default()
             .block(title)
-            .gauge_style(Style::new().green().italic())
-            .percent(progress)
-            .label(label);
-        frame.render_widget(gauge, area);
+            .gauge_style(GAUGE3_COLOR)
+            .ratio(self.progress3 / 100.0)
+            .label(label)
+            .render(area, buf);
     }
 
-    fn title_block(title: &str) -> Block {
-        let title = Title::from(title).alignment(Alignment::Center);
-        Block::default().title(title).borders(Borders::TOP)
+    fn render_gauge4(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with ratio (unicode)");
+        let label = format!("{:.1}%", self.progress3);
+        Gauge::default()
+            .block(title)
+            .gauge_style(GAUGE4_COLOR)
+            .ratio(self.progress4 / 100.0)
+            .label(label)
+            .use_unicode(true)
+            .render(area, buf);
     }
 }
 
-struct Term {
-    terminal: Terminal<CrosstermBackend<Stdout>>,
-}
-
-impl Term {
-    pub fn start() -> io::Result<Term> {
-        stdout().execute(EnterAlternateScreen)?;
-        enable_raw_mode()?;
-        let terminal = Terminal::new(CrosstermBackend::new(stdout()))?;
-        Ok(Self { terminal })
-    }
-
-    pub fn stop() -> io::Result<()> {
-        disable_raw_mode()?;
-        stdout().execute(LeaveAlternateScreen)?;
-        Ok(())
-    }
-
-    fn draw(&mut self, frame: impl FnOnce(&mut Frame)) -> Result<()> {
-        self.terminal.draw(frame)?;
-        Ok(())
-    }
+fn title_block(title: &str) -> Block {
+    let title = Title::from(title).alignment(Alignment::Center);
+    Block::new()
+        .borders(Borders::NONE)
+        .padding(Padding::vertical(1))
+        .title(title)
+        .fg(CUSTOM_LABEL_COLOR)
 }

examples/hello_world.rs

@@ -1,57 +1,48 @@
-use std::{
-    io::{self, Stdout},
-    time::Duration,
-};
+//! # [Ratatui] Hello World example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use anyhow::{Context, Result};
-use crossterm::{
-    event::{self, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+use std::time::Duration;
+
+use color_eyre::{eyre::Context, Result};
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode},
+    widgets::Paragraph,
+    DefaultTerminal, Frame,
 };
-use ratatui::{prelude::*, widgets::*};
 
 /// This is a bare minimum example. There are many approaches to running an application loop, so
 /// this is not meant to be prescriptive. It is only meant to demonstrate the basic setup and
 /// teardown of a terminal application.
 ///
-/// A more robust application would probably want to handle errors and ensure that the terminal is
-/// restored to a sane state before exiting. This example does not do that. It also does not handle
-/// events or update the application state. It just draws a greeting and exits when the user
-/// presses 'q'.
+/// This example does not handle events or update the application state. It just draws a greeting
+/// and exits when the user presses 'q'.
 fn main() -> Result<()> {
-    let mut terminal = setup_terminal().context("setup failed")?;
-    run(&mut terminal).context("app loop failed")?;
-    restore_terminal(&mut terminal).context("restore terminal failed")?;
-    Ok(())
-}
-
-/// Setup the terminal. This is where you would enable raw mode, enter the alternate screen, and
-/// hide the cursor. This example does not handle errors. A more robust application would probably
-/// want to handle errors and ensure that the terminal is restored to a sane state before exiting.
-fn setup_terminal() -> Result<Terminal<CrosstermBackend<Stdout>>> {
-    let mut stdout = io::stdout();
-    enable_raw_mode().context("failed to enable raw mode")?;
-    execute!(stdout, EnterAlternateScreen).context("unable to enter alternate screen")?;
-    Terminal::new(CrosstermBackend::new(stdout)).context("creating terminal failed")
-}
-
-/// Restore the terminal. This is where you disable raw mode, leave the alternate screen, and show
-/// the cursor.
-fn restore_terminal(terminal: &mut Terminal<CrosstermBackend<Stdout>>) -> Result<()> {
-    disable_raw_mode().context("failed to disable raw mode")?;
-    execute!(terminal.backend_mut(), LeaveAlternateScreen)
-        .context("unable to switch to main screen")?;
-    terminal.show_cursor().context("unable to show cursor")
+    color_eyre::install()?; // augment errors / panics with easy to read messages
+    let terminal = ratatui::init();
+    let app_result = run(terminal).context("app loop failed");
+    ratatui::restore();
+    app_result
 }
 
 /// Run the application loop. This is where you would handle events and update the application
 /// state. This example exits when the user presses 'q'. Other styles of application loops are
 /// possible, for example, you could have multiple application states and switch between them based
 /// on events, or you could have a single application state and update it based on events.
-fn run(terminal: &mut Terminal<CrosstermBackend<Stdout>>) -> Result<()> {
+fn run(mut terminal: DefaultTerminal) -> Result<()> {
     loop {
-        terminal.draw(crate::render_app)?;
+        terminal.draw(draw)?;
         if should_quit()? {
             break;
         }
@@ -59,17 +50,18 @@ fn run(terminal: &mut Terminal<CrosstermBackend<Stdout>>) -> Result<()> {
     Ok(())
 }
 
-/// Render the application. This is where you would draw the application UI. This example just
-/// draws a greeting.
-fn render_app(frame: &mut Frame) {
+/// Render the application. This is where you would draw the application UI. This example draws a
+/// greeting.
+fn draw(frame: &mut Frame) {
     let greeting = Paragraph::new("Hello World! (press 'q' to quit)");
-    frame.render_widget(greeting, frame.size());
+    frame.render_widget(greeting, frame.area());
 }
 
 /// Check if the user has pressed 'q'. This is where you would handle events. This example just
 /// checks if the user has pressed 'q' and returns true if they have. It does not handle any other
-/// events. There is a 250ms timeout on the event poll so that the application can exit in a timely
-/// manner, and to ensure that the terminal is rendered at least once every 250ms.
+/// events. There is a 250ms timeout on the event poll to ensure that the terminal is rendered at
+/// least once every 250ms. This allows you to do other work in the application loop, such as
+/// updating the application state, without blocking the event loop for too long.
 fn should_quit() -> Result<bool> {
     if event::poll(Duration::from_millis(250)).context("event poll failed")? {
         if let Event::Key(key) = event::read().context("event read failed")? {

examples/hyperlink.rs

@@ -0,0 +1,101 @@
+//! # [Ratatui] Hyperlink examplew
+//!
+//! Shows how to use [OSC 8] to create hyperlinks in the terminal.
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [OSC 8]: https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use color_eyre::Result;
+use itertools::Itertools;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode},
+    layout::Rect,
+    style::Stylize,
+    text::{Line, Text},
+    widgets::Widget,
+    DefaultTerminal,
+};
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
+}
+
+struct App {
+    hyperlink: Hyperlink<'static>,
+}
+
+impl App {
+    fn new() -> Self {
+        let text = Line::from(vec!["Example ".into(), "hyperlink".blue()]);
+        let hyperlink = Hyperlink::new(text, "https://example.com");
+        Self { hyperlink }
+    }
+
+    fn run(self, mut terminal: DefaultTerminal) -> Result<()> {
+        loop {
+            terminal.draw(|frame| frame.render_widget(&self.hyperlink, frame.area()))?;
+            if let Event::Key(key) = event::read()? {
+                if matches!(key.code, KeyCode::Char('q') | KeyCode::Esc) {
+                    break;
+                }
+            }
+        }
+        Ok(())
+    }
+}
+
+/// A hyperlink widget that renders a hyperlink in the terminal using [OSC 8].
+///
+/// [OSC 8]: https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda
+struct Hyperlink<'content> {
+    text: Text<'content>,
+    url: String,
+}
+
+impl<'content> Hyperlink<'content> {
+    fn new(text: impl Into<Text<'content>>, url: impl Into<String>) -> Self {
+        Self {
+            text: text.into(),
+            url: url.into(),
+        }
+    }
+}
+
+impl Widget for &Hyperlink<'_> {
+    fn render(self, area: Rect, buffer: &mut Buffer) {
+        (&self.text).render(area, buffer);
+
+        // this is a hacky workaround for https://github.com/ratatui/ratatui/issues/902, a bug
+        // in the terminal code that incorrectly calculates the width of ANSI escape sequences. It
+        // works by rendering the hyperlink as a series of 2-character chunks, which is the
+        // calculated width of the hyperlink text.
+        for (i, two_chars) in self
+            .text
+            .to_string()
+            .chars()
+            .chunks(2)
+            .into_iter()
+            .enumerate()
+        {
+            let text = two_chars.collect::<String>();
+            let hyperlink = format!("\x1B]8;;{}\x07{}\x1B]8;;\x07", self.url, text);
+            buffer[(area.x + i as u16 * 2, area.y)].set_symbol(hyperlink.as_str());
+        }
+    }
+}

examples/inline.rs

@@ -1,28 +1,72 @@
+//! # [Ratatui] Inline example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
 use std::{
     collections::{BTreeMap, VecDeque},
-    error::Error,
-    io,
     sync::mpsc,
     thread,
     time::{Duration, Instant},
 };
 
+use color_eyre::Result;
 use rand::distributions::{Distribution, Uniform};
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    backend::Backend,
+    crossterm::event,
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{Color, Modifier, Style},
+    symbols,
+    text::{Line, Span},
+    widgets::{block, Block, Gauge, LineGauge, List, ListItem, Paragraph, Widget},
+    Frame, Terminal, TerminalOptions, Viewport,
+};
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let mut terminal = ratatui::init_with_options(TerminalOptions {
+        viewport: Viewport::Inline(8),
+    });
+
+    let (tx, rx) = mpsc::channel();
+    input_handling(tx.clone());
+    let workers = workers(tx);
+    let mut downloads = downloads();
+
+    for w in &workers {
+        let d = downloads.next(w.id).unwrap();
+        w.tx.send(d).unwrap();
+    }
+
+    let app_result = run(&mut terminal, workers, downloads, rx);
+
+    ratatui::restore();
+
+    app_result
+}
 
 const NUM_DOWNLOADS: usize = 10;
 
 type DownloadId = usize;
 type WorkerId = usize;
-
 enum Event {
-    Input(crossterm::event::KeyEvent),
+    Input(event::KeyEvent),
     Tick,
     Resize,
     DownloadUpdate(WorkerId, DownloadId, f64),
     DownloadDone(WorkerId, DownloadId),
 }
-
 struct Downloads {
     pending: VecDeque<Download>,
     in_progress: BTreeMap<WorkerId, DownloadInProgress>,
@@ -46,52 +90,20 @@ impl Downloads {
         }
     }
 }
-
 struct DownloadInProgress {
     id: DownloadId,
     started_at: Instant,
     progress: f64,
 }
-
 struct Download {
     id: DownloadId,
     size: usize,
 }
-
 struct Worker {
     id: WorkerId,
     tx: mpsc::Sender<Download>,
 }
 
-fn main() -> Result<(), Box<dyn Error>> {
-    crossterm::terminal::enable_raw_mode()?;
-    let stdout = io::stdout();
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::with_options(
-        backend,
-        TerminalOptions {
-            viewport: Viewport::Inline(8),
-        },
-    )?;
-
-    let (tx, rx) = mpsc::channel();
-    input_handling(tx.clone());
-    let workers = workers(tx);
-    let mut downloads = downloads();
-
-    for w in &workers {
-        let d = downloads.next(w.id).unwrap();
-        w.tx.send(d).unwrap();
-    }
-
-    run_app(&mut terminal, workers, downloads, rx)?;
-
-    crossterm::terminal::disable_raw_mode()?;
-    terminal.clear()?;
-
-    Ok(())
-}
-
 fn input_handling(tx: mpsc::Sender<Event>) {
     let tick_rate = Duration::from_millis(200);
     thread::spawn(move || {
@@ -99,10 +111,10 @@ fn input_handling(tx: mpsc::Sender<Event>) {
         loop {
             // poll for tick rate duration, if no events, sent tick event.
             let timeout = tick_rate.saturating_sub(last_tick.elapsed());
-            if crossterm::event::poll(timeout).unwrap() {
-                match crossterm::event::read().unwrap() {
-                    crossterm::event::Event::Key(key) => tx.send(Event::Input(key)).unwrap(),
-                    crossterm::event::Event::Resize(_, _) => tx.send(Event::Resize).unwrap(),
+            if event::poll(timeout).unwrap() {
+                match event::read().unwrap() {
+                    event::Event::Key(key) => tx.send(Event::Input(key)).unwrap(),
+                    event::Event::Resize(_, _) => tx.send(Event::Resize).unwrap(),
                     _ => {}
                 };
             }
@@ -114,6 +126,7 @@ fn input_handling(tx: mpsc::Sender<Event>) {
     });
 }
 
+#[allow(clippy::cast_precision_loss, clippy::needless_pass_by_value)]
 fn workers(tx: mpsc::Sender<Event>) -> Vec<Worker> {
     (0..4)
         .map(|id| {
@@ -153,22 +166,23 @@ fn downloads() -> Downloads {
     }
 }
 
-fn run_app<B: Backend>(
-    terminal: &mut Terminal<B>,
+#[allow(clippy::needless_pass_by_value)]
+fn run(
+    terminal: &mut Terminal<impl Backend>,
     workers: Vec<Worker>,
     mut downloads: Downloads,
     rx: mpsc::Receiver<Event>,
-) -> Result<(), Box<dyn Error>> {
+) -> Result<()> {
     let mut redraw = true;
     loop {
         if redraw {
-            terminal.draw(|f| ui(f, &downloads))?;
+            terminal.draw(|frame| draw(frame, &downloads))?;
         }
         redraw = true;
 
         match rx.recv()? {
             Event::Input(event) => {
-                if event.code == crossterm::event::KeyCode::Char('q') {
+                if event.code == event::KeyCode::Char('q') {
                     break;
                 }
             }
@@ -179,7 +193,7 @@ fn run_app<B: Backend>(
             Event::DownloadUpdate(worker_id, _download_id, progress) => {
                 let download = downloads.in_progress.get_mut(&worker_id).unwrap();
                 download.progress = progress;
-                redraw = false
+                redraw = false;
             }
             Event::DownloadDone(worker_id, download_id) => {
                 let download = downloads.in_progress.remove(&worker_id).unwrap();
@@ -214,29 +228,25 @@ fn run_app<B: Backend>(
     Ok(())
 }
 
-fn ui(f: &mut Frame, downloads: &Downloads) {
-    let size = f.size();
+fn draw(frame: &mut Frame, downloads: &Downloads) {
+    let area = frame.area();
 
-    let block = Block::default().title(block::Title::from("Progress").alignment(Alignment::Center));
-    f.render_widget(block, size);
+    let block = Block::new().title(block::Title::from("Progress").alignment(Alignment::Center));
+    frame.render_widget(block, area);
 
-    let chunks = Layout::default()
-        .constraints([Constraint::Length(2), Constraint::Length(4)])
-        .margin(1)
-        .split(size);
+    let vertical = Layout::vertical([Constraint::Length(2), Constraint::Length(4)]).margin(1);
+    let horizontal = Layout::horizontal([Constraint::Percentage(20), Constraint::Percentage(80)]);
+    let [progress_area, main] = vertical.areas(area);
+    let [list_area, gauge_area] = horizontal.areas(main);
 
     // total progress
     let done = NUM_DOWNLOADS - downloads.pending.len() - downloads.in_progress.len();
+    #[allow(clippy::cast_precision_loss)]
     let progress = LineGauge::default()
-        .gauge_style(Style::default().fg(Color::Blue))
+        .filled_style(Style::default().fg(Color::Blue))
         .label(format!("{done}/{NUM_DOWNLOADS}"))
         .ratio(done as f64 / NUM_DOWNLOADS as f64);
-    f.render_widget(progress, chunks[0]);
-
-    let chunks = Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([Constraint::Percentage(20), Constraint::Percentage(80)])
-        .split(chunks[1]);
+    frame.render_widget(progress, progress_area);
 
     // in progress downloads
     let items: Vec<ListItem> = downloads
@@ -259,21 +269,22 @@ fn ui(f: &mut Frame, downloads: &Downloads) {
         })
         .collect();
     let list = List::new(items);
-    f.render_widget(list, chunks[0]);
+    frame.render_widget(list, list_area);
 
+    #[allow(clippy::cast_possible_truncation)]
     for (i, (_, download)) in downloads.in_progress.iter().enumerate() {
         let gauge = Gauge::default()
             .gauge_style(Style::default().fg(Color::Yellow))
             .ratio(download.progress / 100.0);
-        if chunks[1].top().saturating_add(i as u16) > size.bottom() {
+        if gauge_area.top().saturating_add(i as u16) > area.bottom() {
             continue;
         }
-        f.render_widget(
+        frame.render_widget(
             gauge,
             Rect {
-                x: chunks[1].left(),
-                y: chunks[1].top().saturating_add(i as u16),
-                width: chunks[1].width,
+                x: gauge_area.left(),
+                y: gauge_area.top().saturating_add(i as u16),
+                width: gauge_area.width,
                 height: 1,
             },
         );

examples/layout.rs

@@ -1,103 +1,95 @@
-use std::{error::Error, io};
+//! # [Ratatui] Layout example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
 use itertools::Itertools;
-use ratatui::{layout::Constraint::*, prelude::*, widgets::*};
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{
+        Constraint::{self, Length, Max, Min, Percentage, Ratio},
+        Layout, Rect,
+    },
+    style::{Color, Style, Stylize},
+    text::Line,
+    widgets::{Block, Paragraph},
+    DefaultTerminal, Frame,
+};
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let res = run_app(&mut terminal);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
-    }
-
-    Ok(())
+fn main() -> color_eyre::Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = run(terminal);
+    ratatui::restore();
+    app_result
 }
 
-fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
+fn run(mut terminal: DefaultTerminal) -> color_eyre::Result<()> {
     loop {
-        terminal.draw(ui)?;
-
+        terminal.draw(draw)?;
         if let Event::Key(key) = event::read()? {
-            if let KeyCode::Char('q') = key.code {
-                return Ok(());
+            if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                break Ok(());
             }
         }
     }
 }
 
-fn ui(frame: &mut Frame) {
-    let main_layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Length(4),  // text
-            Length(50), // examples
-            Min(0),     // fills remaining space
-        ])
-        .split(frame.size());
+#[allow(clippy::too_many_lines)]
+fn draw(frame: &mut Frame) {
+    let vertical = Layout::vertical([
+        Length(4),  // text
+        Length(50), // examples
+        Min(0),     // fills remaining space
+    ]);
+    let [text_area, examples_area, _] = vertical.areas(frame.area());
 
     // title
     frame.render_widget(
         Paragraph::new(vec![
-            Line::from("Horizontal Layout Example. Press q to quit".dark_gray())
-                .alignment(Alignment::Center),
+            Line::from("Horizontal Layout Example. Press q to quit".dark_gray()).centered(),
             Line::from("Each line has 2 constraints, plus Min(0) to fill the remaining space."),
             Line::from("E.g. the second line of the Len/Min box is [Length(2), Min(2), Min(0)]"),
             Line::from("Note: constraint labels that don't fit are truncated"),
         ]),
-        main_layout[0],
+        text_area,
     );
 
-    let example_rows = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Length(9),
-            Length(9),
-            Length(9),
-            Length(9),
-            Length(9),
-            Min(0), // fills remaining space
-        ])
-        .split(main_layout[1]);
+    let example_rows = Layout::vertical([
+        Length(9),
+        Length(9),
+        Length(9),
+        Length(9),
+        Length(9),
+        Min(0), // fills remaining space
+    ])
+    .split(examples_area);
     let example_areas = example_rows
         .iter()
         .flat_map(|area| {
-            Layout::default()
-                .direction(Direction::Horizontal)
-                .constraints([
-                    Length(14),
-                    Length(14),
-                    Length(14),
-                    Length(14),
-                    Length(14),
-                    Min(0), // fills remaining space
-                ])
-                .split(*area)
-                .iter()
-                .copied()
-                .take(5) // ignore Min(0)
-                .collect_vec()
+            Layout::horizontal([
+                Length(14),
+                Length(14),
+                Length(14),
+                Length(14),
+                Length(14),
+                Min(0), // fills remaining space
+            ])
+            .split(*area)
+            .iter()
+            .copied()
+            .take(5) // ignore Min(0)
+            .collect_vec()
         })
         .collect_vec();
 
@@ -175,19 +167,15 @@ fn render_example_combination(
     title: &str,
     constraints: Vec<(Constraint, Constraint)>,
 ) {
-    let block = Block::default()
+    let block = Block::bordered()
         .title(title.gray())
         .style(Style::reset())
-        .borders(Borders::ALL)
         .border_style(Style::default().fg(Color::DarkGray));
     let inner = block.inner(area);
     frame.render_widget(block, area);
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints(vec![Length(1); constraints.len() + 1])
-        .split(inner);
-    for (i, (a, b)) in constraints.iter().enumerate() {
-        render_single_example(frame, layout[i], vec![*a, *b, Min(0)]);
+    let layout = Layout::vertical(vec![Length(1); constraints.len() + 1]).split(inner);
+    for (i, (a, b)) in constraints.into_iter().enumerate() {
+        render_single_example(frame, layout[i], vec![a, b, Min(0)]);
     }
     // This is to make it easy to visually see the alignment of the examples
     // with the constraints.
@@ -199,21 +187,20 @@ fn render_single_example(frame: &mut Frame, area: Rect, constraints: Vec<Constra
     let red = Paragraph::new(constraint_label(constraints[0])).on_red();
     let blue = Paragraph::new(constraint_label(constraints[1])).on_blue();
     let green = Paragraph::new("·".repeat(12)).on_green();
-    let layout = Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints(constraints)
-        .split(area);
-    frame.render_widget(red, layout[0]);
-    frame.render_widget(blue, layout[1]);
-    frame.render_widget(green, layout[2]);
+    let horizontal = Layout::horizontal(constraints);
+    let [r, b, g] = horizontal.areas(area);
+    frame.render_widget(red, r);
+    frame.render_widget(blue, b);
+    frame.render_widget(green, g);
 }
 
 fn constraint_label(constraint: Constraint) -> String {
     match constraint {
-        Length(n) => format!("{n}"),
-        Min(n) => format!("{n}"),
-        Max(n) => format!("{n}"),
-        Percentage(n) => format!("{n}"),
-        Ratio(a, b) => format!("{a}:{b}"),
+        Constraint::Ratio(a, b) => format!("{a}:{b}"),
+        Constraint::Length(n)
+        | Constraint::Min(n)
+        | Constraint::Max(n)
+        | Constraint::Percentage(n)
+        | Constraint::Fill(n) => format!("{n}"),
     }
 }

examples/line_gauge.rs

@@ -0,0 +1,179 @@
+//! # [Ratatui] Line Gauge example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use std::time::Duration;
+
+use color_eyre::Result;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Alignment, Constraint, Layout, Rect},
+    style::{palette::tailwind, Color, Style, Stylize},
+    widgets::{block::Title, Block, Borders, LineGauge, Padding, Paragraph, Widget},
+    DefaultTerminal,
+};
+
+const CUSTOM_LABEL_COLOR: Color = tailwind::SLATE.c200;
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
+}
+
+#[derive(Debug, Default, Clone, Copy)]
+struct App {
+    state: AppState,
+    progress_columns: u16,
+    progress: f64,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Started,
+    Quitting,
+}
+
+impl App {
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        while self.state != AppState::Quitting {
+            terminal.draw(|frame| frame.render_widget(&self, frame.area()))?;
+            self.handle_events()?;
+            self.update(terminal.size()?.width);
+        }
+        Ok(())
+    }
+
+    fn update(&mut self, terminal_width: u16) {
+        if self.state != AppState::Started {
+            return;
+        }
+
+        self.progress_columns = (self.progress_columns + 1).clamp(0, terminal_width);
+        self.progress = f64::from(self.progress_columns) / f64::from(terminal_width);
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        let timeout = Duration::from_secs_f32(1.0 / 20.0);
+        if event::poll(timeout)? {
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press {
+                    match key.code {
+                        KeyCode::Char(' ') | KeyCode::Enter => self.start(),
+                        KeyCode::Char('q') | KeyCode::Esc => self.quit(),
+                        _ => {}
+                    }
+                }
+            }
+        }
+        Ok(())
+    }
+
+    fn start(&mut self) {
+        self.state = AppState::Started;
+    }
+
+    fn quit(&mut self) {
+        self.state = AppState::Quitting;
+    }
+}
+
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::{Length, Min, Ratio};
+        let layout = Layout::vertical([Length(2), Min(0), Length(1)]);
+        let [header_area, main_area, footer_area] = layout.areas(area);
+
+        let layout = Layout::vertical([Ratio(1, 3); 3]);
+        let [gauge1_area, gauge2_area, gauge3_area] = layout.areas(main_area);
+
+        header().render(header_area, buf);
+        footer().render(footer_area, buf);
+
+        self.render_gauge1(gauge1_area, buf);
+        self.render_gauge2(gauge2_area, buf);
+        self.render_gauge3(gauge3_area, buf);
+    }
+}
+
+fn header() -> impl Widget {
+    Paragraph::new("Ratatui Line Gauge Example")
+        .bold()
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+}
+
+fn footer() -> impl Widget {
+    Paragraph::new("Press ENTER / SPACE to start")
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+        .bold()
+}
+
+impl App {
+    fn render_gauge1(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Blue / red only foreground");
+        LineGauge::default()
+            .block(title)
+            .filled_style(Style::default().fg(Color::Blue))
+            .unfilled_style(Style::default().fg(Color::Red))
+            .label("Foreground:")
+            .ratio(self.progress)
+            .render(area, buf);
+    }
+
+    fn render_gauge2(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Blue / red only background");
+        LineGauge::default()
+            .block(title)
+            .filled_style(Style::default().fg(Color::Blue).bg(Color::Blue))
+            .unfilled_style(Style::default().fg(Color::Red).bg(Color::Red))
+            .label("Background:")
+            .ratio(self.progress)
+            .render(area, buf);
+    }
+
+    fn render_gauge3(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Fully styled with background");
+        LineGauge::default()
+            .block(title)
+            .filled_style(
+                Style::default()
+                    .fg(tailwind::BLUE.c400)
+                    .bg(tailwind::BLUE.c600),
+            )
+            .unfilled_style(
+                Style::default()
+                    .fg(tailwind::RED.c400)
+                    .bg(tailwind::RED.c800),
+            )
+            .label("Both:")
+            .ratio(self.progress)
+            .render(area, buf);
+    }
+}
+
+fn title_block(title: &str) -> Block {
+    let title = Title::from(title).alignment(Alignment::Center);
+    Block::default()
+        .title(title)
+        .borders(Borders::NONE)
+        .fg(CUSTOM_LABEL_COLOR)
+        .padding(Padding::vertical(1))
+}

examples/list.rs

@@ -1,278 +1,287 @@
-use std::{
-    error::Error,
-    io,
-    time::{Duration, Instant},
+//! # [Ratatui] List example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use color_eyre::Result;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode, KeyEvent, KeyEventKind},
+    layout::{Constraint, Layout, Rect},
+    style::{
+        palette::tailwind::{BLUE, GREEN, SLATE},
+        Color, Modifier, Style, Stylize,
+    },
+    symbols,
+    text::Line,
+    widgets::{
+        Block, Borders, HighlightSpacing, List, ListItem, ListState, Padding, Paragraph,
+        StatefulWidget, Widget, Wrap,
+    },
+    DefaultTerminal,
 };
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
-use ratatui::{prelude::*, widgets::*};
+const TODO_HEADER_STYLE: Style = Style::new().fg(SLATE.c100).bg(BLUE.c800);
+const NORMAL_ROW_BG: Color = SLATE.c950;
+const ALT_ROW_BG_COLOR: Color = SLATE.c900;
+const SELECTED_STYLE: Style = Style::new().bg(SLATE.c800).add_modifier(Modifier::BOLD);
+const TEXT_FG_COLOR: Color = SLATE.c200;
+const COMPLETED_TEXT_FG_COLOR: Color = GREEN.c500;
 
-struct StatefulList<T> {
-    state: ListState,
-    items: Vec<T>,
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
 }
 
-impl<T> StatefulList<T> {
-    fn with_items(items: Vec<T>) -> StatefulList<T> {
-        StatefulList {
-            state: ListState::default(),
-            items,
-        }
-    }
-
-    fn next(&mut self) {
-        let i = match self.state.selected() {
-            Some(i) => {
-                if i >= self.items.len() - 1 {
-                    0
-                } else {
-                    i + 1
-                }
-            }
-            None => 0,
-        };
-        self.state.select(Some(i));
-    }
-
-    fn previous(&mut self) {
-        let i = match self.state.selected() {
-            Some(i) => {
-                if i == 0 {
-                    self.items.len() - 1
-                } else {
-                    i - 1
-                }
-            }
-            None => 0,
-        };
-        self.state.select(Some(i));
-    }
-
-    fn unselect(&mut self) {
-        self.state.select(None);
-    }
-}
-
-/// This struct holds the current state of the app. In particular, it has the `items` field which is
-/// a wrapper around `ListState`. Keeping track of the items state let us render the associated
-/// widget with its state and have access to features such as natural scrolling.
+/// This struct holds the current state of the app. In particular, it has the `todo_list` field
+/// which is a wrapper around `ListState`. Keeping track of the state lets us render the
+/// associated widget with its state and have access to features such as natural scrolling.
 ///
-/// Check the event handling at the bottom to see how to change the state on incoming events.
-/// Check the drawing logic for items on how to specify the highlighting style for selected items.
-struct App<'a> {
-    items: StatefulList<(&'a str, usize)>,
-    events: Vec<(&'a str, &'a str)>,
+/// Check the event handling at the bottom to see how to change the state on incoming events. Check
+/// the drawing logic for items on how to specify the highlighting style for selected items.
+struct App {
+    should_exit: bool,
+    todo_list: TodoList,
 }
 
-impl<'a> App<'a> {
-    fn new() -> App<'a> {
-        App {
-            items: StatefulList::with_items(vec![
-                ("Item0", 1),
-                ("Item1", 2),
-                ("Item2", 1),
-                ("Item3", 3),
-                ("Item4", 1),
-                ("Item5", 4),
-                ("Item6", 1),
-                ("Item7", 3),
-                ("Item8", 1),
-                ("Item9", 6),
-                ("Item10", 1),
-                ("Item11", 3),
-                ("Item12", 1),
-                ("Item13", 2),
-                ("Item14", 1),
-                ("Item15", 1),
-                ("Item16", 4),
-                ("Item17", 1),
-                ("Item18", 5),
-                ("Item19", 4),
-                ("Item20", 1),
-                ("Item21", 2),
-                ("Item22", 1),
-                ("Item23", 3),
-                ("Item24", 1),
+struct TodoList {
+    items: Vec<TodoItem>,
+    state: ListState,
+}
+
+#[derive(Debug)]
+struct TodoItem {
+    todo: String,
+    info: String,
+    status: Status,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
+enum Status {
+    Todo,
+    Completed,
+}
+
+impl Default for App {
+    fn default() -> Self {
+        Self {
+            should_exit: false,
+            todo_list: TodoList::from_iter([
+                (Status::Todo, "Rewrite everything with Rust!", "I can't hold my inner voice. He tells me to rewrite the complete universe with Rust"),
+                (Status::Completed, "Rewrite all of your tui apps with Ratatui", "Yes, you heard that right. Go and replace your tui with Ratatui."),
+                (Status::Todo, "Pet your cat", "Minnak loves to be pet by you! Don't forget to pet and give some treats!"),
+                (Status::Todo, "Walk with your dog", "Max is bored, go walk with him!"),
+                (Status::Completed, "Pay the bills", "Pay the train subscription!!!"),
+                (Status::Completed, "Refactor list example", "If you see this info that means I completed this task!"),
             ]),
-            events: vec![
-                ("Event1", "INFO"),
-                ("Event2", "INFO"),
-                ("Event3", "CRITICAL"),
-                ("Event4", "ERROR"),
-                ("Event5", "INFO"),
-                ("Event6", "INFO"),
-                ("Event7", "WARNING"),
-                ("Event8", "INFO"),
-                ("Event9", "INFO"),
-                ("Event10", "INFO"),
-                ("Event11", "CRITICAL"),
-                ("Event12", "INFO"),
-                ("Event13", "INFO"),
-                ("Event14", "INFO"),
-                ("Event15", "INFO"),
-                ("Event16", "INFO"),
-                ("Event17", "ERROR"),
-                ("Event18", "ERROR"),
-                ("Event19", "INFO"),
-                ("Event20", "INFO"),
-                ("Event21", "WARNING"),
-                ("Event22", "INFO"),
-                ("Event23", "INFO"),
-                ("Event24", "WARNING"),
-                ("Event25", "INFO"),
-                ("Event26", "INFO"),
-            ],
         }
     }
+}
 
-    /// Rotate through the event list.
-    /// This only exists to simulate some kind of "progress"
-    fn on_tick(&mut self) {
-        let event = self.events.remove(0);
-        self.events.push(event);
+impl FromIterator<(Status, &'static str, &'static str)> for TodoList {
+    fn from_iter<I: IntoIterator<Item = (Status, &'static str, &'static str)>>(iter: I) -> Self {
+        let items = iter
+            .into_iter()
+            .map(|(status, todo, info)| TodoItem::new(status, todo, info))
+            .collect();
+        let state = ListState::default();
+        Self { items, state }
     }
 }
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let tick_rate = Duration::from_millis(250);
-    let app = App::new();
-    let res = run_app(&mut terminal, app, tick_rate);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
+impl TodoItem {
+    fn new(status: Status, todo: &str, info: &str) -> Self {
+        Self {
+            status,
+            todo: todo.to_string(),
+            info: info.to_string(),
+        }
     }
-
-    Ok(())
 }
 
-fn run_app<B: Backend>(
-    terminal: &mut Terminal<B>,
-    mut app: App,
-    tick_rate: Duration,
-) -> io::Result<()> {
-    let mut last_tick = Instant::now();
-    loop {
-        terminal.draw(|f| ui(f, &mut app))?;
-
-        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
-        if crossterm::event::poll(timeout)? {
+impl App {
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        while !self.should_exit {
+            terminal.draw(|frame| frame.render_widget(&mut self, frame.area()))?;
             if let Event::Key(key) = event::read()? {
-                if key.kind == KeyEventKind::Press {
-                    match key.code {
-                        KeyCode::Char('q') => return Ok(()),
-                        KeyCode::Left | KeyCode::Char('h') => app.items.unselect(),
-                        KeyCode::Down | KeyCode::Char('j') => app.items.next(),
-                        KeyCode::Up | KeyCode::Char('k') => app.items.previous(),
-                        _ => {}
-                    }
-                }
-            }
+                self.handle_key(key);
+            };
         }
-        if last_tick.elapsed() >= tick_rate {
-            app.on_tick();
-            last_tick = Instant::now();
+        Ok(())
+    }
+
+    fn handle_key(&mut self, key: KeyEvent) {
+        if key.kind != KeyEventKind::Press {
+            return;
+        }
+        match key.code {
+            KeyCode::Char('q') | KeyCode::Esc => self.should_exit = true,
+            KeyCode::Char('h') | KeyCode::Left => self.select_none(),
+            KeyCode::Char('j') | KeyCode::Down => self.select_next(),
+            KeyCode::Char('k') | KeyCode::Up => self.select_previous(),
+            KeyCode::Char('g') | KeyCode::Home => self.select_first(),
+            KeyCode::Char('G') | KeyCode::End => self.select_last(),
+            KeyCode::Char('l') | KeyCode::Right | KeyCode::Enter => {
+                self.toggle_status();
+            }
+            _ => {}
+        }
+    }
+
+    fn select_none(&mut self) {
+        self.todo_list.state.select(None);
+    }
+
+    fn select_next(&mut self) {
+        self.todo_list.state.select_next();
+    }
+    fn select_previous(&mut self) {
+        self.todo_list.state.select_previous();
+    }
+
+    fn select_first(&mut self) {
+        self.todo_list.state.select_first();
+    }
+
+    fn select_last(&mut self) {
+        self.todo_list.state.select_last();
+    }
+
+    /// Changes the status of the selected list item
+    fn toggle_status(&mut self) {
+        if let Some(i) = self.todo_list.state.selected() {
+            self.todo_list.items[i].status = match self.todo_list.items[i].status {
+                Status::Completed => Status::Todo,
+                Status::Todo => Status::Completed,
+            }
         }
     }
 }
 
-fn ui(f: &mut Frame, app: &mut App) {
-    // Create two chunks with equal horizontal screen space
-    let chunks = Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
-        .split(f.size());
+impl Widget for &mut App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let [header_area, main_area, footer_area] = Layout::vertical([
+            Constraint::Length(2),
+            Constraint::Fill(1),
+            Constraint::Length(1),
+        ])
+        .areas(area);
 
-    // Iterate through all elements in the `items` app and append some debug text to it.
-    let items: Vec<ListItem> = app
-        .items
-        .items
-        .iter()
-        .map(|i| {
-            let mut lines = vec![Line::from(i.0)];
-            for _ in 0..i.1 {
-                lines.push(
-                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                        .italic()
-                        .into(),
-                );
-            }
-            ListItem::new(lines).style(Style::default().fg(Color::Black).bg(Color::White))
-        })
-        .collect();
+        let [list_area, item_area] =
+            Layout::vertical([Constraint::Fill(1), Constraint::Fill(1)]).areas(main_area);
 
-    // Create a List from all list items and highlight the currently selected one
-    let items = List::new(items)
-        .block(Block::default().borders(Borders::ALL).title("List"))
-        .highlight_style(
-            Style::default()
-                .bg(Color::LightGreen)
-                .add_modifier(Modifier::BOLD),
-        )
-        .highlight_symbol(">> ");
-
-    // We can now render the item list
-    f.render_stateful_widget(items, chunks[0], &mut app.items.state);
-
-    // Let's do the same for the events.
-    // The event list doesn't have any state and only displays the current state of the list.
-    let events: Vec<ListItem> = app
-        .events
-        .iter()
-        .rev()
-        .map(|&(event, level)| {
-            // Colorcode the level depending on its type
-            let s = match level {
-                "CRITICAL" => Style::default().fg(Color::Red),
-                "ERROR" => Style::default().fg(Color::Magenta),
-                "WARNING" => Style::default().fg(Color::Yellow),
-                "INFO" => Style::default().fg(Color::Blue),
-                _ => Style::default(),
-            };
-            // Add a example datetime and apply proper spacing between them
-            let header = Line::from(vec![
-                Span::styled(format!("{level:<9}"), s),
-                " ".into(),
-                "2020-01-01 10:00:00".italic(),
-            ]);
-            // The event gets its own line
-            let log = Line::from(vec![event.into()]);
-
-            // Here several things happen:
-            // 1. Add a `---` spacing line above the final list entry
-            // 2. Add the Level + datetime
-            // 3. Add a spacer line
-            // 4. Add the actual event
-            ListItem::new(vec![
-                Line::from("-".repeat(chunks[1].width as usize)),
-                header,
-                Line::from(""),
-                log,
-            ])
-        })
-        .collect();
-    let events_list = List::new(events)
-        .block(Block::default().borders(Borders::ALL).title("List"))
-        .direction(ListDirection::BottomToTop);
-    f.render_widget(events_list, chunks[1]);
+        App::render_header(header_area, buf);
+        App::render_footer(footer_area, buf);
+        self.render_list(list_area, buf);
+        self.render_selected_item(item_area, buf);
+    }
+}
+
+/// Rendering logic for the app
+impl App {
+    fn render_header(area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Ratatui List Example")
+            .bold()
+            .centered()
+            .render(area, buf);
+    }
+
+    fn render_footer(area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Use ↓↑ to move, ← to unselect, → to change status, g/G to go top/bottom.")
+            .centered()
+            .render(area, buf);
+    }
+
+    fn render_list(&mut self, area: Rect, buf: &mut Buffer) {
+        let block = Block::new()
+            .title(Line::raw("TODO List").centered())
+            .borders(Borders::TOP)
+            .border_set(symbols::border::EMPTY)
+            .border_style(TODO_HEADER_STYLE)
+            .bg(NORMAL_ROW_BG);
+
+        // Iterate through all elements in the `items` and stylize them.
+        let items: Vec<ListItem> = self
+            .todo_list
+            .items
+            .iter()
+            .enumerate()
+            .map(|(i, todo_item)| {
+                let color = alternate_colors(i);
+                ListItem::from(todo_item).bg(color)
+            })
+            .collect();
+
+        // Create a List from all list items and highlight the currently selected one
+        let list = List::new(items)
+            .block(block)
+            .highlight_style(SELECTED_STYLE)
+            .highlight_symbol(">")
+            .highlight_spacing(HighlightSpacing::Always);
+
+        // We need to disambiguate this trait method as both `Widget` and `StatefulWidget` share the
+        // same method name `render`.
+        StatefulWidget::render(list, area, buf, &mut self.todo_list.state);
+    }
+
+    fn render_selected_item(&self, area: Rect, buf: &mut Buffer) {
+        // We get the info depending on the item's state.
+        let info = if let Some(i) = self.todo_list.state.selected() {
+            match self.todo_list.items[i].status {
+                Status::Completed => format!("✓ DONE: {}", self.todo_list.items[i].info),
+                Status::Todo => format!("☐ TODO: {}", self.todo_list.items[i].info),
+            }
+        } else {
+            "Nothing selected...".to_string()
+        };
+
+        // We show the list item's info under the list in this paragraph
+        let block = Block::new()
+            .title(Line::raw("TODO Info").centered())
+            .borders(Borders::TOP)
+            .border_set(symbols::border::EMPTY)
+            .border_style(TODO_HEADER_STYLE)
+            .bg(NORMAL_ROW_BG)
+            .padding(Padding::horizontal(1));
+
+        // We can now render the item info
+        Paragraph::new(info)
+            .block(block)
+            .fg(TEXT_FG_COLOR)
+            .wrap(Wrap { trim: false })
+            .render(area, buf);
+    }
+}
+
+const fn alternate_colors(i: usize) -> Color {
+    if i % 2 == 0 {
+        NORMAL_ROW_BG
+    } else {
+        ALT_ROW_BG_COLOR
+    }
+}
+
+impl From<&TodoItem> for ListItem<'_> {
+    fn from(value: &TodoItem) -> Self {
+        let line = match value.status {
+            Status::Todo => Line::styled(format!(" ☐ {}", value.todo), TEXT_FG_COLOR),
+            Status::Completed => {
+                Line::styled(format!(" ✓ {}", value.todo), COMPLETED_TEXT_FG_COLOR)
+            }
+        };
+        ListItem::new(line)
+    }
 }

examples/minimal.rs

@@ -0,0 +1,40 @@
+//! # [Ratatui] Minimal example
+//!
+//! This is a bare minimum example. There are many approaches to running an application loop, so
+//! this is not meant to be prescriptive. See the [examples] folder for more complete examples.
+//! In particular, the [hello-world] example is a good starting point.
+//!
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [hello-world]: https://github.com/ratatui-org/ratatui/blob/main/examples/hello_world.rs
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+use ratatui::{
+    crossterm::event::{self, Event},
+    text::Text,
+    Frame,
+};
+
+fn main() {
+    let mut terminal = ratatui::init();
+    loop {
+        terminal
+            .draw(|frame: &mut Frame| frame.render_widget(Text::raw("Hello World!"), frame.area()))
+            .expect("Failed to draw");
+        if matches!(event::read().expect("failed to read event"), Event::Key(_)) {
+            break;
+        }
+    }
+    ratatui::restore();
+}

examples/modifiers.rs

@@ -1,67 +1,68 @@
-/// This example is useful for testing how your terminal emulator handles different modifiers.
-/// It will render a grid of combinations of foreground and background colors with all
-/// modifiers applied to them.
-use std::{
-    error::Error,
-    io::{self, Stdout},
-    iter::once,
-    result,
-    time::Duration,
-};
+//! # [Ratatui] Modifiers example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+// This example is useful for testing how your terminal emulator handles different modifiers.
+// It will render a grid of combinations of foreground and background colors with all
+// modifiers applied to them.
+
+use std::{error::Error, iter::once, result};
 
-use crossterm::{
-    event::{self, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
 use itertools::Itertools;
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Layout},
+    style::{Color, Modifier, Style, Stylize},
+    text::Line,
+    widgets::Paragraph,
+    DefaultTerminal, Frame,
+};
 
 type Result<T> = result::Result<T, Box<dyn Error>>;
 
 fn main() -> Result<()> {
-    let mut terminal = setup_terminal()?;
-    let res = run_app(&mut terminal);
-    restore_terminal(terminal)?;
-    if let Err(err) = res {
-        eprintln!("{err:?}");
-    }
-    Ok(())
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = run(terminal);
+    ratatui::restore();
+    app_result
 }
 
-fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
+fn run(mut terminal: DefaultTerminal) -> Result<()> {
     loop {
-        terminal.draw(ui)?;
-
-        if event::poll(Duration::from_millis(250))? {
-            if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
-                    return Ok(());
-                }
+        terminal.draw(draw)?;
+        if let Event::Key(key) = event::read()? {
+            if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                return Ok(());
             }
         }
     }
 }
 
-fn ui(frame: &mut Frame) {
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Length(1), Constraint::Min(0)])
-        .split(frame.size());
+fn draw(frame: &mut Frame) {
+    let vertical = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
+    let [text_area, main_area] = vertical.areas(frame.area());
     frame.render_widget(
         Paragraph::new("Note: not all terminals support all modifiers")
             .style(Style::default().fg(Color::Red).add_modifier(Modifier::BOLD)),
-        layout[0],
+        text_area,
     );
-    let layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Length(1); 50])
-        .split(layout[1])
+    let layout = Layout::vertical([Constraint::Length(1); 50])
+        .split(main_area)
         .iter()
         .flat_map(|area| {
-            Layout::default()
-                .direction(Direction::Horizontal)
-                .constraints([Constraint::Percentage(20); 5])
+            Layout::horizontal([Constraint::Percentage(20); 5])
                 .split(*area)
                 .to_vec()
         })
@@ -78,8 +79,8 @@ fn ui(frame: &mut Frame) {
         .chain(Modifier::all().iter())
         .collect_vec();
     let mut index = 0;
-    for bg in colors.iter() {
-        for fg in colors.iter() {
+    for bg in &colors {
+        for fg in &colors {
             for modifier in &all_modifiers {
                 let modifier_name = format!("{modifier:11?}");
                 let padding = (" ").repeat(12 - modifier_name.len());
@@ -97,20 +98,3 @@ fn ui(frame: &mut Frame) {
         }
     }
 }
-
-fn setup_terminal() -> Result<Terminal<CrosstermBackend<Stdout>>> {
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-    terminal.hide_cursor()?;
-    Ok(terminal)
-}
-
-fn restore_terminal(mut terminal: Terminal<CrosstermBackend<Stdout>>) -> Result<()> {
-    disable_raw_mode()?;
-    execute!(terminal.backend_mut(), LeaveAlternateScreen)?;
-    terminal.show_cursor()?;
-    Ok(())
-}

examples/panic.rs

@@ -1,134 +1,110 @@
-//! How to use a panic hook to reset the terminal before printing the panic to
-//! the terminal.
+//! # [Ratatui] Panic Hook example
 //!
-//! When exiting normally or when handling `Result::Err`, we can reset the
-//! terminal manually at the end of `main` just before we print the error.
+//! The latest version of this example is available in the [examples] folder in the repository.
 //!
-//! Because a panic interrupts the normal control flow, manually resetting the
-//! terminal at the end of `main` won't do us any good. Instead, we need to
-//! make sure to set up a panic hook that first resets the terminal before
-//! handling the panic. This both reuses the standard panic hook to ensure a
-//! consistent panic handling UX and properly resets the terminal to not
-//! distort the output.
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
 //!
-//! That's why this example is set up to show both situations, with and without
-//! the chained panic hook, to see the difference.
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+//!
+//! Prior to Ratatui 0.28.1, a panic hook had to be manually set up to ensure that the terminal was
+//! reset when a panic occurred. This was necessary because a panic would interrupt the normal
+//! control flow and leave the terminal in a distorted state.
+//!
+//! Starting with Ratatui 0.28.1, the panic hook is automatically set up by the new `ratatui::init`
+//! function, so you no longer need to manually set up the panic hook. This example now demonstrates
+//! how the panic hook acts when it is enabled by default.
+//!
+//! When exiting normally or when handling `Result::Err`, we can reset the terminal manually at the
+//! end of `main` just before we print the error.
+//!
+//! Because a panic interrupts the normal control flow, manually resetting the terminal at the end
+//! of `main` won't do us any good. Instead, we need to make sure to set up a panic hook that first
+//! resets the terminal before handling the panic. This both reuses the standard panic hook to
+//! ensure a consistent panic handling UX and properly resets the terminal to not distort the
+//! output.
+//!
+//! That's why this example is set up to show both situations, with and without the panic hook, to
+//! see the difference.
+//!
+//! For more information on how to set this up manually, see the [Color Eyre recipe] in the Ratatui
+//! website.
+//!
+//! [Color Eyre recipe]: https://ratatui.rs/recipes/apps/color-eyre
 
-use std::{error::Error, io};
-
-use crossterm::{
-    event::{self, Event, KeyCode},
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+use color_eyre::{eyre::bail, Result};
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode},
+    text::Line,
+    widgets::{Block, Paragraph},
+    DefaultTerminal, Frame,
 };
-use ratatui::{prelude::*, widgets::*};
 
-type Result<T> = std::result::Result<T, Box<dyn Error>>;
-
-#[derive(Default)]
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
+}
 struct App {
     hook_enabled: bool,
 }
 
 impl App {
-    fn chain_hook(&mut self) {
-        let original_hook = std::panic::take_hook();
-
-        std::panic::set_hook(Box::new(move |panic| {
-            reset_terminal().unwrap();
-            original_hook(panic);
-        }));
-
-        self.hook_enabled = true;
-    }
-}
-
-fn main() -> Result<()> {
-    let mut terminal = init_terminal()?;
-
-    let mut app = App::default();
-    let res = run_tui(&mut terminal, &mut app);
-
-    reset_terminal()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
+    const fn new() -> Self {
+        Self { hook_enabled: true }
     }
 
-    Ok(())
-}
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        loop {
+            terminal.draw(|frame| self.draw(frame))?;
 
-/// Initializes the terminal.
-fn init_terminal() -> Result<Terminal<CrosstermBackend<io::Stdout>>> {
-    crossterm::execute!(io::stdout(), EnterAlternateScreen)?;
-    enable_raw_mode()?;
-
-    let backend = CrosstermBackend::new(io::stdout());
-
-    let mut terminal = Terminal::new(backend)?;
-    terminal.hide_cursor()?;
-
-    Ok(terminal)
-}
-
-/// Resets the terminal.
-fn reset_terminal() -> Result<()> {
-    disable_raw_mode()?;
-    crossterm::execute!(io::stdout(), LeaveAlternateScreen)?;
-
-    Ok(())
-}
-
-/// Runs the TUI loop.
-fn run_tui<B: Backend>(terminal: &mut Terminal<B>, app: &mut App) -> io::Result<()> {
-    loop {
-        terminal.draw(|f| ui(f, app))?;
-
-        if let Event::Key(key) = event::read()? {
-            match key.code {
-                KeyCode::Char('p') => {
-                    panic!("intentional demo panic");
-                }
-
-                KeyCode::Char('e') => {
-                    app.chain_hook();
-                }
-
-                _ => {
-                    return Ok(());
+            if let Event::Key(key) = event::read()? {
+                match key.code {
+                    KeyCode::Char('p') => panic!("intentional demo panic"),
+                    KeyCode::Char('e') => bail!("intentional demo error"),
+                    KeyCode::Char('h') => {
+                        let _ = std::panic::take_hook();
+                        self.hook_enabled = false;
+                    }
+                    KeyCode::Char('q') => return Ok(()),
+                    _ => {}
                 }
             }
         }
     }
-}
-
-/// Render the TUI.
-fn ui(f: &mut Frame, app: &App) {
-    let text = vec![
-        if app.hook_enabled {
-            Line::from("HOOK IS CURRENTLY **ENABLED**")
-        } else {
-            Line::from("HOOK IS CURRENTLY **DISABLED**")
-        },
-        Line::from(""),
-        Line::from("press `p` to panic"),
-        Line::from("press `e` to enable the terminal-resetting panic hook"),
-        Line::from("press any other key to quit without panic"),
-        Line::from(""),
-        Line::from("when you panic without the chained hook,"),
-        Line::from("you will likely have to reset your terminal afterwards"),
-        Line::from("with the `reset` command"),
-        Line::from(""),
-        Line::from("with the chained panic hook enabled,"),
-        Line::from("you should see the panic report as you would without ratatui"),
-        Line::from(""),
-        Line::from("try first without the panic handler to see the difference"),
-    ];
-
-    let b = Block::default()
-        .title("Panic Handler Demo")
-        .borders(Borders::ALL);
-
-    let p = Paragraph::new(text).block(b).alignment(Alignment::Center);
-
-    f.render_widget(p, f.size());
+
+    fn draw(&self, frame: &mut Frame) {
+        let text = vec![
+            if self.hook_enabled {
+                Line::from("HOOK IS CURRENTLY **ENABLED**")
+            } else {
+                Line::from("HOOK IS CURRENTLY **DISABLED**")
+            },
+            Line::from(""),
+            Line::from("Press `p` to cause a panic"),
+            Line::from("Press `e` to cause an error"),
+            Line::from("Press `h` to disable the panic hook"),
+            Line::from("Press `q` to quit"),
+            Line::from(""),
+            Line::from("When your app panics without a panic hook, you will likely have to"),
+            Line::from("reset your terminal afterwards with the `reset` command"),
+            Line::from(""),
+            Line::from("Try first with the panic handler enabled, and then with it disabled"),
+            Line::from("to see the difference"),
+        ];
+
+        let paragraph = Paragraph::new(text)
+            .block(Block::bordered().title("Panic Handler Demo"))
+            .centered();
+
+        frame.render_widget(paragraph, frame.area());
+    }
 }

examples/paragraph.rs

@@ -1,154 +1,153 @@
+//! # [Ratatui] Paragraph example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
 use std::{
-    error::Error,
-    io,
+    io::{self},
     time::{Duration, Instant},
 };
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+use color_eyre::Result;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Layout, Rect},
+    style::{Color, Stylize},
+    text::{Line, Masked, Span},
+    widgets::{Block, Paragraph, Widget, Wrap},
+    DefaultTerminal,
 };
-use ratatui::{prelude::*, widgets::*};
 
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
+}
+
+#[derive(Debug)]
 struct App {
+    should_exit: bool,
     scroll: u16,
+    last_tick: Instant,
 }
 
 impl App {
-    fn new() -> App {
-        App { scroll: 0 }
+    /// The duration between each tick.
+    const TICK_RATE: Duration = Duration::from_millis(250);
+
+    /// Create a new instance of the app.
+    fn new() -> Self {
+        Self {
+            should_exit: false,
+            scroll: 0,
+            last_tick: Instant::now(),
+        }
     }
 
-    fn on_tick(&mut self) {
-        self.scroll += 1;
-        self.scroll %= 10;
-    }
-}
-
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let tick_rate = Duration::from_millis(250);
-    let app = App::new();
-    let res = run_app(&mut terminal, app, tick_rate);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
+    /// Run the app until the user exits.
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        while !self.should_exit {
+            terminal.draw(|frame| frame.render_widget(&self, frame.area()))?;
+            self.handle_events()?;
+            if self.last_tick.elapsed() >= Self::TICK_RATE {
+                self.on_tick();
+                self.last_tick = Instant::now();
+            }
+        }
+        Ok(())
     }
 
-    Ok(())
-}
-
-fn run_app<B: Backend>(
-    terminal: &mut Terminal<B>,
-    mut app: App,
-    tick_rate: Duration,
-) -> io::Result<()> {
-    let mut last_tick = Instant::now();
-    loop {
-        terminal.draw(|f| ui(f, &app))?;
-
-        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
-        if crossterm::event::poll(timeout)? {
+    /// Handle events from the terminal.
+    fn handle_events(&mut self) -> io::Result<()> {
+        let timeout = Self::TICK_RATE.saturating_sub(self.last_tick.elapsed());
+        while event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
-                    return Ok(());
+                if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                    self.should_exit = true;
                 }
             }
         }
-        if last_tick.elapsed() >= tick_rate {
-            app.on_tick();
-            last_tick = Instant::now();
-        }
+        Ok(())
+    }
+
+    /// Update the app state on each tick.
+    fn on_tick(&mut self) {
+        self.scroll = (self.scroll + 1) % 10;
     }
 }
 
-fn ui(f: &mut Frame, app: &App) {
-    let size = f.size();
-
-    // Words made "loooong" to demonstrate line breaking.
-    let s = "Veeeeeeeeeeeeeeeery    loooooooooooooooooong   striiiiiiiiiiiiiiiiiiiiiiiiiing.   ";
-    let mut long_line = s.repeat(usize::from(size.width) / s.len() + 4);
-    long_line.push('\n');
-
-    let block = Block::default().black();
-    f.render_widget(block, size);
-
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Percentage(25),
-            Constraint::Percentage(25),
-            Constraint::Percentage(25),
-            Constraint::Percentage(25),
-        ])
-        .split(size);
-
-    let text = vec![
-        Line::from("This is a line "),
-        Line::from("This is a line   ".red()),
-        Line::from("This is a line".on_blue()),
-        Line::from("This is a longer line".crossed_out()),
-        Line::from(long_line.on_green()),
-        Line::from("This is a line".green().italic()),
-        Line::from(vec![
-            "Masked text: ".into(),
-            Span::styled(
-                Masked::new("password", '*'),
-                Style::default().fg(Color::Red),
-            ),
-        ]),
-    ];
-
-    let create_block = |title| {
-        Block::default()
-            .borders(Borders::ALL)
-            .style(Style::default().fg(Color::Gray))
-            .title(Span::styled(
-                title,
-                Style::default().add_modifier(Modifier::BOLD),
-            ))
-    };
-
-    let paragraph = Paragraph::new(text.clone())
-        .style(Style::default().fg(Color::Gray))
-        .block(create_block("Default alignment (Left), no wrap"));
-    f.render_widget(paragraph, chunks[0]);
-
-    let paragraph = Paragraph::new(text.clone())
-        .style(Style::default().fg(Color::Gray))
-        .block(create_block("Default alignment (Left), with wrap"))
-        .wrap(Wrap { trim: true });
-    f.render_widget(paragraph, chunks[1]);
-
-    let paragraph = Paragraph::new(text.clone())
-        .style(Style::default().fg(Color::Gray))
-        .block(create_block("Right alignment, with wrap"))
-        .alignment(Alignment::Right)
-        .wrap(Wrap { trim: true });
-    f.render_widget(paragraph, chunks[2]);
-
-    let paragraph = Paragraph::new(text)
-        .style(Style::default().fg(Color::Gray))
-        .block(create_block("Center alignment, with wrap, with scroll"))
-        .alignment(Alignment::Center)
-        .wrap(Wrap { trim: true })
-        .scroll((app.scroll, 0));
-    f.render_widget(paragraph, chunks[3]);
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let areas = Layout::vertical([Constraint::Max(9); 4]).split(area);
+        Paragraph::new(create_lines(area))
+            .block(title_block("Default alignment (Left), no wrap"))
+            .gray()
+            .render(areas[0], buf);
+        Paragraph::new(create_lines(area))
+            .block(title_block("Default alignment (Left), with wrap"))
+            .gray()
+            .wrap(Wrap { trim: true })
+            .render(areas[1], buf);
+        Paragraph::new(create_lines(area))
+            .block(title_block("Right alignment, with wrap"))
+            .gray()
+            .right_aligned()
+            .wrap(Wrap { trim: true })
+            .render(areas[2], buf);
+        Paragraph::new(create_lines(area))
+            .block(title_block("Center alignment, with wrap, with scroll"))
+            .gray()
+            .centered()
+            .wrap(Wrap { trim: true })
+            .scroll((self.scroll, 0))
+            .render(areas[3], buf);
+    }
+}
+
+/// Create a bordered block with a title.
+fn title_block(title: &str) -> Block {
+    Block::bordered()
+        .gray()
+        .title(title.bold().into_centered_line())
+}
+
+/// Create some lines to display in the paragraph.
+fn create_lines(area: Rect) -> Vec<Line<'static>> {
+    let short_line = "A long line to demonstrate line wrapping. ";
+    let long_line = short_line.repeat(usize::from(area.width) / short_line.len() + 4);
+    let mut styled_spans = vec![];
+    for span in [
+        "Styled".blue(),
+        "Spans".red().on_white(),
+        "Bold".bold(),
+        "Italic".italic(),
+        "Underlined".underlined(),
+        "Strikethrough".crossed_out(),
+    ] {
+        styled_spans.push(span);
+        styled_spans.push(" ".into());
+    }
+    vec![
+        Line::raw("Unstyled Line"),
+        Line::raw("Styled Line").black().on_red().bold().italic(),
+        Line::from(styled_spans),
+        Line::from(long_line.green().italic()),
+        Line::from_iter([
+            "Masked text: ".into(),
+            Span::styled(Masked::new("my secret password", '*'), Color::Red),
+        ]),
+    ]
 }

examples/popup.rs

@@ -1,114 +1,93 @@
-use std::{error::Error, io};
+//! # [Ratatui] Popup example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+// See also https://github.com/joshka/tui-popup and
+// https://github.com/sephiroth74/tui-confirm-dialog
+
+use color_eyre::Result;
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Flex, Layout, Rect},
+    style::Stylize,
+    widgets::{Block, Clear, Paragraph, Wrap},
+    DefaultTerminal, Frame,
 };
-use ratatui::{prelude::*, widgets::*};
 
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
+}
+
+#[derive(Default)]
 struct App {
     show_popup: bool,
 }
 
 impl App {
-    fn new() -> App {
-        App { show_popup: false }
-    }
-}
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        loop {
+            terminal.draw(|frame| self.draw(frame))?;
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let app = App::new();
-    let res = run_app(&mut terminal, app);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
-    }
-
-    Ok(())
-}
-
-fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut app: App) -> io::Result<()> {
-    loop {
-        terminal.draw(|f| ui(f, &app))?;
-
-        if let Event::Key(key) = event::read()? {
-            if key.kind == KeyEventKind::Press {
-                match key.code {
-                    KeyCode::Char('q') => return Ok(()),
-                    KeyCode::Char('p') => app.show_popup = !app.show_popup,
-                    _ => {}
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press {
+                    match key.code {
+                        KeyCode::Char('q') => return Ok(()),
+                        KeyCode::Char('p') => self.show_popup = !self.show_popup,
+                        _ => {}
+                    }
                 }
             }
         }
     }
-}
 
-fn ui(f: &mut Frame, app: &App) {
-    let size = f.size();
+    fn draw(&self, frame: &mut Frame) {
+        let area = frame.area();
 
-    let chunks = Layout::default()
-        .constraints([Constraint::Percentage(20), Constraint::Percentage(80)])
-        .split(size);
+        let vertical = Layout::vertical([Constraint::Percentage(20), Constraint::Percentage(80)]);
+        let [instructions, content] = vertical.areas(area);
 
-    let text = if app.show_popup {
-        "Press p to close the popup"
-    } else {
-        "Press p to show the popup"
-    };
-    let paragraph = Paragraph::new(text.slow_blink())
-        .alignment(Alignment::Center)
-        .wrap(Wrap { trim: true });
-    f.render_widget(paragraph, chunks[0]);
+        let text = if self.show_popup {
+            "Press p to close the popup"
+        } else {
+            "Press p to show the popup"
+        };
+        let paragraph = Paragraph::new(text.slow_blink())
+            .centered()
+            .wrap(Wrap { trim: true });
+        frame.render_widget(paragraph, instructions);
 
-    let block = Block::default()
-        .title("Content")
-        .borders(Borders::ALL)
-        .on_blue();
-    f.render_widget(block, chunks[1]);
+        let block = Block::bordered().title("Content").on_blue();
+        frame.render_widget(block, content);
 
-    if app.show_popup {
-        let block = Block::default().title("Popup").borders(Borders::ALL);
-        let area = centered_rect(60, 20, size);
-        f.render_widget(Clear, area); //this clears out the background
-        f.render_widget(block, area);
+        if self.show_popup {
+            let block = Block::bordered().title("Popup");
+            let area = popup_area(area, 60, 20);
+            frame.render_widget(Clear, area); //this clears out the background
+            frame.render_widget(block, area);
+        }
     }
 }
 
 /// helper function to create a centered rect using up certain percentage of the available rect `r`
-fn centered_rect(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
-    let popup_layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Percentage((100 - percent_y) / 2),
-            Constraint::Percentage(percent_y),
-            Constraint::Percentage((100 - percent_y) / 2),
-        ])
-        .split(r);
-
-    Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([
-            Constraint::Percentage((100 - percent_x) / 2),
-            Constraint::Percentage(percent_x),
-            Constraint::Percentage((100 - percent_x) / 2),
-        ])
-        .split(popup_layout[1])[1]
+fn popup_area(area: Rect, percent_x: u16, percent_y: u16) -> Rect {
+    let vertical = Layout::vertical([Constraint::Percentage(percent_y)]).flex(Flex::Center);
+    let horizontal = Layout::horizontal([Constraint::Percentage(percent_x)]).flex(Flex::Center);
+    let [area] = vertical.areas(area);
+    let [area] = horizontal.areas(area);
+    area
 }

examples/ratatui-logo.rs

@@ -1,71 +1,69 @@
+//! # [Ratatui] Logo example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
 use std::{
-    io::{self, stdout},
+    io::{self},
     thread::sleep,
     time::Duration,
 };
 
-use crossterm::terminal::{disable_raw_mode, enable_raw_mode};
 use indoc::indoc;
 use itertools::izip;
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{widgets::Paragraph, TerminalOptions, Viewport};
 
 /// A fun example of using half block characters to draw a logo
-fn main() -> io::Result<()> {
+#[allow(clippy::many_single_char_names)]
+fn logo() -> String {
     let r = indoc! {"
             ▄▄▄
             █▄▄▀
             █  █
-        "}
-    .lines();
+        "};
     let a = indoc! {"
              ▄▄
             █▄▄█
             █  █
-        "}
-    .lines();
+        "};
     let t = indoc! {"
             ▄▄▄
              █
              █
-        "}
-    .lines();
+        "};
     let u = indoc! {"
             ▄  ▄
             █  █
             ▀▄▄▀
-        "}
-    .lines();
+        "};
     let i = indoc! {"
             ▄
             █
             █
-        "}
-    .lines();
-    let mut terminal = init()?;
-    terminal.draw(|frame| {
-        let logo = izip!(r, a.clone(), t.clone(), a, t, u, i)
-            .map(|(r, a, t, a2, t2, u, i)| {
-                format!("{:5}{:5}{:4}{:5}{:4}{:5}{:5}", r, a, t, a2, t2, u, i)
-            })
-            .collect::<Vec<_>>()
-            .join("\n");
-        frame.render_widget(Paragraph::new(logo), frame.size());
-    })?;
+        "};
+    izip!(r.lines(), a.lines(), t.lines(), u.lines(), i.lines())
+        .map(|(r, a, t, u, i)| format!("{r:5}{a:5}{t:4}{a:5}{t:4}{u:5}{i:5}"))
+        .collect::<Vec<_>>()
+        .join("\n")
+}
+
+fn main() -> io::Result<()> {
+    let mut terminal = ratatui::init_with_options(TerminalOptions {
+        viewport: Viewport::Inline(3),
+    });
+    terminal.draw(|frame| frame.render_widget(Paragraph::new(logo()), frame.area()))?;
     sleep(Duration::from_secs(5));
-    restore()?;
+    ratatui::restore();
     println!();
     Ok(())
 }
-
-pub fn init() -> io::Result<Terminal<impl Backend>> {
-    enable_raw_mode()?;
-    let options = TerminalOptions {
-        viewport: Viewport::Inline(3),
-    };
-    Terminal::with_options(CrosstermBackend::new(stdout()), options)
-}
-
-pub fn restore() -> io::Result<()> {
-    disable_raw_mode()?;
-    Ok(())
-}

examples/scrollbar.rs

@@ -1,15 +1,32 @@
-use std::{
-    error::Error,
-    io,
-    time::{Duration, Instant},
-};
+//! # [Ratatui] Scrollbar example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+#![warn(clippy::pedantic)]
+
+use std::time::{Duration, Instant};
+
+use color_eyre::Result;
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode},
+    layout::{Alignment, Constraint, Layout, Margin},
+    style::{Color, Style, Stylize},
+    symbols::scrollbar,
+    text::{Line, Masked, Span},
+    widgets::{Block, Paragraph, Scrollbar, ScrollbarOrientation, ScrollbarState},
+    DefaultTerminal, Frame,
 };
-use ratatui::{prelude::*, symbols::scrollbar, widgets::*};
 
 #[derive(Default)]
 struct App {
@@ -19,217 +36,176 @@ struct App {
     pub horizontal_scroll: usize,
 }
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let tick_rate = Duration::from_millis(250);
-    let app = App::default();
-    let res = run_app(&mut terminal, app, tick_rate);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
-    }
-
-    Ok(())
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
 }
 
-fn run_app<B: Backend>(
-    terminal: &mut Terminal<B>,
-    mut app: App,
-    tick_rate: Duration,
-) -> io::Result<()> {
-    let mut last_tick = Instant::now();
-    loop {
-        terminal.draw(|f| ui(f, &mut app))?;
+impl App {
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        let tick_rate = Duration::from_millis(250);
+        let mut last_tick = Instant::now();
+        loop {
+            terminal.draw(|frame| self.draw(frame))?;
 
-        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
-        if crossterm::event::poll(timeout)? {
-            if let Event::Key(key) = event::read()? {
-                match key.code {
-                    KeyCode::Char('q') => return Ok(()),
-                    KeyCode::Char('j') => {
-                        app.vertical_scroll = app.vertical_scroll.saturating_add(1);
-                        app.vertical_scroll_state =
-                            app.vertical_scroll_state.position(app.vertical_scroll);
+            let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+            if event::poll(timeout)? {
+                if let Event::Key(key) = event::read()? {
+                    match key.code {
+                        KeyCode::Char('q') => return Ok(()),
+                        KeyCode::Char('j') | KeyCode::Down => {
+                            self.vertical_scroll = self.vertical_scroll.saturating_add(1);
+                            self.vertical_scroll_state =
+                                self.vertical_scroll_state.position(self.vertical_scroll);
+                        }
+                        KeyCode::Char('k') | KeyCode::Up => {
+                            self.vertical_scroll = self.vertical_scroll.saturating_sub(1);
+                            self.vertical_scroll_state =
+                                self.vertical_scroll_state.position(self.vertical_scroll);
+                        }
+                        KeyCode::Char('h') | KeyCode::Left => {
+                            self.horizontal_scroll = self.horizontal_scroll.saturating_sub(1);
+                            self.horizontal_scroll_state = self
+                                .horizontal_scroll_state
+                                .position(self.horizontal_scroll);
+                        }
+                        KeyCode::Char('l') | KeyCode::Right => {
+                            self.horizontal_scroll = self.horizontal_scroll.saturating_add(1);
+                            self.horizontal_scroll_state = self
+                                .horizontal_scroll_state
+                                .position(self.horizontal_scroll);
+                        }
+                        _ => {}
                     }
-                    KeyCode::Char('k') => {
-                        app.vertical_scroll = app.vertical_scroll.saturating_sub(1);
-                        app.vertical_scroll_state =
-                            app.vertical_scroll_state.position(app.vertical_scroll);
-                    }
-                    KeyCode::Char('h') => {
-                        app.horizontal_scroll = app.horizontal_scroll.saturating_sub(1);
-                        app.horizontal_scroll_state =
-                            app.horizontal_scroll_state.position(app.horizontal_scroll);
-                    }
-                    KeyCode::Char('l') => {
-                        app.horizontal_scroll = app.horizontal_scroll.saturating_add(1);
-                        app.horizontal_scroll_state =
-                            app.horizontal_scroll_state.position(app.horizontal_scroll);
-                    }
-                    _ => {}
                 }
             }
-        }
-        if last_tick.elapsed() >= tick_rate {
-            last_tick = Instant::now();
+            if last_tick.elapsed() >= tick_rate {
+                last_tick = Instant::now();
+            }
         }
     }
-}
 
-fn ui(f: &mut Frame, app: &mut App) {
-    let size = f.size();
+    #[allow(clippy::too_many_lines, clippy::cast_possible_truncation)]
+    fn draw(&mut self, frame: &mut Frame) {
+        let area = frame.area();
 
-    // Words made "loooong" to demonstrate line breaking.
-    let s = "Veeeeeeeeeeeeeeeery    loooooooooooooooooong   striiiiiiiiiiiiiiiiiiiiiiiiiing.   ";
-    let mut long_line = s.repeat(usize::from(size.width) / s.len() + 4);
-    long_line.push('\n');
+        // Words made "loooong" to demonstrate line breaking.
+        let s =
+            "Veeeeeeeeeeeeeeeery    loooooooooooooooooong   striiiiiiiiiiiiiiiiiiiiiiiiiing.   ";
+        let mut long_line = s.repeat(usize::from(area.width) / s.len() + 4);
+        long_line.push('\n');
 
-    let block = Block::default().black();
-    f.render_widget(block, size);
-
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
+        let chunks = Layout::vertical([
             Constraint::Min(1),
             Constraint::Percentage(25),
             Constraint::Percentage(25),
             Constraint::Percentage(25),
             Constraint::Percentage(25),
         ])
-        .split(size);
+        .split(area);
 
-    let text = vec![
-        Line::from("This is a line "),
-        Line::from("This is a line   ".red()),
-        Line::from("This is a line".on_dark_gray()),
-        Line::from("This is a longer line".crossed_out()),
-        Line::from(long_line.clone()),
-        Line::from("This is a line".reset()),
-        Line::from(vec![
-            Span::raw("Masked text: "),
-            Span::styled(
-                Masked::new("password", '*'),
-                Style::default().fg(Color::Red),
-            ),
-        ]),
-        Line::from("This is a line "),
-        Line::from("This is a line   ".red()),
-        Line::from("This is a line".on_dark_gray()),
-        Line::from("This is a longer line".crossed_out()),
-        Line::from(long_line.clone()),
-        Line::from("This is a line".reset()),
-        Line::from(vec![
-            Span::raw("Masked text: "),
-            Span::styled(
-                Masked::new("password", '*'),
-                Style::default().fg(Color::Red),
-            ),
-        ]),
-    ];
-    app.vertical_scroll_state = app.vertical_scroll_state.content_length(text.len());
-    app.horizontal_scroll_state = app.horizontal_scroll_state.content_length(long_line.len());
+        let text = vec![
+            Line::from("This is a line "),
+            Line::from("This is a line   ".red()),
+            Line::from("This is a line".on_dark_gray()),
+            Line::from("This is a longer line".crossed_out()),
+            Line::from(long_line.clone()),
+            Line::from("This is a line".reset()),
+            Line::from(vec![
+                Span::raw("Masked text: "),
+                Span::styled(Masked::new("password", '*'), Style::new().fg(Color::Red)),
+            ]),
+            Line::from("This is a line "),
+            Line::from("This is a line   ".red()),
+            Line::from("This is a line".on_dark_gray()),
+            Line::from("This is a longer line".crossed_out()),
+            Line::from(long_line.clone()),
+            Line::from("This is a line".reset()),
+            Line::from(vec![
+                Span::raw("Masked text: "),
+                Span::styled(Masked::new("password", '*'), Style::new().fg(Color::Red)),
+            ]),
+        ];
+        self.vertical_scroll_state = self.vertical_scroll_state.content_length(text.len());
+        self.horizontal_scroll_state = self.horizontal_scroll_state.content_length(long_line.len());
 
-    let create_block = |title| {
-        Block::default()
-            .borders(Borders::ALL)
+        let create_block = |title: &'static str| Block::bordered().gray().title(title.bold());
+
+        let title = Block::new()
+            .title_alignment(Alignment::Center)
+            .title("Use h j k l or ◄ ▲ ▼ ► to scroll ".bold());
+        frame.render_widget(title, chunks[0]);
+
+        let paragraph = Paragraph::new(text.clone())
             .gray()
-            .title(Span::styled(
-                title,
-                Style::default().add_modifier(Modifier::BOLD),
+            .block(create_block("Vertical scrollbar with arrows"))
+            .scroll((self.vertical_scroll as u16, 0));
+        frame.render_widget(paragraph, chunks[1]);
+        frame.render_stateful_widget(
+            Scrollbar::new(ScrollbarOrientation::VerticalRight)
+                .begin_symbol(Some("↑"))
+                .end_symbol(Some("↓")),
+            chunks[1],
+            &mut self.vertical_scroll_state,
+        );
+
+        let paragraph = Paragraph::new(text.clone())
+            .gray()
+            .block(create_block(
+                "Vertical scrollbar without arrows, without track symbol and mirrored",
             ))
-    };
+            .scroll((self.vertical_scroll as u16, 0));
+        frame.render_widget(paragraph, chunks[2]);
+        frame.render_stateful_widget(
+            Scrollbar::new(ScrollbarOrientation::VerticalLeft)
+                .symbols(scrollbar::VERTICAL)
+                .begin_symbol(None)
+                .track_symbol(None)
+                .end_symbol(None),
+            chunks[2].inner(Margin {
+                vertical: 1,
+                horizontal: 0,
+            }),
+            &mut self.vertical_scroll_state,
+        );
 
-    let title = Block::default()
-        .title("Use h j k l to scroll ◄ ▲ ▼ ►")
-        .title_alignment(Alignment::Center);
-    f.render_widget(title, chunks[0]);
+        let paragraph = Paragraph::new(text.clone())
+            .gray()
+            .block(create_block(
+                "Horizontal scrollbar with only begin arrow & custom thumb symbol",
+            ))
+            .scroll((0, self.horizontal_scroll as u16));
+        frame.render_widget(paragraph, chunks[3]);
+        frame.render_stateful_widget(
+            Scrollbar::new(ScrollbarOrientation::HorizontalBottom)
+                .thumb_symbol("🬋")
+                .end_symbol(None),
+            chunks[3].inner(Margin {
+                vertical: 0,
+                horizontal: 1,
+            }),
+            &mut self.horizontal_scroll_state,
+        );
 
-    let paragraph = Paragraph::new(text.clone())
-        .gray()
-        .block(create_block("Vertical scrollbar with arrows"))
-        .scroll((app.vertical_scroll as u16, 0));
-    f.render_widget(paragraph, chunks[1]);
-    f.render_stateful_widget(
-        Scrollbar::default()
-            .orientation(ScrollbarOrientation::VerticalRight)
-            .begin_symbol(Some("↑"))
-            .end_symbol(Some("↓")),
-        chunks[1],
-        &mut app.vertical_scroll_state,
-    );
-
-    let paragraph = Paragraph::new(text.clone())
-        .gray()
-        .block(create_block(
-            "Vertical scrollbar without arrows, without track symbol and mirrored",
-        ))
-        .scroll((app.vertical_scroll as u16, 0));
-    f.render_widget(paragraph, chunks[2]);
-    f.render_stateful_widget(
-        Scrollbar::default()
-            .orientation(ScrollbarOrientation::VerticalLeft)
-            .symbols(scrollbar::VERTICAL)
-            .begin_symbol(None)
-            .track_symbol(None)
-            .end_symbol(None),
-        chunks[2].inner(&Margin {
-            vertical: 1,
-            horizontal: 0,
-        }),
-        &mut app.vertical_scroll_state,
-    );
-
-    let paragraph = Paragraph::new(text.clone())
-        .gray()
-        .block(create_block(
-            "Horizontal scrollbar with only begin arrow & custom thumb symbol",
-        ))
-        .scroll((0, app.horizontal_scroll as u16));
-    f.render_widget(paragraph, chunks[3]);
-    f.render_stateful_widget(
-        Scrollbar::default()
-            .orientation(ScrollbarOrientation::HorizontalBottom)
-            .thumb_symbol("🬋")
-            .end_symbol(None),
-        chunks[3].inner(&Margin {
-            vertical: 0,
-            horizontal: 1,
-        }),
-        &mut app.horizontal_scroll_state,
-    );
-
-    let paragraph = Paragraph::new(text.clone())
-        .gray()
-        .block(create_block(
-            "Horizontal scrollbar without arrows & custom thumb and track symbol",
-        ))
-        .scroll((0, app.horizontal_scroll as u16));
-    f.render_widget(paragraph, chunks[4]);
-    f.render_stateful_widget(
-        Scrollbar::default()
-            .orientation(ScrollbarOrientation::HorizontalBottom)
-            .thumb_symbol("░")
-            .track_symbol(Some("─")),
-        chunks[4].inner(&Margin {
-            vertical: 0,
-            horizontal: 1,
-        }),
-        &mut app.horizontal_scroll_state,
-    );
+        let paragraph = Paragraph::new(text.clone())
+            .gray()
+            .block(create_block(
+                "Horizontal scrollbar without arrows & custom thumb and track symbol",
+            ))
+            .scroll((0, self.horizontal_scroll as u16));
+        frame.render_widget(paragraph, chunks[4]);
+        frame.render_stateful_widget(
+            Scrollbar::new(ScrollbarOrientation::HorizontalBottom)
+                .thumb_symbol("░")
+                .track_symbol(Some("─")),
+            chunks[4].inner(Margin {
+                vertical: 0,
+                horizontal: 1,
+            }),
+            &mut self.horizontal_scroll_state,
+        );
+    }
 }

examples/sparkline.rs

@@ -1,29 +1,57 @@
-use std::{
-    error::Error,
-    io,
-    time::{Duration, Instant},
-};
+//! # [Ratatui] Sparkline example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
-};
+use std::time::{Duration, Instant};
+
+use color_eyre::Result;
 use rand::{
     distributions::{Distribution, Uniform},
     rngs::ThreadRng,
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode},
+    layout::{Constraint, Layout},
+    style::{Color, Style},
+    widgets::{Block, Borders, Sparkline},
+    DefaultTerminal, Frame,
+};
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
+}
+
+struct App {
+    signal: RandomSignal,
+    data1: Vec<u64>,
+    data2: Vec<u64>,
+    data3: Vec<u64>,
+}
 
 #[derive(Clone)]
-pub struct RandomSignal {
+struct RandomSignal {
     distribution: Uniform<u64>,
     rng: ThreadRng,
 }
 
 impl RandomSignal {
-    pub fn new(lower: u64, upper: u64) -> RandomSignal {
-        RandomSignal {
+    fn new(lower: u64, upper: u64) -> Self {
+        Self {
             distribution: Uniform::new(lower, upper),
             rng: rand::thread_rng(),
         }
@@ -37,20 +65,13 @@ impl Iterator for RandomSignal {
     }
 }
 
-struct App {
-    signal: RandomSignal,
-    data1: Vec<u64>,
-    data2: Vec<u64>,
-    data3: Vec<u64>,
-}
-
 impl App {
-    fn new() -> App {
+    fn new() -> Self {
         let mut signal = RandomSignal::new(0, 100);
         let data1 = signal.by_ref().take(200).collect::<Vec<u64>>();
         let data2 = signal.by_ref().take(200).collect::<Vec<u64>>();
         let data3 = signal.by_ref().take(200).collect::<Vec<u64>>();
-        App {
+        Self {
             signal,
             data1,
             data2,
@@ -69,96 +90,63 @@ impl App {
         self.data3.pop();
         self.data3.insert(0, value);
     }
-}
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        let tick_rate = Duration::from_millis(250);
 
-    // create app and run it
-    let tick_rate = Duration::from_millis(250);
-    let app = App::new();
-    let res = run_app(&mut terminal, app, tick_rate);
+        let mut last_tick = Instant::now();
+        loop {
+            terminal.draw(|frame| self.draw(frame))?;
 
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
-    }
-
-    Ok(())
-}
-
-fn run_app<B: Backend>(
-    terminal: &mut Terminal<B>,
-    mut app: App,
-    tick_rate: Duration,
-) -> io::Result<()> {
-    let mut last_tick = Instant::now();
-    loop {
-        terminal.draw(|f| ui(f, &app))?;
-
-        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
-        if crossterm::event::poll(timeout)? {
-            if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
-                    return Ok(());
+            let timeout = tick_rate.saturating_sub(last_tick.elapsed());
+            if event::poll(timeout)? {
+                if let Event::Key(key) = event::read()? {
+                    if key.code == KeyCode::Char('q') {
+                        return Ok(());
+                    }
                 }
             }
-        }
-        if last_tick.elapsed() >= tick_rate {
-            app.on_tick();
-            last_tick = Instant::now();
+            if last_tick.elapsed() >= tick_rate {
+                self.on_tick();
+                last_tick = Instant::now();
+            }
         }
     }
-}
 
-fn ui(f: &mut Frame, app: &App) {
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
+    fn draw(&self, frame: &mut Frame) {
+        let chunks = Layout::vertical([
             Constraint::Length(3),
             Constraint::Length(3),
             Constraint::Min(0),
         ])
-        .split(f.size());
-    let sparkline = Sparkline::default()
-        .block(
-            Block::default()
-                .title("Data1")
-                .borders(Borders::LEFT | Borders::RIGHT),
-        )
-        .data(&app.data1)
-        .style(Style::default().fg(Color::Yellow));
-    f.render_widget(sparkline, chunks[0]);
-    let sparkline = Sparkline::default()
-        .block(
-            Block::default()
-                .title("Data2")
-                .borders(Borders::LEFT | Borders::RIGHT),
-        )
-        .data(&app.data2)
-        .style(Style::default().bg(Color::Green));
-    f.render_widget(sparkline, chunks[1]);
-    // Multiline
-    let sparkline = Sparkline::default()
-        .block(
-            Block::default()
-                .title("Data3")
-                .borders(Borders::LEFT | Borders::RIGHT),
-        )
-        .data(&app.data3)
-        .style(Style::default().fg(Color::Red));
-    f.render_widget(sparkline, chunks[2]);
+        .split(frame.area());
+        let sparkline = Sparkline::default()
+            .block(
+                Block::new()
+                    .borders(Borders::LEFT | Borders::RIGHT)
+                    .title("Data1"),
+            )
+            .data(&self.data1)
+            .style(Style::default().fg(Color::Yellow));
+        frame.render_widget(sparkline, chunks[0]);
+        let sparkline = Sparkline::default()
+            .block(
+                Block::new()
+                    .borders(Borders::LEFT | Borders::RIGHT)
+                    .title("Data2"),
+            )
+            .data(&self.data2)
+            .style(Style::default().bg(Color::Green));
+        frame.render_widget(sparkline, chunks[1]);
+        // Multiline
+        let sparkline = Sparkline::default()
+            .block(
+                Block::new()
+                    .borders(Borders::LEFT | Borders::RIGHT)
+                    .title("Data3"),
+            )
+            .data(&self.data3)
+            .style(Style::default().fg(Color::Red));
+        frame.render_widget(sparkline, chunks[2]);
+    }
 }

examples/table.rs

@@ -1,44 +1,124 @@
-use std::{error::Error, io};
+//! # [Ratatui] Table example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+use color_eyre::Result;
+use itertools::Itertools;
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Layout, Margin, Rect},
+    style::{self, Color, Modifier, Style, Stylize},
+    text::{Line, Text},
+    widgets::{
+        Block, BorderType, Cell, HighlightSpacing, Paragraph, Row, Scrollbar, ScrollbarOrientation,
+        ScrollbarState, Table, TableState,
+    },
+    DefaultTerminal, Frame,
 };
-use ratatui::{prelude::*, widgets::*};
+use style::palette::tailwind;
+use unicode_width::UnicodeWidthStr;
 
-struct App<'a> {
-    state: TableState,
-    items: Vec<Vec<&'a str>>,
+const PALETTES: [tailwind::Palette; 4] = [
+    tailwind::BLUE,
+    tailwind::EMERALD,
+    tailwind::INDIGO,
+    tailwind::RED,
+];
+const INFO_TEXT: &str =
+    "(Esc) quit | (↑) move up | (↓) move down | (→) next color | (←) previous color";
+
+const ITEM_HEIGHT: usize = 4;
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
+}
+struct TableColors {
+    buffer_bg: Color,
+    header_bg: Color,
+    header_fg: Color,
+    row_fg: Color,
+    selected_style_fg: Color,
+    normal_row_color: Color,
+    alt_row_color: Color,
+    footer_border_color: Color,
 }
 
-impl<'a> App<'a> {
-    fn new() -> App<'a> {
-        App {
-            state: TableState::default(),
-            items: vec![
-                vec!["Row11", "Row12", "Row13"],
-                vec!["Row21", "Row22", "Row23"],
-                vec!["Row31", "Row32", "Row33"],
-                vec!["Row41", "Row42", "Row43"],
-                vec!["Row51", "Row52", "Row53"],
-                vec!["Row61", "Row62\nTest", "Row63"],
-                vec!["Row71", "Row72", "Row73"],
-                vec!["Row81", "Row82", "Row83"],
-                vec!["Row91", "Row92", "Row93"],
-                vec!["Row101", "Row102", "Row103"],
-                vec!["Row111", "Row112", "Row113"],
-                vec!["Row121", "Row122", "Row123"],
-                vec!["Row131", "Row132", "Row133"],
-                vec!["Row141", "Row142", "Row143"],
-                vec!["Row151", "Row152", "Row153"],
-                vec!["Row161", "Row162", "Row163"],
-                vec!["Row171", "Row172", "Row173"],
-                vec!["Row181", "Row182", "Row183"],
-                vec!["Row191", "Row192", "Row193"],
-            ],
+impl TableColors {
+    const fn new(color: &tailwind::Palette) -> Self {
+        Self {
+            buffer_bg: tailwind::SLATE.c950,
+            header_bg: color.c900,
+            header_fg: tailwind::SLATE.c200,
+            row_fg: tailwind::SLATE.c200,
+            selected_style_fg: color.c400,
+            normal_row_color: tailwind::SLATE.c950,
+            alt_row_color: tailwind::SLATE.c900,
+            footer_border_color: color.c400,
         }
     }
+}
+
+struct Data {
+    name: String,
+    address: String,
+    email: String,
+}
+
+impl Data {
+    const fn ref_array(&self) -> [&String; 3] {
+        [&self.name, &self.address, &self.email]
+    }
+
+    fn name(&self) -> &str {
+        &self.name
+    }
+
+    fn address(&self) -> &str {
+        &self.address
+    }
+
+    fn email(&self) -> &str {
+        &self.email
+    }
+}
+
+struct App {
+    state: TableState,
+    items: Vec<Data>,
+    longest_item_lens: (u16, u16, u16), // order is (name, address, email)
+    scroll_state: ScrollbarState,
+    colors: TableColors,
+    color_index: usize,
+}
+
+impl App {
+    fn new() -> Self {
+        let data_vec = generate_fake_names();
+        Self {
+            state: TableState::default().with_selected(0),
+            longest_item_lens: constraint_len_calculator(&data_vec),
+            scroll_state: ScrollbarState::new((data_vec.len() - 1) * ITEM_HEIGHT),
+            colors: TableColors::new(&PALETTES[0]),
+            color_index: 0,
+            items: data_vec,
+        }
+    }
+
     pub fn next(&mut self) {
         let i = match self.state.selected() {
             Some(i) => {
@@ -51,6 +131,7 @@ impl<'a> App<'a> {
             None => 0,
         };
         self.state.select(Some(i));
+        self.scroll_state = self.scroll_state.position(i * ITEM_HEIGHT);
     }
 
     pub fn previous(&mut self) {
@@ -65,89 +146,206 @@ impl<'a> App<'a> {
             None => 0,
         };
         self.state.select(Some(i));
-    }
-}
-
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let app = App::new();
-    let res = run_app(&mut terminal, app);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
+        self.scroll_state = self.scroll_state.position(i * ITEM_HEIGHT);
     }
 
-    Ok(())
-}
+    pub fn next_color(&mut self) {
+        self.color_index = (self.color_index + 1) % PALETTES.len();
+    }
 
-fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut app: App) -> io::Result<()> {
-    loop {
-        terminal.draw(|f| ui(f, &mut app))?;
+    pub fn previous_color(&mut self) {
+        let count = PALETTES.len();
+        self.color_index = (self.color_index + count - 1) % count;
+    }
 
-        if let Event::Key(key) = event::read()? {
-            if key.kind == KeyEventKind::Press {
-                match key.code {
-                    KeyCode::Char('q') => return Ok(()),
-                    KeyCode::Down | KeyCode::Char('j') => app.next(),
-                    KeyCode::Up | KeyCode::Char('k') => app.previous(),
-                    _ => {}
+    pub fn set_colors(&mut self) {
+        self.colors = TableColors::new(&PALETTES[self.color_index]);
+    }
+
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        loop {
+            terminal.draw(|frame| self.draw(frame))?;
+
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press {
+                    match key.code {
+                        KeyCode::Char('q') | KeyCode::Esc => return Ok(()),
+                        KeyCode::Char('j') | KeyCode::Down => self.next(),
+                        KeyCode::Char('k') | KeyCode::Up => self.previous(),
+                        KeyCode::Char('l') | KeyCode::Right => self.next_color(),
+                        KeyCode::Char('h') | KeyCode::Left => self.previous_color(),
+                        _ => {}
+                    }
                 }
             }
         }
     }
+
+    fn draw(&mut self, frame: &mut Frame) {
+        let vertical = &Layout::vertical([Constraint::Min(5), Constraint::Length(3)]);
+        let rects = vertical.split(frame.area());
+
+        self.set_colors();
+
+        self.render_table(frame, rects[0]);
+        self.render_scrollbar(frame, rects[0]);
+        self.render_footer(frame, rects[1]);
+    }
+
+    fn render_table(&mut self, frame: &mut Frame, area: Rect) {
+        let header_style = Style::default()
+            .fg(self.colors.header_fg)
+            .bg(self.colors.header_bg);
+        let selected_style = Style::default()
+            .add_modifier(Modifier::REVERSED)
+            .fg(self.colors.selected_style_fg);
+
+        let header = ["Name", "Address", "Email"]
+            .into_iter()
+            .map(Cell::from)
+            .collect::<Row>()
+            .style(header_style)
+            .height(1);
+        let rows = self.items.iter().enumerate().map(|(i, data)| {
+            let color = match i % 2 {
+                0 => self.colors.normal_row_color,
+                _ => self.colors.alt_row_color,
+            };
+            let item = data.ref_array();
+            item.into_iter()
+                .map(|content| Cell::from(Text::from(format!("\n{content}\n"))))
+                .collect::<Row>()
+                .style(Style::new().fg(self.colors.row_fg).bg(color))
+                .height(4)
+        });
+        let bar = " █ ";
+        let t = Table::new(
+            rows,
+            [
+                // + 1 is for padding.
+                Constraint::Length(self.longest_item_lens.0 + 1),
+                Constraint::Min(self.longest_item_lens.1 + 1),
+                Constraint::Min(self.longest_item_lens.2),
+            ],
+        )
+        .header(header)
+        .highlight_style(selected_style)
+        .highlight_symbol(Text::from(vec![
+            "".into(),
+            bar.into(),
+            bar.into(),
+            "".into(),
+        ]))
+        .bg(self.colors.buffer_bg)
+        .highlight_spacing(HighlightSpacing::Always);
+        frame.render_stateful_widget(t, area, &mut self.state);
+    }
+
+    fn render_scrollbar(&mut self, frame: &mut Frame, area: Rect) {
+        frame.render_stateful_widget(
+            Scrollbar::default()
+                .orientation(ScrollbarOrientation::VerticalRight)
+                .begin_symbol(None)
+                .end_symbol(None),
+            area.inner(Margin {
+                vertical: 1,
+                horizontal: 1,
+            }),
+            &mut self.scroll_state,
+        );
+    }
+
+    fn render_footer(&self, frame: &mut Frame, area: Rect) {
+        let info_footer = Paragraph::new(Line::from(INFO_TEXT))
+            .style(
+                Style::new()
+                    .fg(self.colors.row_fg)
+                    .bg(self.colors.buffer_bg),
+            )
+            .centered()
+            .block(
+                Block::bordered()
+                    .border_type(BorderType::Double)
+                    .border_style(Style::new().fg(self.colors.footer_border_color)),
+            );
+        frame.render_widget(info_footer, area);
+    }
 }
 
-fn ui(f: &mut Frame, app: &mut App) {
-    let rects = Layout::default()
-        .constraints([Constraint::Percentage(100)])
-        .split(f.size());
+fn generate_fake_names() -> Vec<Data> {
+    use fakeit::{address, contact, name};
 
-    let selected_style = Style::default().add_modifier(Modifier::REVERSED);
-    let normal_style = Style::default().bg(Color::Blue);
-    let header_cells = ["Header1", "Header2", "Header3"]
+    (0..20)
+        .map(|_| {
+            let name = name::full();
+            let address = format!(
+                "{}\n{}, {} {}",
+                address::street(),
+                address::city(),
+                address::state(),
+                address::zip()
+            );
+            let email = contact::email();
+
+            Data {
+                name,
+                address,
+                email,
+            }
+        })
+        .sorted_by(|a, b| a.name.cmp(&b.name))
+        .collect_vec()
+}
+
+fn constraint_len_calculator(items: &[Data]) -> (u16, u16, u16) {
+    let name_len = items
         .iter()
-        .map(|h| Cell::from(*h).style(Style::default().fg(Color::Red)));
-    let header = Row::new(header_cells)
-        .style(normal_style)
-        .height(1)
-        .bottom_margin(1);
-    let rows = app.items.iter().map(|item| {
-        let height = item
-            .iter()
-            .map(|content| content.chars().filter(|c| *c == '\n').count())
-            .max()
-            .unwrap_or(0)
-            + 1;
-        let cells = item.iter().map(|c| Cell::from(*c));
-        Row::new(cells).height(height as u16).bottom_margin(1)
-    });
-    let t = Table::new(
-        rows,
-        [
-            Constraint::Percentage(50),
-            Constraint::Max(30),
-            Constraint::Min(10),
-        ],
-    )
-    .header(header)
-    .block(Block::default().borders(Borders::ALL).title("Table"))
-    .highlight_style(selected_style)
-    .highlight_symbol(">> ");
-    f.render_stateful_widget(t, rects[0], &mut app.state);
+        .map(Data::name)
+        .map(UnicodeWidthStr::width)
+        .max()
+        .unwrap_or(0);
+    let address_len = items
+        .iter()
+        .map(Data::address)
+        .flat_map(str::lines)
+        .map(UnicodeWidthStr::width)
+        .max()
+        .unwrap_or(0);
+    let email_len = items
+        .iter()
+        .map(Data::email)
+        .map(UnicodeWidthStr::width)
+        .max()
+        .unwrap_or(0);
+
+    #[allow(clippy::cast_possible_truncation)]
+    (name_len as u16, address_len as u16, email_len as u16)
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::Data;
+
+    #[test]
+    fn constraint_len_calculator() {
+        let test_data = vec![
+            Data {
+                name: "Emirhan Tala".to_string(),
+                address: "Cambridgelaan 6XX\n3584 XX Utrecht".to_string(),
+                email: "tala.emirhan@gmail.com".to_string(),
+            },
+            Data {
+                name: "thistextis26characterslong".to_string(),
+                address: "this line is 31 characters long\nbottom line is 33 characters long"
+                    .to_string(),
+                email: "thisemailis40caharacterslong@ratatui.com".to_string(),
+            },
+        ];
+        let (longest_name_len, longest_address_len, longest_email_len) =
+            crate::constraint_len_calculator(&test_data);
+
+        assert_eq!(26, longest_name_len);
+        assert_eq!(33, longest_address_len);
+        assert_eq!(40, longest_email_len);
+    }
 }

examples/tabs.rs

@@ -1,112 +1,216 @@
-use std::{error::Error, io};
+//! # [Ratatui] Tabs example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+use color_eyre::Result;
+use ratatui::{
+    buffer::Buffer,
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Layout, Rect},
+    style::{palette::tailwind, Color, Stylize},
+    symbols,
+    text::Line,
+    widgets::{Block, Padding, Paragraph, Tabs, Widget},
+    DefaultTerminal,
 };
-use ratatui::{prelude::*, widgets::*};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
 
-struct App<'a> {
-    pub titles: Vec<&'a str>,
-    pub index: usize,
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::default().run(terminal);
+    ratatui::restore();
+    app_result
 }
 
-impl<'a> App<'a> {
-    fn new() -> App<'a> {
-        App {
-            titles: vec!["Tab0", "Tab1", "Tab2", "Tab3"],
-            index: 0,
+#[derive(Default)]
+struct App {
+    state: AppState,
+    selected_tab: SelectedTab,
+}
+
+#[derive(Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Quitting,
+}
+
+#[derive(Default, Clone, Copy, Display, FromRepr, EnumIter)]
+enum SelectedTab {
+    #[default]
+    #[strum(to_string = "Tab 1")]
+    Tab1,
+    #[strum(to_string = "Tab 2")]
+    Tab2,
+    #[strum(to_string = "Tab 3")]
+    Tab3,
+    #[strum(to_string = "Tab 4")]
+    Tab4,
+}
+
+impl App {
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        while self.state == AppState::Running {
+            terminal.draw(|frame| frame.render_widget(&self, frame.area()))?;
+            self.handle_events()?;
         }
+        Ok(())
     }
 
-    pub fn next(&mut self) {
-        self.index = (self.index + 1) % self.titles.len();
-    }
-
-    pub fn previous(&mut self) {
-        if self.index > 0 {
-            self.index -= 1;
-        } else {
-            self.index = self.titles.len() - 1;
-        }
-    }
-}
-
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let app = App::new();
-    let res = run_app(&mut terminal, app);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
-    }
-
-    Ok(())
-}
-
-fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut app: App) -> io::Result<()> {
-    loop {
-        terminal.draw(|f| ui(f, &app))?;
-
+    fn handle_events(&mut self) -> std::io::Result<()> {
         if let Event::Key(key) = event::read()? {
             if key.kind == KeyEventKind::Press {
                 match key.code {
-                    KeyCode::Char('q') => return Ok(()),
-                    KeyCode::Right | KeyCode::Char('l') => app.next(),
-                    KeyCode::Left | KeyCode::Char('h') => app.previous(),
+                    KeyCode::Char('l') | KeyCode::Right => self.next_tab(),
+                    KeyCode::Char('h') | KeyCode::Left => self.previous_tab(),
+                    KeyCode::Char('q') | KeyCode::Esc => self.quit(),
                     _ => {}
                 }
             }
         }
+        Ok(())
+    }
+
+    pub fn next_tab(&mut self) {
+        self.selected_tab = self.selected_tab.next();
+    }
+
+    pub fn previous_tab(&mut self) {
+        self.selected_tab = self.selected_tab.previous();
+    }
+
+    pub fn quit(&mut self) {
+        self.state = AppState::Quitting;
     }
 }
 
-fn ui(f: &mut Frame, app: &App) {
-    let size = f.size();
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([Constraint::Length(3), Constraint::Min(0)])
-        .split(size);
+impl SelectedTab {
+    /// Get the previous tab, if there is no previous tab return the current tab.
+    fn previous(self) -> Self {
+        let current_index: usize = self as usize;
+        let previous_index = current_index.saturating_sub(1);
+        Self::from_repr(previous_index).unwrap_or(self)
+    }
 
-    let block = Block::default().on_white().black();
-    f.render_widget(block, size);
-    let titles = app
-        .titles
-        .iter()
-        .map(|t| {
-            let (first, rest) = t.split_at(1);
-            Line::from(vec![first.yellow(), rest.green()])
-        })
-        .collect();
-    let tabs = Tabs::new(titles)
-        .block(Block::default().borders(Borders::ALL).title("Tabs"))
-        .select(app.index)
-        .style(Style::default().cyan().on_gray())
-        .highlight_style(Style::default().bold().on_black());
-    f.render_widget(tabs, chunks[0]);
-    let inner = match app.index {
-        0 => Block::default().title("Inner 0").borders(Borders::ALL),
-        1 => Block::default().title("Inner 1").borders(Borders::ALL),
-        2 => Block::default().title("Inner 2").borders(Borders::ALL),
-        3 => Block::default().title("Inner 3").borders(Borders::ALL),
-        _ => unreachable!(),
-    };
-    f.render_widget(inner, chunks[1]);
+    /// Get the next tab, if there is no next tab return the current tab.
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+}
+
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::{Length, Min};
+        let vertical = Layout::vertical([Length(1), Min(0), Length(1)]);
+        let [header_area, inner_area, footer_area] = vertical.areas(area);
+
+        let horizontal = Layout::horizontal([Min(0), Length(20)]);
+        let [tabs_area, title_area] = horizontal.areas(header_area);
+
+        render_title(title_area, buf);
+        self.render_tabs(tabs_area, buf);
+        self.selected_tab.render(inner_area, buf);
+        render_footer(footer_area, buf);
+    }
+}
+
+impl App {
+    fn render_tabs(&self, area: Rect, buf: &mut Buffer) {
+        let titles = SelectedTab::iter().map(SelectedTab::title);
+        let highlight_style = (Color::default(), self.selected_tab.palette().c700);
+        let selected_tab_index = self.selected_tab as usize;
+        Tabs::new(titles)
+            .highlight_style(highlight_style)
+            .select(selected_tab_index)
+            .padding("", "")
+            .divider(" ")
+            .render(area, buf);
+    }
+}
+
+fn render_title(area: Rect, buf: &mut Buffer) {
+    "Ratatui Tabs Example".bold().render(area, buf);
+}
+
+fn render_footer(area: Rect, buf: &mut Buffer) {
+    Line::raw("◄ ► to change tab | Press q to quit")
+        .centered()
+        .render(area, buf);
+}
+
+impl Widget for SelectedTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        // in a real app these might be separate widgets
+        match self {
+            Self::Tab1 => self.render_tab0(area, buf),
+            Self::Tab2 => self.render_tab1(area, buf),
+            Self::Tab3 => self.render_tab2(area, buf),
+            Self::Tab4 => self.render_tab3(area, buf),
+        }
+    }
+}
+
+impl SelectedTab {
+    /// Return tab's name as a styled `Line`
+    fn title(self) -> Line<'static> {
+        format!("  {self}  ")
+            .fg(tailwind::SLATE.c200)
+            .bg(self.palette().c900)
+            .into()
+    }
+
+    fn render_tab0(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Hello, World!")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    fn render_tab1(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Welcome to the Ratatui tabs example!")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    fn render_tab2(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Look! I'm different than others!")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    fn render_tab3(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("I know, these are some basic changes. But I think you got the main idea.")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    /// A block surrounding the tab's content
+    fn block(self) -> Block<'static> {
+        Block::bordered()
+            .border_set(symbols::border::PROPORTIONAL_TALL)
+            .padding(Padding::horizontal(1))
+            .border_style(self.palette().c700)
+    }
+
+    const fn palette(self) -> tailwind::Palette {
+        match self {
+            Self::Tab1 => tailwind::BLUE,
+            Self::Tab2 => tailwind::EMERALD,
+            Self::Tab3 => tailwind::INDIGO,
+            Self::Tab4 => tailwind::RED,
+        }
+    }
 }

examples/tracing.rs

@@ -0,0 +1,111 @@
+//! # [Ratatui] Tracing example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
+
+// A simple example demonstrating how to use the [tracing] with Ratatui to log to a file.
+//
+// This example demonstrates how to use the [tracing] crate with Ratatui to log to a file. The
+// example sets up a simple logger that logs to a file named `tracing.log` in the current directory.
+//
+// Run the example with `cargo run --example tracing` and then view the `tracing.log` file to see
+// the logs. To see more logs, you can run the example with `RUST_LOG=tracing=debug cargo run
+// --example`
+//
+// For a helpful widget that handles logging, see the [tui-logger] crate.
+//
+// [tracing]: https://crates.io/crates/tracing
+// [tui-logger]: https://crates.io/crates/tui-logger
+
+use std::{fs::File, time::Duration};
+
+use color_eyre::{eyre::Context, Result};
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode},
+    widgets::{Block, Paragraph},
+    Frame,
+};
+use tracing::{debug, info, instrument, trace, Level};
+use tracing_appender::{non_blocking, non_blocking::WorkerGuard};
+use tracing_subscriber::EnvFilter;
+
+fn main() -> Result<()> {
+    color_eyre::install()?;
+
+    let _guard = init_tracing()?;
+    info!("Starting tracing example");
+
+    let mut terminal = ratatui::init();
+    let mut events = vec![]; // a buffer to store the recent events to display in the UI
+    while !should_exit(&events) {
+        handle_events(&mut events)?;
+        terminal.draw(|frame| draw(frame, &events))?;
+    }
+    ratatui::restore();
+
+    info!("Exiting tracing example");
+    println!("See the tracing.log file for the logs");
+    Ok(())
+}
+
+fn should_exit(events: &[Event]) -> bool {
+    events
+        .iter()
+        .any(|event| matches!(event, Event::Key(key) if key.code == KeyCode::Char('q')))
+}
+
+/// Handle events and insert them into the events vector keeping only the last 10 events
+#[instrument(skip(events))]
+fn handle_events(events: &mut Vec<Event>) -> Result<()> {
+    // Render the UI at least once every 100ms
+    if event::poll(Duration::from_millis(100))? {
+        let event = event::read()?;
+        debug!(?event);
+        events.insert(0, event);
+    }
+    events.truncate(10);
+    Ok(())
+}
+
+#[instrument(skip_all)]
+fn draw(frame: &mut Frame, events: &[Event]) {
+    // To view this event, run the example with `RUST_LOG=tracing=debug cargo run --example tracing`
+    trace!(frame_count = frame.count(), event_count = events.len());
+    let events = events.iter().map(|e| format!("{e:?}")).collect::<Vec<_>>();
+    let paragraph = Paragraph::new(events.join("\n"))
+        .block(Block::bordered().title("Tracing example. Press 'q' to quit."));
+    frame.render_widget(paragraph, frame.area());
+}
+
+/// Initialize the tracing subscriber to log to a file
+///
+/// This function initializes the tracing subscriber to log to a file named `tracing.log` in the
+/// current directory. The function returns a [`WorkerGuard`] that must be kept alive for the
+/// duration of the program to ensure that logs are flushed to the file on shutdown. The logs are
+/// written in a non-blocking fashion to ensure that the logs do not block the main thread.
+fn init_tracing() -> Result<WorkerGuard> {
+    let file = File::create("tracing.log").wrap_err("failed to create tracing.log")?;
+    let (non_blocking, guard) = non_blocking(file);
+
+    // By default, the subscriber is configured to log all events with a level of `DEBUG` or higher,
+    // but this can be changed by setting the `RUST_LOG` environment variable.
+    let env_filter = EnvFilter::builder()
+        .with_default_directive(Level::DEBUG.into())
+        .from_env_lossy();
+
+    tracing_subscriber::fmt()
+        .with_writer(non_blocking)
+        .with_env_filter(env_filter)
+        .init();
+    Ok(guard)
+}

examples/user_input.rs

@@ -1,29 +1,48 @@
-use std::{error::Error, io};
+//! # [Ratatui] User Input example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui/ratatui
+//! [examples]: https://github.com/ratatui/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui/ratatui/blob/main/examples/README.md
 
-/// A simple example demonstrating how to handle user input. This is
-/// a bit out of the scope of the library as it does not provide any
-/// input handling out of the box. However, it may helps some to get
-/// started.
-///
-/// This is a very simple example:
-///   * An input box always focused. Every character you type is registered
-///   here.
-///   * An entered character is inserted at the cursor position.
-///   * Pressing Backspace erases the left character before the cursor position
-///   * Pressing Enter pushes the current input in the history of previous
-///   messages.
-/// **Note: ** as this is a relatively simple example unicode characters are unsupported and
-/// their use will result in undefined behaviour.
-use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
-    execute,
-    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+// A simple example demonstrating how to handle user input. This is a bit out of the scope of
+// the library as it does not provide any input handling out of the box. However, it may helps
+// some to get started.
+//
+// This is a very simple example:
+//   * An input box always focused. Every character you type is registered here.
+//   * An entered character is inserted at the cursor position.
+//   * Pressing Backspace erases the left character before the cursor position
+//   * Pressing Enter pushes the current input in the history of previous messages. **Note: ** as
+//   this is a relatively simple example unicode characters are unsupported and their use will
+// result in undefined behaviour.
+//
+// See also https://github.com/rhysd/tui-textarea and https://github.com/sayanarijit/tui-input/
+
+use color_eyre::Result;
+use ratatui::{
+    crossterm::event::{self, Event, KeyCode, KeyEventKind},
+    layout::{Constraint, Layout, Position},
+    style::{Color, Modifier, Style, Stylize},
+    text::{Line, Span, Text},
+    widgets::{Block, List, ListItem, Paragraph},
+    DefaultTerminal, Frame,
 };
-use ratatui::{prelude::*, widgets::*};
 
-enum InputMode {
-    Normal,
-    Editing,
+fn main() -> Result<()> {
+    color_eyre::install()?;
+    let terminal = ratatui::init();
+    let app_result = App::new().run(terminal);
+    ratatui::restore();
+    app_result
 }
 
 /// App holds the state of the application
@@ -31,49 +50,64 @@ struct App {
     /// Current value of the input box
     input: String,
     /// Position of cursor in the editor area.
-    cursor_position: usize,
+    character_index: usize,
     /// Current input mode
     input_mode: InputMode,
     /// History of recorded messages
     messages: Vec<String>,
 }
 
-impl Default for App {
-    fn default() -> App {
-        App {
-            input: String::new(),
-            input_mode: InputMode::Normal,
-            messages: Vec::new(),
-            cursor_position: 0,
-        }
-    }
+enum InputMode {
+    Normal,
+    Editing,
 }
 
 impl App {
+    const fn new() -> Self {
+        Self {
+            input: String::new(),
+            input_mode: InputMode::Normal,
+            messages: Vec::new(),
+            character_index: 0,
+        }
+    }
+
     fn move_cursor_left(&mut self) {
-        let cursor_moved_left = self.cursor_position.saturating_sub(1);
-        self.cursor_position = self.clamp_cursor(cursor_moved_left);
+        let cursor_moved_left = self.character_index.saturating_sub(1);
+        self.character_index = self.clamp_cursor(cursor_moved_left);
     }
 
     fn move_cursor_right(&mut self) {
-        let cursor_moved_right = self.cursor_position.saturating_add(1);
-        self.cursor_position = self.clamp_cursor(cursor_moved_right);
+        let cursor_moved_right = self.character_index.saturating_add(1);
+        self.character_index = self.clamp_cursor(cursor_moved_right);
     }
 
     fn enter_char(&mut self, new_char: char) {
-        self.input.insert(self.cursor_position, new_char);
-
+        let index = self.byte_index();
+        self.input.insert(index, new_char);
         self.move_cursor_right();
     }
 
+    /// Returns the byte index based on the character position.
+    ///
+    /// Since each character in a string can be contain multiple bytes, it's necessary to calculate
+    /// the byte index based on the index of the character.
+    fn byte_index(&self) -> usize {
+        self.input
+            .char_indices()
+            .map(|(i, _)| i)
+            .nth(self.character_index)
+            .unwrap_or(self.input.len())
+    }
+
     fn delete_char(&mut self) {
-        let is_not_cursor_leftmost = self.cursor_position != 0;
+        let is_not_cursor_leftmost = self.character_index != 0;
         if is_not_cursor_leftmost {
             // Method "remove" is not used on the saved text for deleting the selected char.
             // Reason: Using remove on String works on bytes instead of the chars.
             // Using remove would require special care because of char boundaries.
 
-            let current_index = self.cursor_position;
+            let current_index = self.character_index;
             let from_left_to_current_index = current_index - 1;
 
             // Getting all characters before the selected character.
@@ -89,11 +123,11 @@ impl App {
     }
 
     fn clamp_cursor(&self, new_cursor_pos: usize) -> usize {
-        new_cursor_pos.clamp(0, self.input.len())
+        new_cursor_pos.clamp(0, self.input.chars().count())
     }
 
     fn reset_cursor(&mut self) {
-        self.cursor_position = 0;
+        self.character_index = 0;
     }
 
     fn submit_message(&mut self) {
@@ -101,148 +135,104 @@ impl App {
         self.input.clear();
         self.reset_cursor();
     }
-}
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
+    fn run(mut self, mut terminal: DefaultTerminal) -> Result<()> {
+        loop {
+            terminal.draw(|frame| self.draw(frame))?;
 
-    // create app and run it
-    let app = App::default();
-    let res = run_app(&mut terminal, app);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
-    }
-
-    Ok(())
-}
-
-fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut app: App) -> io::Result<()> {
-    loop {
-        terminal.draw(|f| ui(f, &app))?;
-
-        if let Event::Key(key) = event::read()? {
-            match app.input_mode {
-                InputMode::Normal => match key.code {
-                    KeyCode::Char('e') => {
-                        app.input_mode = InputMode::Editing;
-                    }
-                    KeyCode::Char('q') => {
-                        return Ok(());
-                    }
-                    _ => {}
-                },
-                InputMode::Editing if key.kind == KeyEventKind::Press => match key.code {
-                    KeyCode::Enter => app.submit_message(),
-                    KeyCode::Char(to_insert) => {
-                        app.enter_char(to_insert);
-                    }
-                    KeyCode::Backspace => {
-                        app.delete_char();
-                    }
-                    KeyCode::Left => {
-                        app.move_cursor_left();
-                    }
-                    KeyCode::Right => {
-                        app.move_cursor_right();
-                    }
-                    KeyCode::Esc => {
-                        app.input_mode = InputMode::Normal;
-                    }
-                    _ => {}
-                },
-                _ => {}
+            if let Event::Key(key) = event::read()? {
+                match self.input_mode {
+                    InputMode::Normal => match key.code {
+                        KeyCode::Char('e') => {
+                            self.input_mode = InputMode::Editing;
+                        }
+                        KeyCode::Char('q') => {
+                            return Ok(());
+                        }
+                        _ => {}
+                    },
+                    InputMode::Editing if key.kind == KeyEventKind::Press => match key.code {
+                        KeyCode::Enter => self.submit_message(),
+                        KeyCode::Char(to_insert) => self.enter_char(to_insert),
+                        KeyCode::Backspace => self.delete_char(),
+                        KeyCode::Left => self.move_cursor_left(),
+                        KeyCode::Right => self.move_cursor_right(),
+                        KeyCode::Esc => self.input_mode = InputMode::Normal,
+                        _ => {}
+                    },
+                    InputMode::Editing => {}
+                }
             }
         }
     }
-}
 
-fn ui(f: &mut Frame, app: &App) {
-    let chunks = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
+    fn draw(&self, frame: &mut Frame) {
+        let vertical = Layout::vertical([
             Constraint::Length(1),
             Constraint::Length(3),
             Constraint::Min(1),
-        ])
-        .split(f.size());
+        ]);
+        let [help_area, input_area, messages_area] = vertical.areas(frame.area());
 
-    let (msg, style) = match app.input_mode {
-        InputMode::Normal => (
-            vec![
-                "Press ".into(),
-                "q".bold(),
-                " to exit, ".into(),
-                "e".bold(),
-                " to start editing.".bold(),
-            ],
-            Style::default().add_modifier(Modifier::RAPID_BLINK),
-        ),
-        InputMode::Editing => (
-            vec![
-                "Press ".into(),
-                "Esc".bold(),
-                " to stop editing, ".into(),
-                "Enter".bold(),
-                " to record the message".into(),
-            ],
-            Style::default(),
-        ),
-    };
-    let mut text = Text::from(Line::from(msg));
-    text.patch_style(style);
-    let help_message = Paragraph::new(text);
-    f.render_widget(help_message, chunks[0]);
+        let (msg, style) = match self.input_mode {
+            InputMode::Normal => (
+                vec![
+                    "Press ".into(),
+                    "q".bold(),
+                    " to exit, ".into(),
+                    "e".bold(),
+                    " to start editing.".bold(),
+                ],
+                Style::default().add_modifier(Modifier::RAPID_BLINK),
+            ),
+            InputMode::Editing => (
+                vec![
+                    "Press ".into(),
+                    "Esc".bold(),
+                    " to stop editing, ".into(),
+                    "Enter".bold(),
+                    " to record the message".into(),
+                ],
+                Style::default(),
+            ),
+        };
+        let text = Text::from(Line::from(msg)).patch_style(style);
+        let help_message = Paragraph::new(text);
+        frame.render_widget(help_message, help_area);
 
-    let input = Paragraph::new(app.input.as_str())
-        .style(match app.input_mode {
-            InputMode::Normal => Style::default(),
-            InputMode::Editing => Style::default().fg(Color::Yellow),
-        })
-        .block(Block::default().borders(Borders::ALL).title("Input"));
-    f.render_widget(input, chunks[1]);
-    match app.input_mode {
-        InputMode::Normal =>
+        let input = Paragraph::new(self.input.as_str())
+            .style(match self.input_mode {
+                InputMode::Normal => Style::default(),
+                InputMode::Editing => Style::default().fg(Color::Yellow),
+            })
+            .block(Block::bordered().title("Input"));
+        frame.render_widget(input, input_area);
+        match self.input_mode {
             // Hide the cursor. `Frame` does this by default, so we don't need to do anything here
-            {}
+            InputMode::Normal => {}
 
-        InputMode::Editing => {
             // Make the cursor visible and ask ratatui to put it at the specified coordinates after
             // rendering
-            f.set_cursor(
+            #[allow(clippy::cast_possible_truncation)]
+            InputMode::Editing => frame.set_cursor_position(Position::new(
                 // Draw the cursor at the current position in the input field.
                 // This position is can be controlled via the left and right arrow key
-                chunks[1].x + app.cursor_position as u16 + 1,
+                input_area.x + self.character_index as u16 + 1,
                 // Move one line down, from the border to the input line
-                chunks[1].y + 1,
-            )
+                input_area.y + 1,
+            )),
         }
-    }
 
-    let messages: Vec<ListItem> = app
-        .messages
-        .iter()
-        .enumerate()
-        .map(|(i, m)| {
-            let content = Line::from(Span::raw(format!("{i}: {m}")));
-            ListItem::new(content)
-        })
-        .collect();
-    let messages =
-        List::new(messages).block(Block::default().borders(Borders::ALL).title("Messages"));
-    f.render_widget(messages, chunks[2]);
+        let messages: Vec<ListItem> = self
+            .messages
+            .iter()
+            .enumerate()
+            .map(|(i, m)| {
+                let content = Line::from(Span::raw(format!("{i}: {m}")));
+                ListItem::new(content)
+            })
+            .collect();
+        let messages = List::new(messages).block(Block::bordered().title("Messages"));
+        frame.render_widget(messages, messages_area);
+    }
 }

examples/vhs/barchart-grouped.tape

@@ -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 ./examples/barchart.tape`
+Output "target/barchart-grouped.gif"
+Set Theme "Aardvark Blue"
+Set Width 1200
+Set Height 1000
+Hide
+Type "cargo run --example=barchart-grouped"
+Enter
+Sleep 1s
+Show
+Sleep 1s

examples/vhs/barchart.tape

@@ -3,10 +3,10 @@
 Output "target/barchart.gif"
 Set Theme "Aardvark Blue"
 Set Width 1200
-Set Height 800
+Set Height 600
 Hide
 Type "cargo run --example=barchart"
 Enter
 Sleep 1s
 Show
-Sleep 5s
+Sleep 1s

examples/vhs/constraint-explorer.tape

@@ -0,0 +1,30 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/constraint-explorer.tape`
+Output "target/constraint-explorer.gif"
+Set Theme "Aardvark Blue"
+Set FontSize 18
+Set Width 1200
+Set Height 950
+Hide
+Type "cargo run --example=constraint-explorer --features=crossterm"
+Enter
+Sleep 2s
+Show
+Set TypingSpeed 2s
+Type "1"
+Type "2"
+Right
+Type "4"
+Type "5"
+Up
+Up
+Down
+Down
+Right
+Set TypingSpeed 0.5s
+Type "++++++++"
+Type "--------"
+Type "aaa"
+Sleep 2s
+Type "xxx"
+Hide