feat(line): add Line::raw constructor (#511)

* feat(line): add `Line::raw` constructor

There is already `Span::raw` and `Text::raw` methods
and this commit simply adds `Line::raw` method for symmetry.

Multi-line content is converted to multiple spans with the new line removed

.github/workflows/cd.yml

@@ -1,18 +1,85 @@
 name: Continuous Deployment
 
 on:
+  workflow_dispatch:
+  schedule:
+    # At 00:00 on Saturday
+    # https://crontab.guru/#0_0_*_*_6
+    - cron: "0 0 * * 6"
   push:
     tags:
       - "v*.*.*"
 
+defaults:
+  run:
+    shell: bash
+
 jobs:
-  publish:
-    name: Publish on crates.io
+  publish-alpha:
+    name: Create an alpha release
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    if: ${{ !startsWith(github.event.ref, 'refs/tags/v') }}
     steps:
       - name: Checkout the repository
         uses: actions/checkout@v3
-      - name: Publish
+        with:
+          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} 🐭"
+
+      - name: Publish on crates.io
+        uses: actions-rs/cargo@v1
+        with:
+          command: publish
+          args: --allow-dirty --token ${{ secrets.CARGO_TOKEN }}
+
+      - name: Generate a changelog
+        uses: orhun/git-cliff-action@v2
+        with:
+          config: cliff.toml
+          args: --unreleased --tag ${{ env.NEXT_TAG }} --strip header
+        env:
+          OUTPUT: BODY.md
+
+      - name: Publish on GitHub
+        uses: ncipollo/release-action@v1
+        with:
+          tag: ${{ env.NEXT_TAG }}
+          prerelease: true
+          bodyFile: BODY.md
+
+  publish-stable:
+    name: Create a stable release
+    runs-on: ubuntu-latest
+    if: ${{ startsWith(github.event.ref, 'refs/tags/v') }}
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+
+      - name: Publish on crates.io
         uses: actions-rs/cargo@v1
         with:
           command: publish

.github/workflows/check-pr.yml

@@ -0,0 +1,83 @@
+name: Check Pull Requests
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - labeled
+      - unlabeled
+  merge_group:
+
+permissions:
+  pull-requests: write
+
+jobs:
+  check-title:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check PR title
+        if: github.event_name == 'pull_request_target'
+        uses: amannn/action-semantic-pull-request@v5
+        id: check_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      # Add comment indicating we require pull request titles to follow conventional commits specification
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: always() && (steps.check_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Thank you for opening this pull request!
+
+            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
+
+            Details:
+
+            > ${{ steps.check_pr_title.outputs.error_message }}
+
+      # Delete a previous comment when the issue has been resolved
+      - if: ${{ steps.check_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          delete: true
+
+  check-breaking-change-label:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Check breaking change label
+      id: check_breaking_change
+      run: |
+        pattern='^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\(\w+\))?!:'
+        # Check if pattern matches
+        if echo "${{ github.event.pull_request.title }}" | grep -qE "$pattern"; then
+          echo "breaking_change=true" >> $GITHUB_OUTPUT
+        else
+          echo "breaking_change=false" >> $GITHUB_OUTPUT
+        fi
+    - name: Add label
+      if: steps.check_breaking_change.outputs.breaking_change == 'true'
+      uses: actions/github-script@v6
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        script: |
+          github.rest.issues.addLabels({
+            issue_number: context.issue.number,
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            labels: ['breaking change']
+          })
+
+  do-not-merge:
+    if: ${{ contains(github.event.*.labels.*.name, 'do not merge') }}
+    name: Prevent Merging
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for label
+        run: |
+          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/ci.yml

@@ -1,4 +1,4 @@
-name: CI
+name: Continuous Integration
 
 on:
   # Allows you to run this workflow manually from the Actions tab
@@ -36,6 +36,16 @@ jobs:
         uses: actions/checkout@v3
         with:
           ref: ${{ github.event.pull_request.head.sha }}
+      - name: Install Rust nightly
+        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:
@@ -45,14 +55,6 @@ jobs:
         uses: crate-ci/typos@master
       - name: Lint dependencies
         uses: EmbarkStudios/cargo-deny-action@v1
-      - name: Install Rust nightly
-        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 fmt
 
   clippy:
     runs-on: ubuntu-latest
@@ -91,9 +93,10 @@ jobs:
 
   check:
     strategy:
+      fail-fast: false
       matrix:
         os: [ ubuntu-latest, windows-latest, macos-latest ]
-        toolchain: [ "1.65.0", "stable" ]
+        toolchain: [ "1.67.0", "stable" ]
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout
@@ -111,6 +114,7 @@ jobs:
 
   test-doc:
     strategy:
+      fail-fast: false
       matrix:
         os: [ ubuntu-latest, windows-latest, macos-latest ]
     runs-on: ${{ matrix.os }}
@@ -128,9 +132,10 @@ jobs:
 
   test:
     strategy:
+      fail-fast: false
       matrix:
         os: [ ubuntu-latest, windows-latest, macos-latest ]
-        toolchain: [ "1.65.0", "stable" ]
+        toolchain: [ "1.67.0", "stable" ]
         backend: [ crossterm, termion, termwiz ]
         exclude:
           # termion is not supported on windows

.markdownlint.yaml

@@ -1,9 +1,15 @@
 # configuration for https://github.com/DavidAnson/markdownlint
 
+first-line-heading: false
 no-inline-html:
   allowed_elements:
     - img
     - details
     - summary
+    - div
+    - br
 line-length:
   line_length: 100
+
+# to support repeated headers in the changelog
+no-duplicate-heading: false

CONTRIBUTING.md

@@ -29,6 +29,11 @@ change becomes a place where a bug may have been introduced. Consider splitting
 reformatting changes into a separate PR from those that make a behavioral change, as the tests help
 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).
+
 ### Search `tui-rs` for similar work
 
 The original fork of Ratatui, [`tui-rs`](https://github.com/fdehau/tui-rs/), has a large amount of
@@ -113,6 +118,59 @@ exist to show coverage directly in your editor. E.g.:
 - <https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters>
 - <https://github.com/alepez/vim-llvmcov>
 
+### Documentation
+
+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
+concepts.
+
+#### Content
+
+The main doc comment should talk about the general features that the widget supports and introduce
+the concepts pointing to the various methods. Focus on interaction with various features and giving
+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:
+
+```rust
+let style = Style::new().red().bold();
+// not
+let style = Style::default().fg(Color::Red).add_modifier(Modifiers::BOLD);
+```
+
+#### Format
+
+- First line is summary, second is blank, third onward is more detail  
+
+```rust
+/// Summary
+///
+/// A detailed description
+/// with examples.
+fn foo() {}
+```
+
+- Max line length is 100 characters  
+See [vscode rewrap extension](https://marketplace.visualstudio.com/items?itemName=stkb.rewrap)
+
+- Doc comments are above macros  
+i.e.
+
+```rust
+/// doc comment
+#[derive(Debug)]
+struct Foo {}
+```
+
+- Code items should be between backticks  
+i.e. ``[`Block`]``, **NOT** ``[Block]``
+
 ### 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

Cargo.toml

@@ -1,8 +1,8 @@
 [package]
 name = "ratatui"
-version = "0.22.0"
+version = "0.23.0" # crate version
 authors = ["Florian Dehau <work@fdehau.com>", "The Ratatui Developers"]
-description = "A library to build rich terminal user interfaces or dashboards"
+description = "A library that's all about cooking up terminal user interfaces"
 documentation = "https://docs.rs/ratatui/latest/ratatui/"
 keywords = ["tui", "terminal", "dashboard"]
 repository = "https://github.com/ratatui-org/ratatui"
@@ -18,49 +18,92 @@ exclude = [
 ]
 autoexamples = true
 edition = "2021"
-rust-version = "1.65.0"
+rust-version = "1.67.0"
 
 [badges]
 
+[dependencies]
+#! The crate provides a set of optional features that can be enabled in your `cargo.toml` file.
+#!
+#! 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].
+crossterm = { version = "0.27", optional = true }
+## enables the [`TermionBackend`] backend and adds a dependency on the [Termion crate].
+termion = { version = "2.0", optional = true }
+## enables the [`TermwizBackend`] backend and adds a dependency on the [Termwiz crate].
+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.11"
+paste = "1.0.2"
+strum = { version = "0.25", features = ["derive"] }
+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.11.1"
+
+[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",
+] }
+criterion = { version = "0.5.1", features = ["html_reports"] }
+fakeit = "1.1"
+rand = "0.8.5"
+palette = "0.7.3"
+pretty_assertions = "1.4.0"
+
 [features]
 default = ["crossterm"]
-all-widgets = ["widget-calendar"]
-widget-calendar = ["time"]
-macros = []
+#! The following optional features are available for all backends:
+## 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"]
 
+## enables the [`border!`] macro.
+macros = []
+
+## 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].
+widget-calendar = ["dep:time"]
+
 [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"]
 
-[dependencies]
-bitflags = "2.3"
-cassowary = "0.3"
-crossterm = { version = "0.26", optional = true }
-indoc = "2.0"
-paste = "1.0.2"
-serde = { version = "1", optional = true, features = ["derive"] }
-termion = { version = "2.0", optional = true }
-termwiz = { version = "0.20.0", optional = true }
-time = { version = "0.3.11", optional = true, features = ["local-offset"] }
-unicode-segmentation = "1.10"
-unicode-width = "0.1"
+[[bench]]
+name = "barchart"
+harness = false
 
-[dev-dependencies]
-anyhow = "1.0.71"
-argh = "0.1"
-cargo-husky = { version = "1.5.0", default-features = false, features = ["user-hooks"] }
-criterion = { version = "0.5", features = ["html_reports"] }
-fakeit = "1.1"
-itertools = "0.10"
-rand = "0.8"
+[[bench]]
+name = "block"
+harness = false
+
+[[bench]]
+name = "list"
+harness = false
 
 [[bench]]
 name = "paragraph"
 harness = false
 
+[[bench]]
+name = "sparkline"
+harness = false
+
+
 [[example]]
 name = "barchart"
 required-features = ["crossterm"]
@@ -86,6 +129,17 @@ name = "chart"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
+[[example]]
+name = "colors"
+required-features = ["crossterm"]
+# this example is a bit verbose, so we don't want to include it in the docs
+doc-scrape-examples = false
+
+[[example]]
+name = "colors_rgb"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
 [[example]]
 name = "custom_widget"
 required-features = ["crossterm"]
@@ -96,6 +150,11 @@ name = "demo"
 # this runs for all of the terminal backends, so it can't be built using --all-features or scraped
 doc-scrape-examples = false
 
+[[example]]
+name = "demo2"
+required-features = ["crossterm", "widget-calendar"]
+doc-scrape-examples = true
+
 [[example]]
 name = "gauge"
 required-features = ["crossterm"]
@@ -116,6 +175,12 @@ name = "list"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
+[[example]]
+name = "modifiers"
+required-features = ["crossterm"]
+# this example is a bit verbose, so we don't want to include it in the docs
+doc-scrape-examples = false
+
 [[example]]
 name = "panic"
 required-features = ["crossterm"]

Makefile.toml

@@ -7,159 +7,149 @@ skip_core_tasks = true
 # 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
+# Other: --all-features
+ALL_FEATURES_FLAG = { source = "${CARGO_MAKE_RUST_TARGET_OS}", default_value = "--all-features", mapping = { "windows" = "--features=all-widgets,macros,serde,crossterm,termwiz" } }
+
 [tasks.default]
 alias = "ci"
 
 [tasks.ci]
-dependencies = [
-  "style-check",
-  "clippy",
-  "check",
-  "test",
-]
+description = "Run continuous integration tasks"
+dependencies = ["lint-style", "clippy", "check", "test"]
 
-[tasks.style-check]
-dependencies = ["fmt", "typos"]
+[tasks.lint-style]
+description = "Lint code style (formatting, typos, docs)"
+dependencies = ["lint-format", "lint-typos", "lint-docs"]
 
-[tasks.fmt]
+[tasks.lint-format]
+description = "Lint code formatting"
 toolchain = "nightly"
 command = "cargo"
 args = ["fmt", "--all", "--check"]
 
-[tasks.typos]
+[tasks.format]
+description = "Fix code formatting"
+toolchain = "nightly"
+command = "cargo"
+args = ["fmt", "--all"]
+
+[tasks.lint-typos]
+description = "Run typo checks"
 install_crate = { crate_name = "typos-cli", binary = "typos", test_arg = "--version" }
 command = "typos"
 
+[tasks.lint-docs]
+description = "Check documentation for errors and warnings"
+toolchain = "nightly"
+command = "cargo"
+args = [
+  "rustdoc",
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
+  "--",
+  "-Zunstable-options",
+  "--check",
+  "-Dwarnings",
+]
+
 [tasks.check]
+description = "Check code for errors and warnings"
 command = "cargo"
 args = [
   "check",
   "--all-targets",
-  "--all-features"
-]
-
-[tasks.check.windows]
-args = [
-  "check",
-  "--all-targets",
-  "--no-default-features", "--features", "${ALL_FEATURES},crossterm,termwiz"
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
 ]
 
 [tasks.build]
+description = "Compile the project"
 command = "cargo"
 args = [
   "build",
   "--all-targets",
-  "--all-features",
-]
-
-[tasks.build.windows]
-args = [
-  "build",
-  "--all-targets",
-  "--no-default-features", "--features", "${ALL_FEATURES},crossterm,termwiz"
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
 ]
 
 [tasks.clippy]
+description = "Run Clippy for linting"
 command = "cargo"
 args = [
   "clippy",
   "--all-targets",
   "--tests",
   "--benches",
-  "--all-features",
-  "--",
-  "-D",
-  "warnings",
-]
-
-[tasks.clippy.windows]
-args = [
-  "clippy",
-  "--all-targets",
-  "--tests",
-  "--benches",
-  "--no-default-features", "--features", "${ALL_FEATURES},crossterm,termwiz",
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
   "--",
   "-D",
   "warnings",
 ]
 
 [tasks.test]
-dependencies = [
-  "test-doc",
-]
+description = "Run tests"
+dependencies = ["test-doc"]
 command = "cargo"
 args = [
   "test",
   "--all-targets",
-  "--all-features",
-]
-
-
-[tasks.test-windows]
-dependencies = [
-  "test-doc",
-]
-args = [
-  "test",
-  "--all-targets",
-  "--no-default-features", "--features", "${ALL_FEATURES},crossterm,termwiz"
+  "--no-default-features",
+  "${ALL_FEATURES_FLAG}",
 ]
 
 [tasks.test-doc]
+description = "Run documentation tests"
 command = "cargo"
-args = [
-  "test", "--doc",
-  "--all-features",
-]
-
-[tasks.test-doc.windows]
-args = [
-  "test", "--doc",
-  "--no-default-features", "--features", "${ALL_FEATURES},crossterm,termwiz"
-]
+args = ["test", "--doc", "--no-default-features", "${ALL_FEATURES_FLAG}"]
 
 [tasks.test-backend]
 # takes a command line parameter to specify the backend to test (e.g. "crossterm")
+description = "Run backend-specific tests"
 command = "cargo"
 args = [
   "test",
   "--all-targets",
-  "--no-default-features", "--features", "${ALL_FEATURES},${@}"
+  "--no-default-features",
+  "--features",
+  "${ALL_FEATURES},${@}",
 ]
 
-
 [tasks.coverage]
+description = "Generate code coverage report"
 command = "cargo"
 args = [
   "llvm-cov",
   "--lcov",
-  "--output-path", "target/lcov.info",
-  "--all-features",
-]
-
-[tasks.coverage.windows]
-command = "cargo"
-args = [
-  "llvm-cov",
-  "--lcov",
-  "--output-path", "target/lcov.info",
+  "--output-path",
+  "target/lcov.info",
   "--no-default-features",
-  "--features", "${ALL_FEATURES},crossterm,termwiz",
+  "${ALL_FEATURES_FLAG}",
 ]
 
 [tasks.run-example]
 private = true
 condition = { env_set = ["TUI_EXAMPLE_NAME"] }
 command = "cargo"
-args = ["run", "--release", "--example", "${TUI_EXAMPLE_NAME}", "--features", "all-widgets"]
+args = [
+  "run",
+  "--release",
+  "--example",
+  "${TUI_EXAMPLE_NAME}",
+  "--features",
+  "all-widgets",
+]
 
 [tasks.build-examples]
+description = "Compile project examples"
 command = "cargo"
 args = ["build", "--examples", "--release", "--features", "all-widgets"]
 
 [tasks.run-examples]
+description = "Run project examples"
 dependencies = ["build-examples"]
 script = '''
 #!@duckscript

README.md

@@ -1,22 +1,36 @@
-# Ratatui
+![Demo of
+Ratatui](https://raw.githubusercontent.com/ratatui-org/ratatui/aa09e59dc0058347f68d7c1e0c91f863c6f2b8c9/examples/demo2.gif)
+<!--
+Permalink to https://github.com/ratatui-org/ratatui/blob/images/examples/demo2.gif
+See RELEASE.md for instructions on creating the demo gif
+--->
 
-<img align="left" src="https://avatars.githubusercontent.com/u/125200832?s=128&v=4">
-
-`ratatui` is a [Rust](https://www.rust-lang.org) library to build rich terminal user interfaces and
-dashboards. It is a community fork of the original [tui-rs](https://github.com/fdehau/tui-rs)
-project.
+<div align="center">
 
 [![Crates.io](https://img.shields.io/crates/v/ratatui?logo=rust&style=flat-square)](https://crates.io/crates/ratatui)
 [![License](https://img.shields.io/crates/l/ratatui?style=flat-square)](./LICENSE) [![GitHub CI
 Status](https://img.shields.io/github/actions/workflow/status/ratatui-org/ratatui/ci.yml?style=flat-square&logo=github)](https://github.com/ratatui-org/ratatui/actions?query=workflow%3ACI+)
-[![Docs.rs](https://img.shields.io/docsrs/ratatui?logo=rust&style=flat-square)](https://docs.rs/crate/ratatui/)  
+[![Docs.rs](https://img.shields.io/docsrs/ratatui?logo=rust&style=flat-square)](https://docs.rs/crate/ratatui/)<br>
 [![Dependency
 Status](https://deps.rs/repo/github/ratatui-org/ratatui/status.svg?style=flat-square)](https://deps.rs/repo/github/ratatui-org/ratatui)
 [![Codecov](https://img.shields.io/codecov/c/github/ratatui-org/ratatui?logo=codecov&style=flat-square&token=BAQ8SOKEST)](https://app.codecov.io/gh/ratatui-org/ratatui)
 [![Discord](https://img.shields.io/discord/1070692720437383208?label=discord&logo=discord&style=flat-square)](https://discord.gg/pMCEU9hNEj)
+[![Matrix](https://img.shields.io/matrix/ratatui-general%3Amatrix.org?style=flat-square&logo=matrix&label=Matrix)](https://matrix.to/#/#ratatui:matrix.org)<br>
+[Documentation](https://docs.rs/ratatui)
+· [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)
 
-<!-- See RELEASE.md for instructions on creating the demo gif --->
-![Demo of Ratatui](https://github.com/ratatui-org/ratatui/assets/24392180/93ab0e38-93e0-4ae0-a31b-91ae6c393185)
+</div>
+
+<img align="left" src="https://avatars.githubusercontent.com/u/125200832?s=128&v=4">
+
+# Ratatui
+
+`ratatui` is a [Rust](https://www.rust-lang.org) library that is all about cooking up terminal user
+interfaces. It is a community fork of the original [tui-rs](https://github.com/fdehau/tui-rs)
+project.
 
 <details>
 <summary>Table of Contents</summary>
@@ -51,16 +65,7 @@ Or modify your `Cargo.toml`
 
 ```toml
 [dependencies]
-ratatui = { version = "0.22.0", features = ["all-widgets"]}
-```
-
-Ratatui is mostly backwards compatible with `tui-rs`. To migrate an existing project, it may be
-easier to rename the ratatui dependency to `tui` rather than updating every usage of the crate.
-E.g.:
-
-```toml
-[dependencies]
-tui = { package = "ratatui", version = "0.22.0", features = ["all-widgets"]}
+ratatui = { version = "0.23.0", features = ["all-widgets"]}
 ```
 
 ## Introduction
@@ -140,17 +145,19 @@ the community forked the project and created this crate. We look forward to cont
 started by Florian 🚀
 
 In order to organize ourselves, we currently use a [Discord server](https://discord.gg/pMCEU9hNEj),
-feel free to join and come chat! There are also plans to implement a [Matrix](https://matrix.org/)
-bridge in the near future. **Discord is not a MUST to contribute**. We follow a pretty standard
-github centered open source workflow keeping the most important conversations on GitHub, open an
-issue or PR and it will be addressed. 😄
+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.
 
 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.21.0, The Minimum Supported Rust Version (MSRV) of `ratatui` is 1.65.0.
+Since version 0.23.0, The Minimum Supported Rust Version (MSRV) of `ratatui` is 1.67.0.
 
 ## Documentation
 
@@ -214,9 +221,9 @@ be installed with `cargo install cargo-make`).
 ### Third-party libraries, bootstrapping templates and widgets
 
 * [ansi-to-tui](https://github.com/uttarayan21/ansi-to-tui) — Convert ansi colored text to
-  `tui::text::Text`
+  `ratatui::text::Text`
 * [color-to-tui](https://github.com/uttarayan21/color-to-tui) — Parse hex colors to
-  `tui::style::Color`
+  `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
 * [simple-tui-rs](https://github.com/pmsanford/simple-tui-rs) — A simple example tui-rs app

RELEASE.md

@@ -3,24 +3,21 @@
 [crates.io](https://crates.io/crates/ratatui) releases are automated via [GitHub
 actions](.github/workflows/cd.yml) and triggered by pushing a tag.
 
-1. Record a new demo gif. The preferred tool for this is [ttyrec](http://0xcc.net/ttyrec/) and
-   [ttygif](https://github.com/icholy/ttygif). [Asciinema](https://asciinema.org/) handles block
-   character height poorly, [termanilizer](https://www.terminalizer.com/) takes forever to render,
-   [vhs](https://github.com/charmbracelet/vhs) handles braille
-   characters poorly (though if <https://github.com/charmbracelet/vhs/issues/322> is fixed, then
-   it's probably the best option).
+1. Record a new demo gif if necessary. The preferred tool for this is
+[vhs](https://github.com/charmbracelet/vhs) (installation instructions in README).
 
    ```shell
-   cargo build --example demo
-   ttyrec -e 'cargo --quiet run --release --example demo -- --tick-rate 100' demo.rec
-   ttygif demo.rec
+   cargo build --example demo2
+   vhs examples/demo2.tape
    ```
 
-   Then upload it somewhere (e.g. use `vhs publish tty.gif` to publish it or upload it to a GitHub
-   wiki page as an attachment). Avoid adding the gif to the git repo as binary files tend to bloat
-   repositories.
+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
+   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.
 
 1. Bump the version in [Cargo.toml](Cargo.toml).
+1. Bump versions in the doc comments of [lib.rs](src/lib.rs).
 1. Ensure [CHANGELOG.md](CHANGELOG.md) is updated. [git-cliff](https://github.com/orhun/git-cliff)
    can be used for generating the entries.
 1. Commit and push the changes.

benches/barchart.rs

@@ -0,0 +1,73 @@
+use criterion::{criterion_group, criterion_main, Bencher, BenchmarkId, Criterion};
+use rand::Rng;
+use ratatui::{
+    buffer::Buffer,
+    layout::Rect,
+    prelude::Direction,
+    widgets::{Bar, BarChart, BarGroup, Widget},
+};
+
+/// Benchmark for rendering a barchart.
+pub fn barchart(c: &mut Criterion) {
+    let mut group = c.benchmark_group("barchart");
+    let mut rng = rand::thread_rng();
+
+    for data_count in [64, 256, 2048] {
+        let data: Vec<Bar> = (0..data_count)
+            .map(|i| {
+                Bar::default()
+                    .label(format!("B{i}").into())
+                    .value(rng.gen_range(0..data_count))
+            })
+            .collect();
+
+        let bargroup = BarGroup::default().bars(&data);
+
+        // Render a basic barchart
+        group.bench_with_input(
+            BenchmarkId::new("render", data_count),
+            &BarChart::default().data(bargroup.clone()),
+            render,
+        );
+
+        // Render an horizontal barchart
+        group.bench_with_input(
+            BenchmarkId::new("render_horizontal", data_count),
+            &BarChart::default()
+                .direction(Direction::Horizontal)
+                .data(bargroup.clone()),
+            render,
+        );
+
+        // Render a barchart with multiple groups
+        group.bench_with_input(
+            BenchmarkId::new("render_grouped", data_count),
+            &BarChart::default()
+                // We call `data` multiple time to add multiple groups.
+                // This is not a duplicated call.
+                .data(bargroup.clone())
+                .data(bargroup.clone())
+                .data(bargroup.clone()),
+            render,
+        );
+    }
+
+    group.finish();
+}
+
+/// Render the widget in a classical size buffer
+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.
+    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/block.rs

@@ -0,0 +1,64 @@
+use criterion::{criterion_group, criterion_main, BatchSize, Bencher, BenchmarkId, Criterion};
+use ratatui::{
+    buffer::Buffer,
+    layout::Rect,
+    prelude::Alignment,
+    widgets::{
+        block::{Position, Title},
+        Block, Borders, Padding, Widget,
+    },
+};
+
+/// Benchmark for rendering a block.
+pub 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
+    ] {
+        let buffer_area = buffer_size.area();
+
+        // Render an empty block
+        group.bench_with_input(
+            BenchmarkId::new("render_empty", buffer_area),
+            &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)
+                .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),
+        );
+    }
+
+    group.finish();
+}
+
+/// 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);
+    // We use `iter_batched` to clone the value in the setup function.
+    // See https://github.com/ratatui-org/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/list.rs

@@ -0,0 +1,73 @@
+use criterion::{criterion_group, criterion_main, BatchSize, Bencher, BenchmarkId, Criterion};
+use ratatui::{
+    buffer::Buffer,
+    layout::Rect,
+    widgets::{List, ListItem, ListState, StatefulWidget, Widget},
+};
+
+/// Benchmark for rendering a list.
+/// It only benchmarks the render with a different amount of items.
+pub fn list(c: &mut Criterion) {
+    let mut group = c.benchmark_group("list");
+
+    for line_count in [64, 2048, 16384] {
+        let lines: Vec<ListItem> = (0..line_count)
+            .map(|_| ListItem::new(fakeit::words::sentence(10)))
+            .collect();
+
+        // Render default list
+        group.bench_with_input(
+            BenchmarkId::new("render", line_count),
+            &List::new(lines.clone()),
+            render,
+        );
+
+        // Render with an offset to the middle of the list and a selected item
+        group.bench_with_input(
+            BenchmarkId::new("render_scroll_half", line_count),
+            &List::new(lines.clone()).highlight_symbol(">>"),
+            |b, list| {
+                render_stateful(
+                    b,
+                    list,
+                    ListState::default()
+                        .with_offset(line_count / 2)
+                        .with_selected(Some(line_count / 2)),
+                )
+            },
+        );
+    }
+
+    group.finish();
+}
+
+/// render the list into a common size buffer
+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.
+    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.
+    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/paragraph.rs

@@ -1,4 +1,6 @@
-use criterion::{black_box, criterion_group, criterion_main, Bencher, BenchmarkId, Criterion};
+use criterion::{
+    black_box, criterion_group, criterion_main, BatchSize, Bencher, BenchmarkId, Criterion,
+};
 use ratatui::{
     buffer::Buffer,
     layout::Rect,
@@ -69,9 +71,15 @@ pub fn paragraph(c: &mut Criterion) {
 /// render the paragraph into a buffer with the given width
 fn render(bencher: &mut Bencher, paragraph: &Paragraph, width: u16) {
     let mut buffer = Buffer::empty(Rect::new(0, 0, width, 50));
-    bencher.iter(|| {
-        paragraph.clone().render(buffer.area, &mut buffer);
-    })
+    // We use `iter_batched` to clone the value in the setup function.
+    // See https://github.com/ratatui-org/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

benches/sparkline.rs

@@ -0,0 +1,45 @@
+use criterion::{criterion_group, criterion_main, Bencher, BenchmarkId, Criterion};
+use rand::Rng;
+use ratatui::{
+    buffer::Buffer,
+    layout::Rect,
+    widgets::{Sparkline, Widget},
+};
+
+/// Benchmark for rendering a sparkline.
+pub fn sparkline(c: &mut Criterion) {
+    let mut group = c.benchmark_group("sparkline");
+    let mut rng = rand::thread_rng();
+
+    for data_count in [64, 256, 2048] {
+        let data: Vec<u64> = (0..data_count)
+            .map(|_| rng.gen_range(0..data_count))
+            .collect();
+
+        // Render a basic sparkline
+        group.bench_with_input(
+            BenchmarkId::new("render", data_count),
+            &Sparkline::default().data(&data),
+            render,
+        );
+    }
+
+    group.finish();
+}
+
+/// render the block into a buffer of the given `size`
+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.
+    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

@@ -3,35 +3,51 @@
 [changelog]
 # changelog header
 header = """
-# Changelog\n
-All notable changes to this project will be documented in this file.\n
+# Changelog
+
+All notable changes to this project will be documented in this file.
 """
 # template for the changelog body
-# https://tera.netlify.app/docs/#introduction
+# https://keats.github.io/tera/docs/#introduction
+# note that the - before / after the % controls whether whitespace is rendered between each line.
+# Getting this right so that the markdown renders with the correct number of lines between headings
+# code fences and list items is pretty finicky. Note also that the 4 backticks in the commit macro
+# is intentional as this escapes any backticks in the commit body.
 body = """
-{% if version %}\
-    ## {{ version }} - {{ timestamp | date(format="%Y-%m-%d") }}
-{% else %}\
-    ## [unreleased]
-{% endif %}\
+{%- if not version %}
+## [unreleased]
+{% else -%}
+## [{{ version }}](https://github.com/ratatui-org/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 }}
+{%- if commit.breaking %} [**breaking**]{% endif %}
+{%- if commit.body %}
+
+  ````text {#- 4 backticks escape any backticks in body #}
+  {{commit.body | indent(prefix="  ") }}
+  ````
+{%- endif %}
+{% endmacro -%}
+
 {% for group, commits in commits | group_by(attribute="group") %}
-    ### {{ group | striptags | trim | upper_first }}
-    {% for commit in commits
-    | filter(attribute="scope")
-    | sort(attribute="scope") %}
-        - *({{commit.scope}})* {{ commit.message | upper_first }}{% if commit.breaking %} [**breaking**]{% endif %}
-    {%- endfor -%}
-    {% raw %}\n{% endraw %}\
-    {%- for commit in commits %}
-        {%- if commit.scope -%}
-        {% else -%}
-            - *(uncategorized)* {{ commit.message | upper_first }}{% if commit.breaking %} [**breaking**]{% endif %}
-        {% endif -%}
-    {% endfor -%}
-{% endfor %}\n
+### {{ group | striptags | trim | upper_first }}
+{% for commit in commits | filter(attribute="scope") | sort(attribute="scope") %}
+{{ self::commit(commit=commit) }}
+{%- endfor -%}
+{% for commit in commits %}
+{%- if not commit.scope %}
+{{ self::commit(commit=commit) }}
+{%- endif -%}
+{%- endfor -%}
+{%- endfor %}
 """
+
+
 # remove the leading and trailing whitespace from the template
-trim = true
+trim = false
 # changelog footer
 footer = """
 <!-- generated by git-cliff -->
@@ -46,29 +62,32 @@ 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 = '(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}" },
-    { pattern = '(fix typos|Fix typos)', replace = "fix: ${1}" },
+  { pattern = '\((\w+\s)?#([0-9]+)\)', replace = "([#${2}](https://github.com/ratatui-org/ratatui/issues/${2}))" },
+  { 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}" },
+  { pattern = '(fix typos|Fix typos)', replace = "fix: ${1}" },
 ]
 # regex for parsing and grouping commits
 commit_parsers = [
-    { message = "^feat", group = "<!-- 00 -->Features" },
-    { message = "^[fF]ix", group = "<!-- 01 -->Bug Fixes" },
-    { message = "^refactor", group = "<!-- 02 -->Refactor" },
-    { message = "^doc", group = "<!-- 03 -->Documentation" },
-    { message = "^perf", group = "<!-- 04 -->Performance" },
-    { message = "^style", group = "<!-- 05 -->Styling" },
-    { message = "^test", group = "<!-- 06 -->Testing" },
-    { message = "^chore\\(release\\): prepare for", skip = true },
-    { message = "^chore\\(pr\\)", skip = true },
-    { message = "^chore\\(pull\\)", skip = true },
-    { message = "^chore", group = "<!-- 07 -->Miscellaneous Tasks" },
-    { body = ".*security", group = "<!-- 08 -->Security" },
-    { message = "^build", group = "<!-- 09 -->Build" },
-    { message = "^ci", group = "<!-- 10 -->Continuous Integration" },
-    { message = "^revert", group = "<!-- 11 -->Reverted Commits" },
+  { message = "^feat", group = "<!-- 00 -->Features" },
+  { message = "^[fF]ix", group = "<!-- 01 -->Bug Fixes" },
+  { message = "^refactor", group = "<!-- 02 -->Refactor" },
+  { message = "^doc", group = "<!-- 03 -->Documentation" },
+  { message = "^perf", group = "<!-- 04 -->Performance" },
+  { message = "^style", group = "<!-- 05 -->Styling" },
+  { message = "^test", group = "<!-- 06 -->Testing" },
+  { message = "^chore\\(release\\): prepare for", skip = true },
+  { message = "^chore\\(pr\\)", skip = true },
+  { message = "^chore\\(pull\\)", skip = true },
+  { message = "^[cC]hore", group = "<!-- 07 -->Miscellaneous Tasks" },
+  { body = ".*security", group = "<!-- 08 -->Security" },
+  { message = "^build", group = "<!-- 09 -->Build" },
+  { message = "^ci", group = "<!-- 10 -->Continuous Integration" },
+  { message = "^revert", group = "<!-- 11 -->Reverted Commits" },
+  # handle some old commits styles from pre 0.4
+  { 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
@@ -79,7 +98,7 @@ tag_pattern = "v[0-9]*"
 # regex for skipping tags
 skip_tags = "v0.1.0-rc.1"
 # regex for ignoring tags
-ignore_tags = ""
+ignore_tags = "alpha"
 # sort the tags topologically
 topo_order = false
 # sort the commits inside sections by oldest/newest order

codecov.yml

@@ -0,0 +1,3 @@
+ignore:
+  - "examples"
+  - "benches"

examples/README.md

@@ -6,7 +6,34 @@ VHS has a problem rendering some background color transitions, which shows up in
 below. See <https://github.com/charmbracelet/vhs/issues/344> for more info. These problems don't
 occur in a terminal.
 
-## Barchart ([barchart.rs](./barchart.rs)
+## Demo
+
+This is the previous demo example from the main README. It is available for each of the backends. Source:
+[demo.rs](./demo/).
+
+```shell
+cargo run --example=demo --features=crossterm
+cargo run --example=demo --no-default-features --features=termion
+cargo run --example=demo --no-default-features --features=termwiz
+```
+
+![Demo][demo.gif]
+
+## Hello World
+
+This is a pretty boring example, but it contains some good documentation
+on writing tui apps. Source: [hello_world.rs](./hello_world.rs).
+
+```shell
+cargo run --example=hello_world --features=crossterm
+```
+
+![Hello World][hello_world.gif]
+
+## Barchart
+
+Demonstrates the [`BarChart`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.BarChart.html)
+widget. Source: [barchart.rs](./barchart.rs).
 
 ```shell
 cargo run --example=barchart --features=crossterm
@@ -14,7 +41,10 @@ cargo run --example=barchart --features=crossterm
 
 ![Barchart][barchart.gif]
 
-## Block ([block.rs](./block.rs))
+## Block
+
+Demonstrates the [`Block`](https://docs.rs/ratatui/latest/ratatui/widgets/block/struct.Block.html)
+widget. Source: [block.rs](./block.rs).
 
 ```shell
 cargo run --example=block --features=crossterm
@@ -22,7 +52,10 @@ cargo run --example=block --features=crossterm
 
 ![Block][block.gif]
 
-## Calendar ([calendar.rs](./calendar.rs))
+## Calendar
+
+Demonstrates the [`Calendar`](https://docs.rs/ratatui/latest/ratatui/widgets/calendar/index.html)
+widget. Source: [calendar.rs](./calendar.rs).
 
 ```shell
 cargo run --example=calendar --features=crossterm widget-calendar
@@ -30,7 +63,12 @@ cargo run --example=calendar --features=crossterm widget-calendar
 
 ![Calendar][calendar.gif]
 
-## Canvas ([canvas.rs](./canvas.rs))
+## Canvas
+
+Demonstrates the [`Canvas`](https://docs.rs/ratatui/latest/ratatui/widgets/canvas/index.html) widget
+and related shapes in the
+[`canvas`](https://docs.rs/ratatui/latest/ratatui/widgets/canvas/index.html) module. Source:
+[canvas.rs](./canvas.rs).
 
 ```shell
 cargo run --example=canvas --features=crossterm
@@ -38,7 +76,10 @@ cargo run --example=canvas --features=crossterm
 
 ![Canvas][canvas.gif]
 
-## Chart ([chart.rs](./chart.rs))
+## Chart
+
+Demonstrates the [`Chart`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Chart.html) widget.
+Source: [chart.rs](./chart.rs).
 
 ```shell
 cargo run --example=chart --features=crossterm
@@ -46,21 +87,49 @@ cargo run --example=chart --features=crossterm
 
 ![Chart][chart.gif]
 
-## Custom Widget ([custom_widget.rs](./custom_widget.rs))
+## Colors
+
+Demonstrates the available [`Color`](https://docs.rs/ratatui/latest/ratatui/style/enum.Color.html)
+options. These can be used in any style field. Source: [colors.rs](./colors.rs).
+
+```shell
+cargo run --example=colors --features=crossterm
+```
+
+![Colors][colors.gif]
+
+## Colors (RGB)
+
+Demonstrates the available RGB
+[`Color`](https://docs.rs/ratatui/latest/ratatui/style/enum.Color.html) options. These can be used
+in any style field. Source: [colors_rgb.rs](./colors_rgb.rs).
+
+```shell
+cargo run --example=colors_rgb --features=crossterm
+```
+
+![Colors RGB][colors_rgb.gif]
+
+## Custom Widget
+
+Demonstrates how to implement the
+[`Widget`](https://docs.rs/ratatui/latest/ratatui/widgets/trait.Widget.html) trait. Source:
+[custom_widget.rs](./custom_widget.rs).
 
 ```shell
 cargo run --example=custom_widget --features=crossterm
 ```
 
-This is not a particularly exciting example visually, but it demonstrates how to implement your own widget.
-
 ![Custom Widget][custom_widget.gif]
 
-## Gauge ([gauge.rs](./gauge.rs))
+## Gauge
 
-Please note: the background renders poorly when we generate this example using VHS.
-This problem doesn't generally happen during normal rendering in a terminal.
-See <https://github.com/charmbracelet/vhs/issues/344> for more details
+Demonstrates the [`Gauge`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Gauge.html) widget.
+Source: [gauge.rs](./gauge.rs).
+
+> [!NOTE] The backgrounds render poorly when we generate this example using VHS. This problem
+> doesn't generally happen during normal rendering in a terminal. See
+> [vhs#344](https://github.com/charmbracelet/vhs/issues/344) for more details.
 
 ```shell
 cargo run --example=gauge --features=crossterm
@@ -68,18 +137,11 @@ cargo run --example=gauge --features=crossterm
 
 ![Gauge][gauge.gif]
 
-## Hello World ([hello_world.rs](./hello_world.rs))
+## Inline
 
-```shell
-cargo run --example=hello_world --features=crossterm
-```
-
-This is a pretty boring example, but it contains some good comments of documentation on some of the
-standard approaches to writing tui apps.
-
-![Hello World][hello_world.gif]
-
-## Inline ([inline.rs](./inline.rs))
+Demonstrates the
+[`Inline`](https://docs.rs/ratatui/latest/ratatui/terminal/enum.Viewport.html#variant.Inline)
+Viewport mode for ratatui apps. Source: [inline.rs](./inline.rs).
 
 ```shell
 cargo run --example=inline --features=crossterm
@@ -87,7 +149,10 @@ cargo run --example=inline --features=crossterm
 
 ![Inline][inline.gif]
 
-## Layout ([layout.rs](./layout.rs))
+## Layout
+
+Demonstrates the [`Layout`](https://docs.rs/ratatui/latest/ratatui/layout/struct.Layout.html) and
+interaction between each constraint. Source:  [layout.rs](./layout.rs).
 
 ```shell
 cargo run --example=layout --features=crossterm
@@ -95,7 +160,10 @@ cargo run --example=layout --features=crossterm
 
 ![Layout][layout.gif]
 
-## List ([list.rs](./list.rs))
+## List
+
+Demonstrates the [`List`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.List.html) widget.
+Source: [list.rs](./list.rs).
 
 ```shell
 cargo run --example=list --features=crossterm
@@ -103,7 +171,22 @@ cargo run --example=list --features=crossterm
 
 ![List][list.gif]
 
-## Panic ([panic.rs](./panic.rs))
+## Modifiers
+
+Demonstrates the style
+[`Modifiers`](https://docs.rs/ratatui/latest/ratatui/style/struct.Modifier.html). Source:
+[modifiers.rs](./modifiers.rs).
+
+```shell
+cargo run --example=modifiers --features=crossterm
+```
+
+![Modifiers][modifiers.gif]
+
+## Panic
+
+Demonstrates how to handle panics by ensuring that panic messages are written correctly to the
+screen. Source: [panic.rs](./panic.rs).
 
 ```shell
 cargo run --example=panic --features=crossterm
@@ -111,7 +194,10 @@ cargo run --example=panic --features=crossterm
 
 ![Panic][panic.gif]
 
-## Paragraph ([paragraph.rs](./paragraph.rs))
+## Paragraph
+
+Demonstrates the [`Paragraph`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Paragraph.html)
+widget. Source: [paragraph.rs](./paragraph.rs)
 
 ```shell
 cargo run --example=paragraph --features=crossterm
@@ -119,19 +205,27 @@ cargo run --example=paragraph --features=crossterm
 
 ![Paragraph][paragraph.gif]
 
-## Popup ([popup.rs](./popup.rs))
+## Popup
 
+Demonstrates how to render a widget over the top of previously rendered widgets using the
+[`Clear`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Clear.html) widget. Source:
+[popup.rs](./popup.rs).
+
+>
 ```shell
 cargo run --example=popup --features=crossterm
 ```
 
-Please note: the background renders poorly when we generate this example using VHS.
-This problem doesn't generally happen during normal rendering in a terminal.
-See <https://github.com/charmbracelet/vhs/issues/344> for more details
+> [!NOTE] The background renders poorly after the popup when we generate this example using VHS.
+> This problem doesn't generally happen during normal rendering in a terminal. See
+> [vhs#344](https://github.com/charmbracelet/vhs/issues/344) for more details.
 
 ![Popup][popup.gif]
 
-## Scrollbar ([scrollbar.rs](./scrollbar.rs))
+## Scrollbar
+
+Demonstrates the [`Scrollbar`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Scrollbar.html)
+widget. Source: [scrollbar.rs](./scrollbar.rs).
 
 ```shell
 cargo run --example=scrollbar --features=crossterm
@@ -139,7 +233,14 @@ cargo run --example=scrollbar --features=crossterm
 
 ![Scrollbar][scrollbar.gif]
 
-## Sparkline ([sparkline.rs](./sparkline.rs))
+## Sparkline
+
+Demonstrates the [`Sparkline`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Sparkline.html)
+widget. Source: [sparkline.rs](./sparkline.rs).
+
+> [!NOTE] The background renders poorly in the second sparkline when we generate this example using
+> VHS. This problem doesn't generally happen during normal rendering in a terminal. See
+> [vhs#344](https://github.com/charmbracelet/vhs/issues/344) for more details.
 
 ```shell
 cargo run --example=sparkline --features=crossterm
@@ -147,7 +248,10 @@ cargo run --example=sparkline --features=crossterm
 
 ![Sparkline][sparkline.gif]
 
-## Table ([table.rs](./table.rs))
+## Table
+
+Demonstrates the [`Table`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Table.html) widget.
+Source: [table.rs](./table.rs).
 
 ```shell
 cargo run --example=table --features=crossterm
@@ -155,7 +259,10 @@ cargo run --example=table --features=crossterm
 
 ![Table][table.gif]
 
-## Tabs ([tabs.rs](./tabs.rs))
+## Tabs
+
+Demonstrates the [`Tabs`](https://docs.rs/ratatui/latest/ratatui/widgets/struct.Tabs.html) widget.
+Source: [tabs.rs](./tabs.rs).
 
 ```shell
 cargo run --example=tabs --features=crossterm
@@ -163,7 +270,12 @@ cargo run --example=tabs --features=crossterm
 
 ![Tabs][tabs.gif]
 
-## User Input ([user_input.rs](./user_input.rs))
+## 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
+> [`tui-input`](https://crates.io/crates/tui-input) crates for more functional text entry UIs.
 
 ```shell
 cargo run --example=user_input --features=crossterm
@@ -177,33 +289,29 @@ These are generated with `vhs publish examples/xxx.gif`
 
 To update these examples in bulk:
 ```shell
-# build to ensure that running the examples doesn't have to wait so long
-cargo build --examples --features=crossterm,all-widgets
-for i in examples/*.tape
-do
-    echo -n "[${i:s:examples/:::s:.tape:.gif:}]: "
-    vhs $i --publish --quiet
-    # may need to adjust this depending on if you see rate limiting from VHS
-    sleep 1
-done
+examples/generate.bash
 ```
 -->
-[barchart.gif]: https://vhs.charm.sh/vhs-6ioxdeRBVkVpyXcjIEVaJU.gif
-[block.gif]: https://vhs.charm.sh/vhs-1sEo9vVkHRwFtu95MOXrTj.gif
-[calendar.gif]: https://vhs.charm.sh/vhs-1dBcpMSSP80WkBgm4lBhNo.gif
-[canvas.gif]: https://vhs.charm.sh/vhs-4zeWEPF6bLEFSHuJrvaHlN.gif
-[chart.gif]: https://vhs.charm.sh/vhs-zRzsE2AwRixQhcWMTAeF1.gif
-[custom_widget.gif]: https://vhs.charm.sh/vhs-32mW1TpkrovTcm79QXmBSu.gif
-[gauge.gif]: https://vhs.charm.sh/vhs-2rvSeP5r4lRkGTzNCKpm9a.gif
-[hello_world.gif]: https://vhs.charm.sh/vhs-3CKUwxFuQi8oKQMS5zkPfQ.gif
-[inline.gif]: https://vhs.charm.sh/vhs-miRl1mosKFoJV7LjjvF4T.gif
-[layout.gif]: https://vhs.charm.sh/vhs-5R8O3LQGQ5pQVWwlPVrdbQ.gif
-[list.gif]: https://vhs.charm.sh/vhs-4goo9reeUM9r0nYb54R7SP.gif
-[panic.gif]: https://vhs.charm.sh/vhs-HrvKCHV4yeN69fb1EadTH.gif
-[paragraph.gif]: https://vhs.charm.sh/vhs-2qIPDi79DUmtmeNDEeHVEF.gif
-[popup.gif]: https://vhs.charm.sh/vhs-2QnC682AUeNYNXcjNlKTyp.gif
-[scrollbar.gif]: https://vhs.charm.sh/vhs-2p13MMFreW7Gwt1xIonIWu.gif
-[sparkline.gif]: https://vhs.charm.sh/vhs-4t59Vxw5Za33Rtvt9QrftA.gif
-[table.gif]: https://vhs.charm.sh/vhs-6IrGHgT385DqA6xnwGF9oD.gif
-[tabs.gif]: https://vhs.charm.sh/vhs-61WkbfhyDk0kbkjncErdHT.gif
-[user_input.gif]: https://vhs.charm.sh/vhs-4fxUgkpEWcVyBRXuyYKODY.gif
+[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
+[colors_rgb.gif]: https://github.com/ratatui-org/ratatui/blob/images/examples/colors_rgb.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
+[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
+[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

examples/barchart.rs

@@ -62,7 +62,7 @@ impl<'a> App<'a> {
                 },
                 Company {
                     label: "Comp.B",
-                    revenue: [1500, 2500, 3000, 4100],
+                    revenue: [1500, 2500, 3000, 500],
                     bar_style: Style::default().fg(Color::Yellow),
                 },
                 Company {
@@ -139,15 +139,7 @@ fn run_app<B: Backend>(
 fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
     let chunks = Layout::default()
         .direction(Direction::Vertical)
-        .margin(2)
-        .constraints(
-            [
-                Constraint::Ratio(1, 3),
-                Constraint::Ratio(1, 3),
-                Constraint::Ratio(1, 3),
-            ]
-            .as_ref(),
-        )
+        .constraints([Constraint::Ratio(1, 3), Constraint::Ratio(2, 3)].as_ref())
         .split(f.size());
 
     let barchart = BarChart::default()
@@ -158,16 +150,17 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
         .value_style(Style::default().fg(Color::Black).bg(Color::Yellow));
     f.render_widget(barchart, chunks[0]);
 
-    draw_bar_with_group_labels(f, app, chunks[1], false);
-    draw_bar_with_group_labels(f, app, chunks[2], true);
+    let chunks = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)].as_ref())
+        .split(chunks[1]);
+
+    draw_bar_with_group_labels(f, app, chunks[0]);
+    draw_horizontal_bars(f, app, chunks[1]);
 }
 
-fn draw_bar_with_group_labels<B>(f: &mut Frame<B>, app: &App, area: Rect, bar_labels: bool)
-where
-    B: Backend,
-{
-    let groups: Vec<BarGroup> = app
-        .months
+fn create_groups<'a>(app: &'a App, combine_values_and_labels: bool) -> Vec<BarGroup<'a>> {
+    app.months
         .iter()
         .enumerate()
         .map(|(i, &month)| {
@@ -182,17 +175,34 @@ where
                             Style::default()
                                 .bg(c.bar_style.fg.unwrap())
                                 .fg(Color::Black),
-                        )
-                        .text_value(format!("{:.1}", (c.revenue[i] as f64) / 1000.));
-                    if bar_labels {
-                        bar = bar.label(c.label.into());
+                        );
+
+                    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(month.into()).bars(&bars)
+            BarGroup::default()
+                .label(Line::from(month).alignment(Alignment::Center))
+                .bars(&bars)
         })
-        .collect();
+        .collect()
+}
+
+fn draw_bar_with_group_labels<B>(f: &mut Frame<B>, app: &App, area: Rect)
+where
+    B: Backend,
+{
+    let groups = create_groups(app, false);
 
     let mut barchart = BarChart::default()
         .block(Block::default().title("Data1").borders(Borders::ALL))
@@ -207,11 +217,44 @@ where
 
     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: TOTAL_REVENUE.len() as u16 + 2,
+            width: legend_width,
             y: area.y,
-            x: area.x,
+            x: area.right() - legend_width,
+        };
+        draw_legend(f, legend_area);
+    }
+}
+
+fn draw_horizontal_bars<B>(f: &mut Frame<B>, app: &App, area: Rect)
+where
+    B: Backend,
+{
+    let groups = create_groups(app, true);
+
+    let mut barchart = BarChart::default()
+        .block(Block::default().title("Data1").borders(Borders::ALL))
+        .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);
     }

examples/barchart.tape

@@ -1,6 +1,7 @@
 # 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.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 800
 Hide

examples/block.rs

@@ -1,123 +1,253 @@
-use std::{error::Error, io, time::Duration};
+use std::{
+    error::Error,
+    io::{stdout, Stdout},
+    ops::ControlFlow,
+    time::Duration,
+};
 
 use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode},
+    event::{self, Event, KeyCode},
     execute,
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
-use ratatui::{prelude::*, widgets::*};
+use itertools::Itertools;
+use ratatui::{
+    prelude::*,
+    widgets::{
+        block::{Position, Title},
+        Block, BorderType, Borders, Padding, Paragraph, Wrap,
+    },
+};
 
-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)?;
+// 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 Frame<'a> = ratatui::Frame<'a, CrosstermBackend<Stdout>>;
+type Terminal = ratatui::Terminal<CrosstermBackend<Stdout>>;
+type Result<T> = std::result::Result<T, Box<dyn Error>>;
 
-    // create app and run it
-    let res = run_app(&mut terminal);
+fn main() -> Result<()> {
+    let mut terminal = setup_terminal()?;
+    let result = run(&mut terminal);
+    restore_terminal(terminal)?;
 
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.clear()?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
+    if let Err(err) = result {
+        eprintln!("{err:?}");
     }
-
     Ok(())
 }
 
-fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::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<()> {
     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(());
-                }
-            }
+        if handle_events()?.is_break() {
+            return Ok(());
         }
     }
 }
 
-fn ui<B: Backend>(f: &mut Frame<B>) {
-    // Wrapping block for a group
-    // Just draw the block and the group on the same area and build the group
-    let outer = f.size();
-    let outer_block = Block::default()
-        .borders(Borders::ALL)
-        .title(block::Title::from("Main block with round corners").alignment(Alignment::Center))
-        .border_type(BorderType::Rounded);
-    let inner = outer_block.inner(outer);
-    let [top, bottom] = *Layout::default()
-        .direction(Direction::Vertical)
-        .margin(1)
-        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)].as_ref())
-        .split(inner)
-    else {
-        return;
-    };
-    let [top_left, top_right] = *Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)].as_ref())
-        .split(top)
-    else {
-        return;
-    };
-    let [bottom_left, bottom_right] = *Layout::default()
-        .direction(Direction::Horizontal)
-        .constraints([Constraint::Percentage(50), Constraint::Percentage(50)].as_ref())
-        .split(bottom)
-    else {
-        return;
-    };
+fn handle_events() -> Result<ControlFlow<()>> {
+    if event::poll(Duration::from_millis(100))? {
+        if let Event::Key(key) = event::read()? {
+            if let KeyCode::Char('q') = key.code {
+                return Ok(ControlFlow::Break(()));
+            }
+        }
+    }
+    Ok(ControlFlow::Continue(()))
+}
 
-    let top_left_block = Block::default()
-        .title("With Green Background")
-        .borders(Borders::all())
-        .on_green();
-    let top_right_block = Block::default()
+fn ui(frame: &mut Frame) {
+    let (title_area, layout) = calculate_layout(frame.size());
+
+    render_title(frame, title_area);
+
+    let paragraph = placeholder_paragraph();
+
+    render_borders(&paragraph, Borders::ALL, frame, layout[0][0]);
+    render_borders(&paragraph, Borders::NONE, frame, layout[0][1]);
+    render_borders(&paragraph, Borders::LEFT, frame, layout[1][0]);
+    render_borders(&paragraph, Borders::RIGHT, frame, layout[1][1]);
+    render_borders(&paragraph, Borders::TOP, frame, layout[2][0]);
+    render_borders(&paragraph, Borders::BOTTOM, frame, layout[2][1]);
+
+    render_border_type(&paragraph, BorderType::Plain, frame, layout[3][0]);
+    render_border_type(&paragraph, BorderType::Rounded, frame, layout[3][1]);
+    render_border_type(&paragraph, BorderType::Double, frame, layout[4][0]);
+    render_border_type(&paragraph, BorderType::Thick, frame, layout[4][1]);
+
+    render_styled_block(&paragraph, frame, layout[5][0]);
+    render_styled_borders(&paragraph, frame, layout[5][1]);
+    render_styled_title(&paragraph, frame, layout[6][0]);
+    render_styled_title_content(&paragraph, frame, layout[6][1]);
+    render_multiple_titles(&paragraph, frame, layout[7][0]);
+    render_multiple_title_positions(&paragraph, frame, layout[7][1]);
+    render_padding(&paragraph, frame, layout[8][0]);
+    render_nested_blocks(&paragraph, frame, layout[8][1]);
+}
+
+/// Calculate the layout of the UI elements.
+///
+/// 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(vec![Constraint::Length(1), Constraint::Min(0)])
+        .split(area);
+    let title_area = layout[0];
+    let main_areas = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![Constraint::Max(4); 9])
+        .split(layout[1])
+        .iter()
+        .map(|&area| {
+            Layout::default()
+                .direction(Direction::Horizontal)
+                .constraints(vec![Constraint::Percentage(50), Constraint::Percentage(50)])
+                .split(area)
+                .to_vec()
+        })
+        .collect_vec();
+    (title_area, main_areas)
+}
+
+fn render_title(frame: &mut Frame, area: Rect) {
+    frame.render_widget(
+        Paragraph::new("Block example. Press q to quit")
+            .dark_gray()
+            .alignment(Alignment::Center),
+        area,
+    );
+}
+
+fn placeholder_paragraph() -> Paragraph<'static> {
+    let text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+    Paragraph::new(text.dark_gray()).wrap(Wrap { trim: true })
+}
+
+fn render_borders(paragraph: &Paragraph, border: Borders, frame: &mut Frame, area: Rect) {
+    let block = Block::new()
+        .borders(border)
+        .title(format!("Borders::{border:#?}", border = border));
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+fn render_border_type(
+    paragraph: &Paragraph,
+    border_type: BorderType,
+    frame: &mut Frame,
+    area: Rect,
+) {
+    let block = Block::new()
+        .borders(Borders::ALL)
+        .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)
+        .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)
+        .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)
+        .title("Styled title")
+        .title_style(Style::new().blue().on_white().bold().italic());
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+fn render_styled_title_content(paragraph: &Paragraph, frame: &mut Frame, area: Rect) {
+    let title = Line::from(vec![
+        "Styled ".blue().on_white().bold().italic(),
+        "title content".red().on_white().bold().italic(),
+    ]);
+    let block = Block::new().borders(Borders::ALL).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)
+        .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)
         .title(
-            block::Title::from("With styled title".white().on_red().bold())
+            Title::from("top left")
+                .position(Position::Top)
+                .alignment(Alignment::Left),
+        )
+        .title(
+            Title::from("top center")
+                .position(Position::Top)
+                .alignment(Alignment::Center),
+        )
+        .title(
+            Title::from("top right")
+                .position(Position::Top)
                 .alignment(Alignment::Right),
         )
-        .borders(Borders::ALL);
-    let bottom_left_block = Paragraph::new("Text inside padded block").block(
-        Block::default()
-            .title("With borders")
-            .borders(Borders::ALL)
-            .padding(Padding {
-                left: 4,
-                right: 4,
-                top: 2,
-                bottom: 2,
-            }),
-    );
-    let bottom_right_block = Block::default()
-        .title("With styled borders and doubled borders")
-        .border_style(Style::default().fg(Color::Cyan))
-        .borders(Borders::LEFT | Borders::RIGHT)
-        .border_type(BorderType::Double)
-        .padding(Padding::uniform(1));
-    let bottom_inner_block = Block::default()
-        .title("Block inside padded block")
-        .borders(Borders::ALL);
-
-    f.render_widget(outer_block, outer);
-    f.render_widget(Clear, top_left);
-    f.render_widget(top_left_block, top_left);
-    f.render_widget(top_right_block, top_right);
-    f.render_widget(bottom_left_block, bottom_left);
-    let bottom_right_inner = bottom_right_block.inner(bottom_right);
-    f.render_widget(bottom_right_block, bottom_right);
-    f.render_widget(bottom_inner_block, bottom_right_inner);
+        .title(
+            Title::from("bottom left")
+                .position(Position::Bottom)
+                .alignment(Alignment::Left),
+        )
+        .title(
+            Title::from("bottom center")
+                .position(Position::Bottom)
+                .alignment(Alignment::Center),
+        )
+        .title(
+            Title::from("bottom right")
+                .position(Position::Bottom)
+                .alignment(Alignment::Right),
+        );
+    frame.render_widget(paragraph.clone().block(block), area);
+}
+
+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));
+    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 inner = outer_block.inner(area);
+    frame.render_widget(outer_block, area);
+    frame.render_widget(paragraph.clone().block(inner_block), inner);
 }

examples/block.tape

@@ -1,11 +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/block.tape`
 Output "target/block.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
-Set Height 800
+Set Height 1200
 Hide
 Type "cargo run --example=block"
 Enter
-Sleep 1s
+Sleep 2s
 Show
-Sleep 5s
+Sleep 2s

examples/calendar.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/calendar.tape`
 Output "target/calendar.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 800
 Hide

examples/canvas.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/canvas.tape`
 Output "target/canvas.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 800
 Hide

examples/chart.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/chart.tape`
 Output "target/chart.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 800
 Hide

examples/colors.rs

@@ -0,0 +1,295 @@
+/// 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,
+};
+
+use crossterm::{
+    event::{self, Event, KeyCode},
+    execute,
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+};
+use itertools::Itertools;
+use ratatui::{prelude::*, widgets::*};
+
+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(())
+}
+
+fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::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(());
+                }
+            }
+        }
+    }
+}
+
+fn ui<B: Backend>(frame: &mut Frame<B>) {
+    let layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![
+            Constraint::Length(30),
+            Constraint::Length(17),
+            Constraint::Length(2),
+        ])
+        .split(frame.size());
+
+    render_named_colors(frame, layout[0]);
+    render_indexed_colors(frame, layout[1]);
+    render_indexed_grayscale(frame, layout[2]);
+}
+
+const NAMED_COLORS: [Color; 16] = [
+    Color::Black,
+    Color::Red,
+    Color::Green,
+    Color::Yellow,
+    Color::Blue,
+    Color::Magenta,
+    Color::Cyan,
+    Color::Gray,
+    Color::DarkGray,
+    Color::LightRed,
+    Color::LightGreen,
+    Color::LightYellow,
+    Color::LightBlue,
+    Color::LightMagenta,
+    Color::LightCyan,
+    Color::White,
+];
+
+fn render_named_colors<B: Backend>(frame: &mut Frame<B>, area: Rect) {
+    let layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![Constraint::Length(3); 10])
+        .split(area);
+
+    render_fg_named_colors(frame, Color::Reset, layout[0]);
+    render_fg_named_colors(frame, Color::Black, layout[1]);
+    render_fg_named_colors(frame, Color::DarkGray, layout[2]);
+    render_fg_named_colors(frame, Color::Gray, layout[3]);
+    render_fg_named_colors(frame, Color::White, layout[4]);
+
+    render_bg_named_colors(frame, Color::Reset, layout[5]);
+    render_bg_named_colors(frame, Color::Black, layout[6]);
+    render_bg_named_colors(frame, Color::DarkGray, layout[7]);
+    render_bg_named_colors(frame, Color::Gray, layout[8]);
+    render_bg_named_colors(frame, Color::White, layout[9]);
+}
+
+fn render_fg_named_colors<B: Backend>(frame: &mut Frame<B>, bg: Color, area: Rect) {
+    let block = title_block(format!("Foreground colors on {bg} background"));
+    let inner = block.inner(area);
+    frame.render_widget(block, area);
+
+    let layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![Constraint::Length(1); 2])
+        .split(inner)
+        .iter()
+        .flat_map(|area| {
+            Layout::default()
+                .direction(Direction::Horizontal)
+                .constraints(vec![Constraint::Ratio(1, 8); 8])
+                .split(*area)
+                .to_vec()
+        })
+        .collect_vec();
+    for (i, &fg) in NAMED_COLORS.iter().enumerate() {
+        let color_name = fg.to_string();
+        let paragraph = Paragraph::new(color_name).fg(fg).bg(bg);
+        frame.render_widget(paragraph, layout[i]);
+    }
+}
+
+fn render_bg_named_colors<B: Backend>(frame: &mut Frame<B>, fg: Color, area: Rect) {
+    let block = title_block(format!("Background colors with {fg} foreground"));
+    let inner = block.inner(area);
+    frame.render_widget(block, area);
+
+    let layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![Constraint::Length(1); 2])
+        .split(inner)
+        .iter()
+        .flat_map(|area| {
+            Layout::default()
+                .direction(Direction::Horizontal)
+                .constraints(vec![Constraint::Ratio(1, 8); 8])
+                .split(*area)
+                .to_vec()
+        })
+        .collect_vec();
+    for (i, &bg) in NAMED_COLORS.iter().enumerate() {
+        let color_name = bg.to_string();
+        let paragraph = Paragraph::new(color_name).fg(fg).bg(bg);
+        frame.render_widget(paragraph, layout[i]);
+    }
+}
+
+fn render_indexed_colors<B: Backend>(frame: &mut Frame<B>, area: Rect) {
+    let block = title_block("Indexed colors".into());
+    let inner = block.inner(area);
+    frame.render_widget(block, area);
+
+    let layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![
+            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(vec![Constraint::Length(5); 16])
+        .split(layout[0]);
+    for i in 0..16 {
+        let color = Color::Indexed(i);
+        let color_index = format!("{i:0>2}");
+        let bg = if i < 1 { Color::DarkGray } else { Color::Black };
+        let paragraph = Paragraph::new(Line::from(vec![
+            color_index.fg(color).bg(bg),
+            "██".bg(color).fg(color),
+        ]));
+        frame.render_widget(paragraph, color_layout[i as usize]);
+    }
+
+    //   16  17  18  19  20  21   52  53  54  55  56  57   88  89  90  91  92  93
+    //   22  23  24  25  26  27   58  59  60  61  62  63   94  95  96  97  98  99
+    //   28  29  30  31  32  33   64  65  66  67  68  69  100 101 102 103 104 105
+    //   34  35  36  37  38  39   70  71  72  73  74  75  106 107 108 109 110 111
+    //   40  41  42  43  44  45   76  77  78  79  80  81  112 113 114 115 116 117
+    //   46  47  48  49  50  51   82  83  84  85  86  87  118 119 120 121 122 123
+    //
+    //  124 125 126 127 128 129  160 161 162 163 164 165  196 197 198 199 200 201
+    //  130 131 132 133 134 135  166 167 168 169 170 171  202 203 204 205 206 207
+    //  136 137 138 139 140 141  172 173 174 175 176 177  208 209 210 211 212 213
+    //  142 143 144 145 146 147  178 179 180 181 182 183  214 215 216 217 218 219
+    //  148 149 150 151 152 153  184 185 186 187 188 189  220 221 222 223 224 225
+    //  154 155 156 157 158 159  190 191 192 193 194 195  226 227 228 229 230 231
+
+    // the above looks complex but it's so the colors are grouped into blocks that display nicely
+    let index_layout = [layout[2], layout[4]]
+        .iter()
+        // two rows of 3 columns
+        .flat_map(|area| {
+            Layout::default()
+                .direction(Direction::Horizontal)
+                .constraints(vec![Constraint::Length(27); 3])
+                .split(*area)
+                .to_vec()
+        })
+        // each with 6 rows
+        .flat_map(|area| {
+            Layout::default()
+                .direction(Direction::Vertical)
+                .constraints(vec![Constraint::Length(1); 6])
+                .split(area)
+                .to_vec()
+        })
+        // each with 6 columns
+        .flat_map(|area| {
+            Layout::default()
+                .direction(Direction::Horizontal)
+                .constraints(vec![Constraint::Min(4); 6])
+                .split(area)
+                .to_vec()
+        })
+        .collect_vec();
+
+    for i in 16..=231 {
+        let color = Color::Indexed(i);
+        let color_index = format!("{i:0>3}");
+        let paragraph = Paragraph::new(Line::from(vec![
+            color_index.fg(color).bg(Color::Reset),
+            ".".bg(color).fg(color),
+            // There's a bug in VHS that seems to bleed backgrounds into the next
+            // character. This is a workaround to make the bug less obvious.
+            "███".reversed(),
+        ]));
+        frame.render_widget(paragraph, index_layout[i as usize - 16]);
+    }
+}
+
+fn title_block(title: String) -> Block<'static> {
+    Block::default()
+        .borders(Borders::TOP)
+        .border_style(Style::new().dark_gray())
+        .title(title)
+        .title_alignment(Alignment::Center)
+        .title_style(Style::new().reset())
+}
+
+fn render_indexed_grayscale<B: Backend>(frame: &mut Frame<B>, area: Rect) {
+    let layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![
+            Constraint::Length(1), // 232 - 243
+            Constraint::Length(1), // 244 - 255
+        ])
+        .split(area)
+        .iter()
+        .flat_map(|area| {
+            Layout::default()
+                .direction(Direction::Horizontal)
+                .constraints(vec![Constraint::Length(6); 12])
+                .split(*area)
+                .to_vec()
+        })
+        .collect_vec();
+
+    for i in 232..=255 {
+        let color = Color::Indexed(i);
+        let color_index = format!("{i:0>3}");
+        // make the dark colors easier to read
+        let bg = if i < 244 { Color::Gray } else { Color::Black };
+        let paragraph = Paragraph::new(Line::from(vec![
+            color_index.fg(color).bg(bg),
+            "██".bg(color).fg(color),
+            // There's a bug in VHS that seems to bleed backgrounds into the next
+            // character. This is a workaround to make the bug less obvious.
+            "███████".reversed(),
+        ]));
+        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.tape

@@ -0,0 +1,18 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/colors.tape`
+Output "target/colors.gif"
+# The OceanicMaterial theme is a good choice for this example (Obsidian is almost as good) because:
+# - Black is dark and distinct from the default background
+# - White is light and distinct from the default foreground
+# - Normal and bright colors are distinct
+# - Black and DarkGray are distinct
+# - White and Gray are distinct
+Set Theme "OceanicMaterial"
+Set Width 1200
+Set Height 1410
+Hide
+Type "cargo run --example=colors --features=crossterm"
+Enter
+Sleep 2s
+Show
+Sleep 1s

examples/colors_rgb.rs

@@ -0,0 +1,147 @@
+/// 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::{
+    error::Error,
+    io::{stdout, Stdout},
+    rc::Rc,
+    time::Duration,
+};
+
+use crossterm::{
+    event::{self, Event, KeyCode, KeyEventKind},
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    ExecutableCommand,
+};
+use palette::{
+    convert::{FromColorUnclamped, IntoColorUnclamped},
+    Okhsv, Srgb,
+};
+use ratatui::{prelude::*, widgets::*};
+
+type Result<T> = std::result::Result<T, Box<dyn Error>>;
+
+fn main() -> Result<()> {
+    install_panic_hook();
+    App::new()?.run()
+}
+
+struct App {
+    terminal: Terminal<CrosstermBackend<Stdout>>,
+    should_quit: bool,
+}
+
+impl App {
+    pub fn new() -> Result<Self> {
+        Ok(Self {
+            terminal: Terminal::new(CrosstermBackend::new(stdout()))?,
+            should_quit: false,
+        })
+    }
+
+    pub fn run(mut self) -> Result<()> {
+        init_terminal()?;
+        self.terminal.clear()?;
+        while !self.should_quit {
+            self.draw()?;
+            self.handle_events()?;
+        }
+        restore_terminal()?;
+        Ok(())
+    }
+
+    fn draw(&mut self) -> Result<()> {
+        self.terminal.draw(|frame| {
+            frame.render_widget(RgbColors, frame.size());
+        })?;
+        Ok(())
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        if event::poll(Duration::from_millis(100))? {
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
+                    self.should_quit = true;
+                };
+            }
+        }
+        Ok(())
+    }
+}
+
+impl Drop for App {
+    fn drop(&mut self) {
+        let _ = restore_terminal();
+    }
+}
+
+struct RgbColors;
+
+impl Widget for RgbColors {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let layout = Self::layout(area);
+        Self::render_title(layout[0], buf);
+        Self::render_colors(layout[1], buf);
+    }
+}
+
+impl RgbColors {
+    fn layout(area: Rect) -> Rc<[Rect]> {
+        Layout::default()
+            .direction(Direction::Vertical)
+            .constraints(vec![Constraint::Length(1), Constraint::Min(0)])
+            .split(area)
+    }
+
+    fn render_title(area: Rect, buf: &mut Buffer) {
+        Paragraph::new("colors_rgb example. Press q to quit")
+            .dark_gray()
+            .alignment(Alignment::Center)
+            .render(area, buf);
+    }
+
+    /// Render a colored grid of half block characters (`"▀"`) each with a different RGB color.
+    fn render_colors(area: Rect, buf: &mut Buffer) {
+        for (xi, x) in (area.left()..area.right()).enumerate() {
+            for (yi, y) in (area.top()..area.bottom()).enumerate() {
+                let hue = xi as f32 * 360.0 / area.width as f32;
+
+                let value_fg = (yi as f32) / (area.height as f32 - 0.5);
+                let fg = Okhsv::<f32>::new(hue, Okhsv::max_saturation(), value_fg);
+                let fg: Srgb = fg.into_color_unclamped();
+                let fg: Srgb<u8> = fg.into_format();
+                let fg = Color::Rgb(fg.red, fg.green, fg.blue);
+
+                let value_bg = (yi as f32 + 0.5) / (area.height as f32 - 0.5);
+                let bg = Okhsv::new(hue, Okhsv::max_saturation(), value_bg);
+                let bg = Srgb::<f32>::from_color_unclamped(bg);
+                let bg: Srgb<u8> = bg.into_format();
+                let bg = Color::Rgb(bg.red, bg.green, bg.blue);
+
+                buf.get_mut(x, y).set_char('▀').set_fg(fg).set_bg(bg);
+            }
+        }
+    }
+}
+
+/// Install a panic hook that restores the terminal before panicking.
+fn install_panic_hook() {
+    better_panic::install();
+    let prev_hook = std::panic::take_hook();
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        prev_hook(info);
+    }));
+}
+
+fn init_terminal() -> Result<()> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    Ok(())
+}
+
+fn restore_terminal() -> Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}

examples/colors_rgb.tape

@@ -0,0 +1,18 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/colors_rgb.tape`
+Output "target/colors_rgb.gif"
+# The OceanicMaterial theme is a good choice for this example (Obsidian is almost as good) because:
+# - Black is dark and distinct from the default background
+# - White is light and distinct from the default foreground
+# - Normal and bright colors are distinct
+# - Black and DarkGray are distinct
+# - White and Gray are distinct
+Set Theme "OceanicMaterial"
+Set Width 1200
+Set Height 1410
+Hide
+Type "cargo run --example=colors_rgb --features=crossterm"
+Enter
+Sleep 2s
+Show
+Sleep 1s

examples/custom_widget.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/custom_widget.tape`
 Output "target/custom_widget.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 200
 Hide

examples/demo.tape

@@ -0,0 +1,18 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/demo.tape`
+Output "target/demo.gif"
+Set Theme "OceanicMaterial"
+Set Width 1200
+Set Height 1200
+Set PlaybackSpeed 0.5
+Hide
+Type "cargo run --example demo"
+Enter
+Sleep 2s
+Show
+Sleep 1s
+Down@1s 12
+Right
+Sleep 4s
+Right
+Sleep 4s

examples/demo2-social.tape

@@ -0,0 +1,43 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/demo.tape`
+
+Output "target/demo2-social.gif"
+Set Theme "OceanicMaterial"
+# Github social preview size (1280x640 with 80px padding) and must be < 1MB
+# This puts some constraints on the amount of interactivity we can do.
+Set Width 1280
+Set Height 640
+Set Padding 80
+Hide
+Type "cargo run --example demo2 --features crossterm,widget-calendar"
+Enter
+Sleep 2s
+Show
+# About screen
+Sleep 3.5s
+Down # Red eye
+Sleep 0.4s
+Down # black eye
+Sleep 1s
+Tab
+# Recipe
+Sleep 1s
+Set TypingSpeed 500ms
+Down 7
+Sleep 1s
+Tab
+# Email
+Sleep 2s
+Down 4
+Sleep 2s
+Tab
+# Trace route
+Sleep 1s
+Set TypingSpeed 200ms
+Down 10
+Sleep 2s
+Tab
+# Weather
+Set TypingSpeed 100ms
+Down 40
+Sleep 2s

examples/demo2.tape

@@ -0,0 +1,49 @@
+# This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
+# To run this script, install vhs and run `vhs ./examples/demo.tape`
+# NOTE: Requires VHS 0.6.1 or later for Screenshot support
+Output "target/demo2.gif"
+Set Theme "OceanicMaterial"
+# The reason for this strange size is that the social preview image for this
+# demo is 1280x64 with 80 pixels of padding on each side. We want a version
+# without the padding for README.md, etc.
+Set Width 1120
+Set Height 480
+Set Padding 0
+Hide
+Type "cargo run --example demo2 --features crossterm,widget-calendar"
+Enter
+Sleep 2s
+Show
+# About screen
+Screenshot "target/demo2-about.png"
+Sleep 3.5s
+Down # Red eye
+Sleep 0.4s
+Down # black eye
+Sleep 1s
+Tab
+# Recipe
+Screenshot "target/demo2-recipe.png"
+Sleep 1s
+Set TypingSpeed 500ms
+Down 7
+Sleep 1s
+Tab
+# Email
+Screenshot "target/demo2-email.png"
+Sleep 2s
+Down 4
+Sleep 2s
+Tab
+# Trace route
+Screenshot "target/demo2-trace.png"
+Sleep 1s
+Set TypingSpeed 200ms
+Down 10
+Sleep 2s
+Tab
+# Weather
+Screenshot "target/demo2-weather.png"
+Set TypingSpeed 100ms
+Down 40
+Sleep 2s

examples/demo2/app.rs

@@ -0,0 +1,99 @@
+use std::time::Duration;
+
+use anyhow::{Context, Result};
+use crossterm::event::{Event, KeyCode, KeyEvent, KeyEventKind, KeyModifiers};
+use ratatui::prelude::Rect;
+
+use crate::{Root, Term};
+
+#[derive(Debug)]
+pub struct App {
+    term: Term,
+    should_quit: bool,
+    context: AppContext,
+}
+
+#[derive(Debug, Default, Clone, Copy)]
+pub struct AppContext {
+    pub tab_index: usize,
+    pub row_index: usize,
+}
+
+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()?;
+        }
+        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 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 {
+            return Ok(());
+        }
+
+        let context = &mut self.context;
+        const TAB_COUNT: usize = 5;
+        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);
+            }
+            _ => {}
+        };
+        Ok(())
+    }
+}
+
+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);
+    }));
+}

examples/demo2/colors.rs

@@ -0,0 +1,34 @@
+use palette::{IntoColor, Okhsv, Srgb};
+use ratatui::{prelude::*, widgets::*};
+
+/// A widget that renders a color swatch of RGB colors.
+///
+/// The widget is rendered as a rectangle with the hue changing along the x-axis from 0.0 to 360.0
+/// and the value changing along the y-axis (from 1.0 to 0.0). Each pixel is rendered as a block
+/// character with the top half slightly lighter than the bottom half.
+pub struct RgbSwatch;
+
+impl Widget for RgbSwatch {
+    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);
+            for (xi, x) in (area.left()..area.right()).enumerate() {
+                let hue = xi as f32 * 360.0 / area.width as f32;
+                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);
+            }
+        }
+    }
+}
+
+/// 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 {
+    let color: Srgb = Okhsv::new(hue, saturation, value).into_color();
+    let color = color.into_format();
+    Color::Rgb(color.red, color.green, color.blue)
+}

examples/demo2/main.rs

@@ -0,0 +1,17 @@
+use anyhow::Result;
+pub use app::*;
+pub use colors::*;
+pub use root::*;
+pub use term::*;
+pub use theme::*;
+
+mod app;
+mod colors;
+mod root;
+mod tabs;
+mod term;
+mod theme;
+
+fn main() -> Result<()> {
+    App::run()
+}

examples/demo2/root.rs

@@ -0,0 +1,93 @@
+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.rs

@@ -0,0 +1,11 @@
+mod about;
+mod email;
+mod recipe;
+mod traceroute;
+mod weather;
+
+pub use about::AboutTab;
+pub use email::EmailTab;
+pub use recipe::RecipeTab;
+pub use traceroute::TracerouteTab;
+pub use weather::WeatherTab;

examples/demo2/tabs/about.rs

@@ -0,0 +1,157 @@
+use itertools::Itertools;
+use ratatui::{prelude::*, widgets::*};
+
+use crate::{layout, RgbSwatch, THEME};
+
+const RATATUI_LOGO: [&str; 32] = [
+    "               ███              ",
+    "             ██████             ",
+    "            ███████             ",
+    "           ████████             ",
+    "          █████████             ",
+    "         ██████████             ",
+    "        ████████████            ",
+    "        █████████████           ",
+    "        █████████████     ██████",
+    "         ███████████    ████████",
+    "              █████ ███████████ ",
+    "               ███ ██ee████████ ",
+    "                █ █████████████ ",
+    "            ████ █████████████  ",
+    "           █████████████████    ",
+    "           ████████████████     ",
+    "           ████████████████     ",
+    "            ███ ██████████      ",
+    "          ██    █████████       ",
+    "         █xx█   █████████       ",
+    "        █xxxx█ ██████████       ",
+    "       █xx█xxx█ █████████       ",
+    "      █xx██xxxx█ ████████       ",
+    "     █xxxxxxxxxx█ ██████████    ",
+    "    █xxxxxxxxxxxx█ ██████████   ",
+    "   █xxxxxxx██xxxxx█ █████████   ",
+    "  █xxxxxxxxx██xxxxx█ ████  ███  ",
+    " █xxxxxxxxxxxxxxxxxx█ ██   ███  ",
+    "█xxxxxxxxxxxxxxxxxxxx█ █   ███  ",
+    "█xxxxxxxxxxxxxxxxxxxxx█   ███   ",
+    " █xxxxxxxxxxxxxxxxxxxxx█ ███    ",
+    "  █xxxxxxxxxxxxxxxxxxxxx█ █     ",
+];
+
+pub struct AboutTab {
+    selected_row: usize,
+}
+
+impl AboutTab {
+    pub fn new(selected_row: usize) -> Self {
+        Self { selected_row }
+    }
+}
+
+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);
+    }
+}
+
+fn render_crate_description(area: Rect, buf: &mut Buffer) {
+    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 text = "- cooking up terminal user interfaces -
+
+    Ratatui is a Rust crate that provides widgets (e.g. Paragraph, Table) and draws them to the \
+    screen efficiently every frame.";
+    Paragraph::new(text)
+        .style(THEME.description)
+        .block(
+            Block::new()
+                .title(" Ratatui ")
+                .title_alignment(Alignment::Center)
+                .borders(Borders::TOP)
+                .border_style(THEME.description_title)
+                .padding(Padding::new(0, 0, 0, 0)),
+        )
+        .wrap(Wrap { trim: true })
+        .scroll((0, 0))
+        .render(area, buf);
+}
+
+/// 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.
+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 {
+        vertical: 0,
+        horizontal: 2,
+    });
+    for (y, (line1, line2)) in RATATUI_LOGO.iter().tuples().enumerate() {
+        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 rat_color = THEME.logo.rat;
+            let term_color = THEME.logo.term;
+            match (ch1, ch2) {
+                ('█', '█') => {
+                    cell.set_char('█');
+                    cell.fg = rat_color;
+                }
+                ('█', ' ') => {
+                    cell.set_char('▀');
+                    cell.fg = rat_color;
+                }
+                (' ', '█') => {
+                    cell.set_char('▄');
+                    cell.fg = rat_color;
+                }
+                ('█', 'x') => {
+                    cell.set_char('▀');
+                    cell.fg = rat_color;
+                    cell.bg = term_color;
+                }
+                ('x', '█') => {
+                    cell.set_char('▄');
+                    cell.fg = rat_color;
+                    cell.bg = term_color;
+                }
+                ('x', 'x') => {
+                    cell.set_char(' ');
+                    cell.fg = term_color;
+                    cell.bg = term_color;
+                }
+                ('█', 'e') => {
+                    cell.set_char('▀');
+                    cell.fg = rat_color;
+                    cell.bg = eye_color;
+                }
+                ('e', '█') => {
+                    cell.set_char('▄');
+                    cell.fg = rat_color;
+                    cell.bg = eye_color;
+                }
+                (_, _) => {}
+            };
+        }
+    }
+}

examples/demo2/tabs/email.rs

@@ -0,0 +1,143 @@
+use itertools::Itertools;
+use ratatui::{prelude::*, widgets::*};
+use unicode_width::UnicodeWidthStr;
+
+use crate::{layout, RgbSwatch, THEME};
+
+#[derive(Debug, Default)]
+pub struct Email {
+    from: &'static str,
+    subject: &'static str,
+    body: &'static str,
+}
+
+const EMAILS: &[Email] = &[
+    Email {
+        from: "Alice <alice@example.com>",
+        subject: "Hello",
+        body: "Hi Bob,\nHow are you?\n\nAlice",
+    },
+    Email {
+        from: "Bob <bob@example.com>",
+        subject: "Re: Hello",
+        body: "Hi Alice,\nI'm fine, thanks!\n\nBob",
+    },
+    Email {
+        from: "Charlie <charlie@example.com>",
+        subject: "Re: Hello",
+        body: "Hi Alice,\nI'm fine, thanks!\n\nCharlie",
+    },
+    Email {
+        from: "Dave <dave@example.com>",
+        subject: "Re: Hello (STOP REPLYING TO ALL)",
+        body: "Hi Everyone,\nPlease stop replying to all.\n\nDave",
+    },
+    Email {
+        from: "Eve <eve@example.com>",
+        subject: "Re: Hello (STOP REPLYING TO ALL)",
+        body: "Hi Everyone,\nI'm reading all your emails.\n\nEve",
+    },
+];
+
+#[derive(Debug, Default)]
+pub struct EmailTab {
+    selected_index: usize,
+}
+
+impl EmailTab {
+    pub fn new(selected_index: usize) -> Self {
+        Self {
+            selected_index: selected_index % EMAILS.len(),
+        }
+    }
+}
+
+impl Widget for EmailTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        RgbSwatch.render(area, buf);
+        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);
+    }
+}
+fn render_inbox(selected_index: usize, area: Rect, buf: &mut Buffer) {
+    let area = layout(area, Direction::Vertical, vec![1, 0]);
+    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);
+
+    let highlight_symbol = ">>";
+    let from_width = EMAILS
+        .iter()
+        .map(|e| e.from.width())
+        .max()
+        .unwrap_or_default();
+    let items = EMAILS
+        .iter()
+        .map(|e| {
+            let from = format!("{:width$}", e.from, width = from_width).into();
+            ListItem::new(Line::from(vec![from, " ".into(), e.subject.into()]))
+        })
+        .collect_vec();
+    let mut state = ListState::default().with_selected(Some(selected_index));
+    StatefulWidget::render(
+        List::new(items)
+            .style(theme.inbox)
+            .highlight_style(theme.selected_item)
+            .highlight_symbol(highlight_symbol),
+        area[1],
+        buf,
+        &mut state,
+    );
+    let mut scrollbar_state = ScrollbarState::default()
+        .content_length(EMAILS.len())
+        .position(selected_index);
+    Scrollbar::default()
+        .begin_symbol(None)
+        .end_symbol(None)
+        .track_symbol(None)
+        .thumb_symbol("▐")
+        .render(area[1], buf, &mut scrollbar_state);
+}
+
+fn render_email(selected_index: usize, area: Rect, buf: &mut Buffer) {
+    let theme = THEME.email;
+    let email = EMAILS.get(selected_index);
+    let block = Block::new()
+        .style(theme.body)
+        .padding(Padding::new(2, 2, 0, 0))
+        .borders(Borders::TOP)
+        .border_type(BorderType::Thick);
+    let inner = block.inner(area);
+    block.render(area, buf);
+    if let Some(email) = email {
+        let area = layout(inner, Direction::Vertical, vec![3, 0]);
+        let headers = vec![
+            Line::from(vec![
+                "From: ".set_style(theme.header),
+                email.from.set_style(theme.header_value),
+            ]),
+            Line::from(vec![
+                "Subject: ".set_style(theme.header),
+                email.subject.set_style(theme.header_value),
+            ]),
+            "-".repeat(inner.width as usize).dim().into(),
+        ];
+        Paragraph::new(headers)
+            .style(theme.body)
+            .render(area[0], buf);
+        let body = email.body.lines().map(Line::from).collect_vec();
+        Paragraph::new(body).style(theme.body).render(area[1], buf);
+    } else {
+        Paragraph::new("No email selected").render(inner, buf);
+    }
+}

examples/demo2/tabs/recipe.rs

@@ -0,0 +1,171 @@
+use itertools::Itertools;
+use ratatui::{prelude::*, widgets::*};
+
+use crate::{layout, RgbSwatch, THEME};
+
+#[derive(Debug, Default, Clone, Copy)]
+struct Ingredient {
+    quantity: &'static str,
+    name: &'static str,
+}
+
+impl Ingredient {
+    fn height(&self) -> u16 {
+        self.name.lines().count() as u16
+    }
+}
+
+impl<'a> From<Ingredient> for Row<'a> {
+    fn from(i: Ingredient) -> Self {
+        Row::new(vec![i.quantity, i.name]).height(i.height())
+    }
+}
+
+// https://www.realsimple.com/food-recipes/browse-all-recipes/ratatouille
+const RECIPE: &[(&str, &str)] = &[
+    (
+        "Step 1: ",
+        "Over medium-low heat, add the oil to a large skillet with the onion, garlic, and bay \
+        leaf, stirring occasionally, until the onion has softened.",
+    ),
+    (
+        "Step 2: ",
+        "Add the eggplant and cook, stirring occasionally, for 8 minutes or until the eggplant \
+        has softened. Stir in the zucchini, red bell pepper, tomatoes, and salt, and cook over \
+        medium heat, stirring occasionally, for 5 to 7 minutes or until the vegetables are \
+        tender. Stir in the basil and few grinds of pepper to taste.",
+    ),
+];
+
+const INGREDIENTS: &[Ingredient] = &[
+    Ingredient {
+        quantity: "4 tbsp",
+        name: "olive oil",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "onion thinly sliced",
+    },
+    Ingredient {
+        quantity: "4",
+        name: "cloves garlic\npeeled and sliced",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "small bay leaf",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "small eggplant cut\ninto 1/2 inch cubes",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "small zucchini halved\nlengthwise and cut\ninto thin slices",
+    },
+    Ingredient {
+        quantity: "1",
+        name: "red bell pepper cut\ninto slivers",
+    },
+    Ingredient {
+        quantity: "4",
+        name: "plum tomatoes\ncoarsely chopped",
+    },
+    Ingredient {
+        quantity: "1 tsp",
+        name: "kosher salt",
+    },
+    Ingredient {
+        quantity: "1/4 cup",
+        name: "shredded fresh basil\nleaves",
+    },
+    Ingredient {
+        quantity: "",
+        name: "freshly ground black\npepper",
+    },
+];
+
+#[derive(Debug)]
+pub struct RecipeTab {
+    selected_row: usize,
+}
+
+impl RecipeTab {
+    pub fn new(selected_row: usize) -> Self {
+        Self {
+            selected_row: selected_row % INGREDIENTS.len(),
+        }
+    }
+}
+
+impl Widget for RecipeTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        RgbSwatch.render(area, buf);
+        let area = area.inner(&Margin {
+            vertical: 1,
+            horizontal: 2,
+        });
+        Clear.render(area, buf);
+        Block::new()
+            .title("Ratatouille Recipe".bold().white())
+            .title_alignment(Alignment::Center)
+            .style(THEME.content)
+            .padding(Padding::new(1, 1, 2, 1))
+            .render(area, buf);
+
+        let scrollbar_area = Rect {
+            y: area.y + 2,
+            height: area.height - 3,
+            ..area
+        };
+        render_scrollbar(self.selected_row, scrollbar_area, buf);
+
+        let area = area.inner(&Margin {
+            horizontal: 2,
+            vertical: 1,
+        });
+        let area = layout(area, Direction::Horizontal, vec![44, 0]);
+
+        render_recipe(area[0], buf);
+        render_ingredients(self.selected_row, area[1], buf);
+    }
+}
+
+fn render_recipe(area: Rect, buf: &mut Buffer) {
+    let lines = RECIPE
+        .iter()
+        .map(|(step, text)| Line::from(vec![step.white().bold(), text.gray()]))
+        .collect_vec();
+    Paragraph::new(lines)
+        .wrap(Wrap { trim: true })
+        .block(Block::new().padding(Padding::new(0, 1, 0, 0)))
+        .render(area, buf);
+}
+
+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 theme = THEME.recipe;
+    StatefulWidget::render(
+        Table::new(rows)
+            .block(Block::new().style(theme.ingredients))
+            .header(Row::new(vec!["Qty", "Ingredient"]).style(theme.ingredients_header))
+            .widths(&[Constraint::Length(7), Constraint::Length(30)])
+            .highlight_style(Style::new().light_yellow()),
+        area,
+        buf,
+        &mut state,
+    );
+}
+
+fn render_scrollbar(position: usize, area: Rect, buf: &mut Buffer) {
+    let mut state = ScrollbarState::default()
+        .content_length(INGREDIENTS.len())
+        .viewport_content_length(6)
+        .position(position);
+    Scrollbar::new(ScrollbarOrientation::VerticalRight)
+        .begin_symbol(None)
+        .end_symbol(None)
+        .track_symbol(None)
+        .thumb_symbol("▐")
+        .render(area, buf, &mut state)
+}

examples/demo2/tabs/traceroute.rs

@@ -0,0 +1,199 @@
+use itertools::Itertools;
+use ratatui::{
+    prelude::*,
+    widgets::{canvas::*, *},
+};
+
+use crate::{layout, RgbSwatch, THEME};
+
+#[derive(Debug)]
+pub struct TracerouteTab {
+    selected_row: usize,
+}
+
+impl TracerouteTab {
+    pub fn new(selected_row: usize) -> Self {
+        Self {
+            selected_row: selected_row % HOPS.len(),
+        }
+    }
+}
+
+impl Widget for TracerouteTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        RgbSwatch.render(area, buf);
+        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(vec![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);
+    }
+}
+
+fn render_hops(selected_row: usize, area: Rect, buf: &mut Buffer) {
+    let mut state = TableState::default().with_selected(Some(selected_row));
+    let rows = HOPS
+        .iter()
+        .map(|hop| Row::new(vec![hop.host, hop.address]))
+        .collect_vec();
+    let block = Block::default()
+        .title("Traceroute bad.horse".bold().white())
+        .title_alignment(Alignment::Center)
+        .padding(Padding::new(1, 1, 1, 1));
+    StatefulWidget::render(
+        Table::new(rows)
+            .header(Row::new(vec!["Host", "Address"]).set_style(THEME.traceroute.header))
+            .widths(&[Constraint::Max(100), Constraint::Length(15)])
+            .highlight_style(THEME.traceroute.selected)
+            .block(block),
+        area,
+        buf,
+        &mut state,
+    );
+    let mut scrollbar_state = ScrollbarState::default()
+        .content_length(HOPS.len())
+        .position(selected_row);
+    let area = Rect {
+        width: area.width + 1,
+        y: area.y + 3,
+        height: area.height - 4,
+        ..area
+    };
+    Scrollbar::default()
+        .orientation(ScrollbarOrientation::VerticalLeft)
+        .begin_symbol(None)
+        .end_symbol(None)
+        .track_symbol(None)
+        .thumb_symbol("▌")
+        .render(area, buf, &mut scrollbar_state);
+}
+
+pub fn render_ping(progress: usize, area: Rect, buf: &mut Buffer) {
+    let mut data = [
+        8, 8, 8, 8, 7, 7, 7, 6, 6, 5, 4, 3, 3, 2, 2, 1, 1, 1, 2, 2, 3, 4, 5, 6, 7, 7, 8, 8, 8, 7,
+        7, 6, 5, 4, 3, 2, 1, 1, 1, 1, 1, 2, 4, 6, 7, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, 1, 2, 2, 2, 3,
+        3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7,
+    ];
+    let mid = progress % data.len();
+    data.rotate_left(mid);
+    Sparkline::default()
+        .block(
+            Block::new()
+                .title("Ping")
+                .title_alignment(Alignment::Center)
+                .border_type(BorderType::Thick),
+        )
+        .data(&data)
+        .style(THEME.traceroute.ping)
+        .render(area, buf);
+}
+
+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,
+        color: theme.color,
+    };
+    Canvas::default()
+        .background_color(theme.background_color)
+        .block(
+            Block::new()
+                .padding(Padding::new(1, 0, 1, 0))
+                .style(theme.style),
+        )
+        .marker(Marker::Dot)
+        // picked to show Australia for the demo as it's the most interesting part of the map
+        // (and the only part with hops ;))
+        .x_bounds([113.0, 154.0])
+        .y_bounds([-42.0, -11.0])
+        .paint(|context| {
+            context.draw(&map);
+            if let Some(path) = path {
+                context.draw(&canvas::Line::new(
+                    path.0.location.0,
+                    path.0.location.1,
+                    path.1.location.0,
+                    path.1.location.1,
+                    theme.path,
+                ));
+                context.draw(&Points {
+                    color: theme.source,
+                    coords: &[path.0.location], // sydney
+                });
+                context.draw(&Points {
+                    color: theme.destination,
+                    coords: &[path.1.location], // perth
+                });
+            }
+        })
+        .render(area, buf);
+}
+
+#[derive(Debug)]
+struct Hop {
+    host: &'static str,
+    address: &'static str,
+    location: (f64, f64),
+}
+
+impl Hop {
+    const fn new(name: &'static str, address: &'static str, location: (f64, f64)) -> Self {
+        Self {
+            host: name,
+            address,
+            location,
+        }
+    }
+}
+
+const CANBERRA: (f64, f64) = (149.1, -35.3);
+const SYDNEY: (f64, f64) = (151.1, -33.9);
+const MELBOURNE: (f64, f64) = (144.9, -37.8);
+const PERTH: (f64, f64) = (115.9, -31.9);
+const DARWIN: (f64, f64) = (130.8, -12.4);
+const BRISBANE: (f64, f64) = (153.0, -27.5);
+const ADELAIDE: (f64, f64) = (138.6, -34.9);
+
+// Go traceroute bad.horse some time, it's fun. these locations are made up and don't correspond
+// to the actual IP addresses (which are in Toronto, Canada).
+const HOPS: &[Hop] = &[
+    Hop::new("home", "127.0.0.1", CANBERRA),
+    Hop::new("bad.horse", "162.252.205.130", SYDNEY),
+    Hop::new("bad.horse", "162.252.205.131", MELBOURNE),
+    Hop::new("bad.horse", "162.252.205.132", BRISBANE),
+    Hop::new("bad.horse", "162.252.205.133", SYDNEY),
+    Hop::new("he.rides.across.the.nation", "162.252.205.134", PERTH),
+    Hop::new("the.thoroughbred.of.sin", "162.252.205.135", DARWIN),
+    Hop::new("he.got.the.application", "162.252.205.136", BRISBANE),
+    Hop::new("that.you.just.sent.in", "162.252.205.137", ADELAIDE),
+    Hop::new("it.needs.evaluation", "162.252.205.138", DARWIN),
+    Hop::new("so.let.the.games.begin", "162.252.205.139", PERTH),
+    Hop::new("a.heinous.crime", "162.252.205.140", BRISBANE),
+    Hop::new("a.show.of.force", "162.252.205.141", CANBERRA),
+    Hop::new("a.murder.would.be.nice.of.course", "162.252.205.142", PERTH),
+    Hop::new("bad.horse", "162.252.205.143", MELBOURNE),
+    Hop::new("bad.horse", "162.252.205.144", DARWIN),
+    Hop::new("bad.horse", "162.252.205.145", MELBOURNE),
+    Hop::new("he-s.bad", "162.252.205.146", PERTH),
+    Hop::new("the.evil.league.of.evil", "162.252.205.147", BRISBANE),
+    Hop::new("is.watching.so.beware", "162.252.205.148", DARWIN),
+    Hop::new("the.grade.that.you.receive", "162.252.205.149", PERTH),
+    Hop::new("will.be.your.last.we.swear", "162.252.205.150", ADELAIDE),
+    Hop::new("so.make.the.bad.horse.gleeful", "162.252.205.151", SYDNEY),
+    Hop::new("or.he-ll.make.you.his.mare", "162.252.205.152", MELBOURNE),
+    Hop::new("o_o", "162.252.205.153", BRISBANE),
+    Hop::new("you-re.saddled.up", "162.252.205.154", DARWIN),
+    Hop::new("there-s.no.recourse", "162.252.205.155", PERTH),
+    Hop::new("it-s.hi-ho.silver", "162.252.205.156", SYDNEY),
+    Hop::new("signed.bad.horse", "162.252.205.157", CANBERRA),
+];

examples/demo2/tabs/weather.rs

@@ -0,0 +1,141 @@
+use itertools::Itertools;
+use palette::Okhsv;
+use ratatui::{
+    prelude::*,
+    widgets::{calendar::CalendarEventStore, *},
+};
+use time::OffsetDateTime;
+
+use crate::{color_from_oklab, layout, RgbSwatch, THEME};
+
+pub struct WeatherTab {
+    pub selected_row: usize,
+}
+
+impl WeatherTab {
+    pub fn new(selected_row: usize) -> Self {
+        Self { selected_row }
+    }
+}
+
+impl Widget for WeatherTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        RgbSwatch.render(area, buf);
+        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 {
+            horizontal: 2,
+            vertical: 1,
+        });
+        let area = layout(area, Direction::Vertical, vec![0, 1, 1]);
+        render_gauges(self.selected_row, area[2], buf);
+
+        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);
+    }
+}
+
+fn render_calendar(area: Rect, buf: &mut Buffer) {
+    let date = OffsetDateTime::now_utc().date();
+    calendar::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())
+        .render(area, buf);
+}
+
+fn render_simple_barchart(area: Rect, buf: &mut Buffer) {
+    let data = [
+        ("Sat", 76),
+        ("Sun", 69),
+        ("Mon", 65),
+        ("Tue", 67),
+        ("Wed", 65),
+        ("Thu", 69),
+        ("Fri", 73),
+    ];
+    let data = data
+        .into_iter()
+        .map(|(label, value)| {
+            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
+                // (the demo GIFs hack around this by hacking the calculation in bars.rs)
+                .text_value(format!("{}°", value))
+                .style(if value > 70 {
+                    Style::new().fg(Color::Red)
+                } else {
+                    Style::new().fg(Color::Yellow)
+                })
+                .value_style(if value > 70 {
+                    Style::new().fg(Color::Gray).bg(Color::Red).bold()
+                } else {
+                    Style::new().fg(Color::DarkGray).bg(Color::Yellow).bold()
+                })
+                .label(label.into())
+        })
+        .collect_vec();
+    let group = BarGroup::default().bars(&data);
+    BarChart::default()
+        .data(group)
+        .bar_width(3)
+        .bar_gap(1)
+        .render(area, buf);
+}
+
+fn render_horizontal_barchart(area: Rect, buf: &mut Buffer) {
+    let bg = Color::Rgb(32, 48, 96);
+    let data = [
+        Bar::default().text_value("Winter 37-51".into()).value(51),
+        Bar::default().text_value("Spring 40-65".into()).value(65),
+        Bar::default().text_value("Summer 54-77".into()).value(77),
+        Bar::default()
+            .text_value("Fall 41-71".into())
+            .value(71)
+            .value_style(Style::new().bold()), // current season
+    ];
+    let group = BarGroup::default().label("GPU".into()).bars(&data);
+    BarChart::default()
+        .block(Block::new().padding(Padding::new(0, 0, 2, 0)))
+        .direction(Direction::Horizontal)
+        .data(group)
+        .bar_gap(1)
+        .bar_style(Style::new().fg(bg))
+        .value_style(Style::new().bg(bg).fg(Color::Gray))
+        .render(area, buf);
+}
+
+pub fn render_gauges(progress: usize, area: Rect, buf: &mut Buffer) {
+    let percent = (progress * 3).min(100) as f64;
+
+    render_line_gauge(percent, area, buf);
+}
+
+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 label = if percent < 100.0 {
+        format!("Downloading: {}%", percent)
+    } else {
+        "Download Complete!".into()
+    };
+    LineGauge::default()
+        .ratio(percent / 100.0)
+        .label(label)
+        .style(Style::new().light_blue())
+        .gauge_style(Style::new().fg(fg).bg(bg))
+        .line_set(symbols::line::THICK)
+        .render(area, buf);
+}

examples/demo2/term.rs

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,136 @@
+use ratatui::prelude::*;
+
+pub struct Theme {
+    pub root: Style,
+    pub content: Style,
+    pub app_title: Style,
+    pub tabs: Style,
+    pub tabs_selected: Style,
+    pub borders: Style,
+    pub description: Style,
+    pub description_title: Style,
+    pub key_binding: KeyBinding,
+    pub logo: Logo,
+    pub email: Email,
+    pub traceroute: Traceroute,
+    pub recipe: Recipe,
+}
+
+pub struct KeyBinding {
+    pub key: Style,
+    pub description: Style,
+}
+
+pub struct Logo {
+    pub rat: Color,
+    pub rat_eye: Color,
+    pub rat_eye_alt: Color,
+    pub term: Color,
+}
+
+pub struct Email {
+    pub tabs: Style,
+    pub tabs_selected: Style,
+    pub inbox: Style,
+    pub item: Style,
+    pub selected_item: Style,
+    pub header: Style,
+    pub header_value: Style,
+    pub body: Style,
+}
+
+pub struct Traceroute {
+    pub header: Style,
+    pub selected: Style,
+    pub ping: Style,
+    pub map: Map,
+}
+
+pub struct Map {
+    pub style: Style,
+    pub color: Color,
+    pub path: Color,
+    pub source: Color,
+    pub destination: Color,
+    pub background_color: Color,
+}
+
+pub struct Recipe {
+    pub ingredients: Style,
+    pub ingredients_header: Style,
+}
+
+pub const THEME: Theme = Theme {
+    root: Style::new().bg(DARK_BLUE),
+    content: Style::new().bg(DARK_BLUE).fg(LIGHT_GRAY),
+    app_title: Style::new()
+        .fg(WHITE)
+        .bg(DARK_BLUE)
+        .add_modifier(Modifier::BOLD),
+    tabs: Style::new().fg(MID_GRAY).bg(DARK_BLUE),
+    tabs_selected: Style::new()
+        .fg(WHITE)
+        .bg(DARK_BLUE)
+        .add_modifier(Modifier::BOLD)
+        .add_modifier(Modifier::REVERSED),
+    borders: Style::new().fg(LIGHT_GRAY),
+    description: Style::new().fg(LIGHT_GRAY).bg(DARK_BLUE),
+    description_title: Style::new().fg(LIGHT_GRAY).add_modifier(Modifier::BOLD),
+    logo: Logo {
+        rat: WHITE,
+        rat_eye: BLACK,
+        rat_eye_alt: RED,
+        term: BLACK,
+    },
+    key_binding: KeyBinding {
+        key: Style::new().fg(BLACK).bg(DARK_GRAY),
+        description: Style::new().fg(DARK_GRAY).bg(BLACK),
+    },
+    email: Email {
+        tabs: Style::new().fg(MID_GRAY).bg(DARK_BLUE),
+        tabs_selected: Style::new()
+            .fg(WHITE)
+            .bg(DARK_BLUE)
+            .add_modifier(Modifier::BOLD),
+        inbox: Style::new().bg(DARK_BLUE).fg(LIGHT_GRAY),
+        item: Style::new().fg(LIGHT_GRAY),
+        selected_item: Style::new().fg(LIGHT_YELLOW),
+        header: Style::new().add_modifier(Modifier::BOLD),
+        header_value: Style::new().fg(LIGHT_GRAY),
+        body: Style::new().bg(DARK_BLUE).fg(LIGHT_GRAY),
+    },
+    traceroute: Traceroute {
+        header: Style::new()
+            .bg(DARK_BLUE)
+            .add_modifier(Modifier::BOLD)
+            .add_modifier(Modifier::UNDERLINED),
+        selected: Style::new().fg(LIGHT_YELLOW),
+        ping: Style::new().fg(WHITE),
+        map: Map {
+            style: Style::new().bg(DARK_BLUE),
+            background_color: DARK_BLUE,
+            color: LIGHT_GRAY,
+            path: LIGHT_BLUE,
+            source: LIGHT_GREEN,
+            destination: LIGHT_RED,
+        },
+    },
+    recipe: Recipe {
+        ingredients: Style::new().bg(DARK_BLUE).fg(LIGHT_GRAY),
+        ingredients_header: Style::new()
+            .add_modifier(Modifier::BOLD)
+            .add_modifier(Modifier::UNDERLINED),
+    },
+};
+
+const DARK_BLUE: Color = Color::Rgb(16, 24, 48);
+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

examples/gauge.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/gauge.tape`
 Output "target/gauge.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 600
 Hide

examples/generate.bash

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# This script is used to generate the images for the examples README
+# It requires the following tools:
+# - cargo: https://doc.rust-lang.org/cargo/getting-started/installation.html
+# - gh: https://github.com/cli/cli
+# - git: https://git-scm.com/
+# - vhs: https://github.com/charmbracelet/vhs
+
+# 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
+
+# ensure that running each example doesn't have to wait for the build
+cargo build --examples --features=crossterm,all-widgets
+
+for tape in examples/*.tape
+do
+    gif=${tape/examples\/}
+    gif=${gif/.tape/.gif}
+    vhs $tape --quiet
+    # this can be pasted into the examples README.md
+    echo "[${gif}]: https://github.com/ratatui-org/ratatui/blob/images/examples/${gif}?raw=true"
+done
+git switch images
+git pull --rebase upstream images
+cp target/*.gif examples/
+git add examples/*.gif
+git commit -m 'docs(examples): update images'
+gh pr create
+git sw main

examples/hello_world.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/hello_world.tape`
 Output "target/hello_world.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 200
 Hide

examples/inline.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/inline.tape`
 Output "target/inline.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 600
 Type "cargo run --example=inline --features=crossterm"

examples/layout.rs

@@ -5,7 +5,8 @@ use crossterm::{
     execute,
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
-use ratatui::{prelude::*, widgets::*};
+use itertools::Itertools;
+use ratatui::{layout::Constraint::*, prelude::*, widgets::*};
 
 fn main() -> Result<(), Box<dyn Error>> {
     // setup terminal
@@ -47,50 +48,176 @@ fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
 }
 
 fn ui<B: Backend>(frame: &mut Frame<B>) {
-    let [top, mid, bottom] = *Layout::default()
+    let main_layout = Layout::default()
         .direction(Direction::Vertical)
-        .constraints(
-            [
-                Constraint::Length(4),
-                Constraint::Percentage(50),
-                Constraint::Min(4),
-            ]
-            .as_ref(),
-        )
-        .split(frame.size())
-    else {
-        return;
-    };
-    let [left, right] = *Layout::default()
-        .direction(Direction::Horizontal)
-        .horizontal_margin(5)
-        .vertical_margin(2)
-        .constraints([Constraint::Ratio(2, 5), Constraint::Ratio(3, 5)].as_ref())
-        .split(mid)
-    else {
-        return;
-    };
+        .constraints(vec![
+            Length(4),  // text
+            Length(50), // examples
+            Min(0),     // fills remaining space
+        ])
+        .split(frame.size());
+
+    // title
     frame.render_widget(
-        Paragraph::new("Constraint::Length(4)").block(Block::default().borders(Borders::ALL)),
-        top,
+        Paragraph::new(vec![
+            Line::from("Horizontal Layout Example. Press q to quit".dark_gray())
+                .alignment(Alignment::Center),
+            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],
     );
 
-    frame.render_widget(
-        Paragraph::new("Constraint::Percentage(50)").block(Block::default().borders(Borders::ALL)),
-        mid,
-    );
+    let example_rows = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![
+            Length(9),
+            Length(9),
+            Length(9),
+            Length(9),
+            Length(9),
+            Min(0), // fills remaining space
+        ])
+        .split(main_layout[1]);
+    let example_areas = example_rows
+        .iter()
+        .flat_map(|area| {
+            Layout::default()
+                .direction(Direction::Horizontal)
+                .constraints(vec![
+                    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();
 
-    frame.render_widget(
-        Paragraph::new("Constraint::Ratio(2, 5)\nhorizontal_margin(5)\nvertical_margin(2)")
-            .block(Block::default().borders(Borders::ALL)),
-        left,
-    );
-    frame.render_widget(
-        Paragraph::new("Constraint::Ratio(3, 5)").block(Block::default().borders(Borders::ALL)),
-        right,
-    );
-    frame.render_widget(
-        Paragraph::new("Constraint::Min(4)").block(Block::default().borders(Borders::ALL)),
-        bottom,
-    );
+    // the examples are a cartesian product of the following constraints
+    // e.g. Len/Len, Len/Min, Len/Max, Len/Perc, Len/Ratio, Min/Len, Min/Min, ...
+    let examples = [
+        (
+            "Len",
+            vec![
+                Length(0),
+                Length(2),
+                Length(3),
+                Length(6),
+                Length(10),
+                Length(15),
+            ],
+        ),
+        (
+            "Min",
+            vec![Min(0), Min(2), Min(3), Min(6), Min(10), Min(15)],
+        ),
+        (
+            "Max",
+            vec![Max(0), Max(2), Max(3), Max(6), Max(10), Max(15)],
+        ),
+        (
+            "Perc",
+            vec![
+                Percentage(0),
+                Percentage(25),
+                Percentage(50),
+                Percentage(75),
+                Percentage(100),
+                Percentage(150),
+            ],
+        ),
+        (
+            "Ratio",
+            vec![
+                Ratio(0, 4),
+                Ratio(1, 4),
+                Ratio(2, 4),
+                Ratio(3, 4),
+                Ratio(4, 4),
+                Ratio(6, 4),
+            ],
+        ),
+    ];
+
+    for (i, (a, b)) in examples
+        .iter()
+        .cartesian_product(examples.iter())
+        .enumerate()
+    {
+        let (name_a, examples_a) = a;
+        let (name_b, examples_b) = b;
+        let constraints = examples_a
+            .iter()
+            .copied()
+            .zip(examples_b.iter().copied())
+            .collect_vec();
+        render_example_combination(
+            frame,
+            example_areas[i],
+            &format!("{name_a}/{name_b}"),
+            constraints,
+        );
+    }
+}
+
+/// Renders a single example box
+fn render_example_combination<B: Backend>(
+    frame: &mut Frame<B>,
+    area: Rect,
+    title: &str,
+    constraints: Vec<(Constraint, Constraint)>,
+) {
+    let block = Block::default()
+        .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)]);
+    }
+    // This is to make it easy to visually see the alignment of the examples
+    // with the constraints.
+    frame.render_widget(Paragraph::new("123456789012"), layout[6]);
+}
+
+/// Renders a single example line
+fn render_single_example<B: Backend>(
+    frame: &mut Frame<B>,
+    area: Rect,
+    constraints: Vec<Constraint>,
+) {
+    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]);
+}
+
+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}"),
+    }
 }

examples/layout.tape

@@ -1,11 +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/layout.tape`
 Output "target/layout.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
-Set Height 600
+Set Height 1410
 Hide
 Type "cargo run --example=layout --features=crossterm"
 Enter
 Sleep 1s
 Show
-Sleep 5s
+Sleep 2s

examples/list.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/list.tape`
 Output "target/list.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 600
 Hide

examples/modifiers.rs

@@ -0,0 +1,116 @@
+/// 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,
+};
+
+use crossterm::{
+    event::{self, Event, KeyCode},
+    execute,
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+};
+use itertools::Itertools;
+use ratatui::{prelude::*, widgets::*};
+
+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(())
+}
+
+fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::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(());
+                }
+            }
+        }
+    }
+}
+
+fn ui<B: Backend>(frame: &mut Frame<B>) {
+    let layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![Constraint::Length(1), Constraint::Min(0)])
+        .split(frame.size());
+    frame.render_widget(
+        Paragraph::new("Note: not all terminals support all modifiers")
+            .style(Style::default().fg(Color::Red).add_modifier(Modifier::BOLD)),
+        layout[0],
+    );
+    let layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![Constraint::Length(1); 50])
+        .split(layout[1])
+        .iter()
+        .flat_map(|area| {
+            Layout::default()
+                .direction(Direction::Horizontal)
+                .constraints(vec![Constraint::Percentage(20); 5])
+                .split(*area)
+                .to_vec()
+        })
+        .collect_vec();
+
+    let colors = [
+        Color::Black,
+        Color::DarkGray,
+        Color::Gray,
+        Color::White,
+        Color::Red,
+    ];
+    let all_modifiers = once(Modifier::empty())
+        .chain(Modifier::all().iter())
+        .collect_vec();
+    let mut index = 0;
+    for bg in colors.iter() {
+        for fg in colors.iter() {
+            for modifier in &all_modifiers {
+                let modifier_name = format!("{modifier:11?}");
+                let padding = (" ").repeat(12 - modifier_name.len());
+                let paragraph = Paragraph::new(Line::from(vec![
+                    modifier_name.fg(*fg).bg(*bg).add_modifier(*modifier),
+                    padding.fg(*fg).bg(*bg).add_modifier(*modifier),
+                    // This is a hack to work around a bug in VHS which is used for rendering the
+                    // examples to gifs. The bug is that the background color of a paragraph seems
+                    // to bleed into the next character.
+                    ".".black().on_black(),
+                ]));
+                frame.render_widget(paragraph, layout[index]);
+                index += 1;
+            }
+        }
+    }
+}
+
+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/modifiers.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/modifiers.tape`
+Output "target/modifiers.gif"
+Set Theme "OceanicMaterial"
+Set Width 1200
+Set Height 1460
+Hide
+Type "cargo run --example=modifiers --features=crossterm"
+Enter
+Sleep 2s
+Show
+Sleep 1s

examples/panic.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/panic.tape`
 Output "target/panic.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 600
 Type "cargo run --example=panic --features=crossterm"

examples/paragraph.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/paragraph.tape`
 Output "target/paragraph.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 1800
 Hide

examples/popup.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/popup.tape`
 Output "target/popup.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 600
 Hide

examples/scrollbar.rs

@@ -66,27 +66,23 @@ fn run_app<B: Backend>(
                     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 as u16);
+                        app.vertical_scroll_state =
+                            app.vertical_scroll_state.position(app.vertical_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 as u16);
+                        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 as u16);
+                        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 as u16);
+                        app.horizontal_scroll_state =
+                            app.horizontal_scroll_state.position(app.horizontal_scroll);
                     }
                     _ => {}
                 }
@@ -128,7 +124,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
         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.reset()),
+        Line::from(long_line.clone()),
         Line::from("This is a line".reset()),
         Line::from(vec![
             Span::raw("Masked text: "),
@@ -141,7 +137,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
         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.reset()),
+        Line::from(long_line.clone()),
         Line::from("This is a line".reset()),
         Line::from(vec![
             Span::raw("Masked text: "),
@@ -151,10 +147,8 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
             ),
         ]),
     ];
-    app.vertical_scroll_state = app.vertical_scroll_state.content_length(text.len() as u16);
-    app.horizontal_scroll_state = app
-        .horizontal_scroll_state
-        .content_length(long_line.len() as u16);
+    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 create_block = |title| {
         Block::default()
@@ -188,7 +182,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
     let paragraph = Paragraph::new(text.clone())
         .gray()
         .block(create_block(
-            "Vertical scrollbar without arrows and mirrored",
+            "Vertical scrollbar without arrows, without track symbol and mirrored",
         ))
         .scroll((app.vertical_scroll as u16, 0));
     f.render_widget(paragraph, chunks[2]);
@@ -197,6 +191,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
             .orientation(ScrollbarOrientation::VerticalLeft)
             .symbols(scrollbar::VERTICAL)
             .begin_symbol(None)
+            .track_symbol(None)
             .end_symbol(None),
         chunks[2].inner(&Margin {
             vertical: 1,
@@ -235,7 +230,7 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &mut App) {
         Scrollbar::default()
             .orientation(ScrollbarOrientation::HorizontalBottom)
             .thumb_symbol("░")
-            .track_symbol("─"),
+            .track_symbol(Some("─")),
         chunks[4].inner(&Margin {
             vertical: 0,
             horizontal: 1,

examples/scrollbar.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/scrollbar.tape`
 Output "target/scrollbar.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 1200
 Hide

examples/sparkline.rs

@@ -133,7 +133,6 @@ fn ui<B: Backend>(f: &mut Frame<B>, app: &App) {
             [
                 Constraint::Length(3),
                 Constraint::Length(3),
-                Constraint::Length(7),
                 Constraint::Min(0),
             ]
             .as_ref(),

examples/sparkline.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/sparkline.tape`
 Output "target/sparkline.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 600
 Hide

examples/table.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/table.tape`
 Output "target/table.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 600
 Hide

examples/tabs.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/tabs.tape`
 Output "target/tabs.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 300
 Hide

examples/user_input.tape

@@ -1,6 +1,7 @@
 # This is a vhs script. See https://github.com/charmbracelet/vhs for more info.
 # To run this script, install vhs and run `vhs ./examples/user_input.tape`
 Output "target/user_input.gif"
+Set Theme "OceanicMaterial"
 Set Width 1200
 Set Height 600
 Hide

rust-toolchain.toml

@@ -0,0 +1,2 @@
+[toolchain]
+channel = "stable"

src/backend.rs

@@ -0,0 +1,337 @@
+#![warn(missing_docs)]
+//! This module provides the backend implementations for different terminal libraries.
+//!
+//! It defines the [`Backend`] trait which is used to abstract over the specific terminal library
+//! being used.
+//!
+//! Supported terminal backends:
+//! - [Crossterm]: enable the `crossterm` feature (enabled by default) and use [`CrosstermBackend`]
+//! - [Termion]: enable the `termion` feature and use [`TermionBackend`]
+//! - [Termwiz]: enable the `termwiz` feature and use [`TermwizBackend`]
+//!
+//! Additionally, a [`TestBackend`] is provided for testing purposes.
+//!
+//! See the [Backend Comparison] section of the [Ratatui Book] for more details on the different
+//! backends.
+//!
+//! Each backend supports a number of features, such as [raw mode](#raw-mode), [alternate
+//! screen](#alternate-screen), and [mouse capture](#mouse-capture). These features are generally
+//! not enabled by default, and must be enabled by the application before they can be used. See the
+//! documentation for each backend for more details.
+//!
+//! Note: most applications should use the [`Terminal`] struct instead of directly calling methods
+//! on the backend.
+//!
+//! # Example
+//!
+//! ```rust,no_run
+//! use std::io::stdout;
+//! use ratatui::prelude::*;
+//!
+//! let backend = CrosstermBackend::new(stdout());
+//! let mut terminal = Terminal::new(backend)?;
+//! terminal.clear()?;
+//! terminal.draw(|frame| {
+//!     // -- snip --
+//! })?;
+//! # std::io::Result::Ok(())
+//! ```
+//!
+//! See the the [examples] directory for more examples.
+//!
+//! # Raw Mode
+//!
+//! Raw mode is a mode where the terminal does not perform any processing or handling of the input
+//! and output. This means that features such as echoing input characters, line buffering, and
+//! special character processing (e.g., CTRL-C for SIGINT) are disabled. This is useful for
+//! applications that want to have complete control over the terminal input and output, processing
+//! each keystroke themselves.
+//!
+//! For example, in raw mode, the terminal will not perform line buffering on the input, so the
+//! application will receive each key press as it is typed, instead of waiting for the user to
+//! press enter. This makes it suitable for real-time applications like text editors,
+//! terminal-based games, and more.
+//!
+//! Each backend handles raw mode differently, so the behavior may vary depending on the backend
+//! being used. Be sure to consult the backend's specific documentation for exact details on how it
+//! implements raw mode.
+
+//! # Alternate Screen
+//!
+//! The alternate screen is a separate buffer that some terminals provide, distinct from the main
+//! screen. When activated, the terminal will display the alternate screen, hiding the current
+//! content of the main screen. Applications can write to this screen as if it were the regular
+//! terminal display, but when the application exits, the terminal will switch back to the main
+//! screen, and the contents of the alternate screen will be cleared. This is useful for
+//! applications like text editors or terminal games that want to use the full terminal window
+//! without disrupting the command line or other terminal content.
+//!
+//! This creates a seamless transition between the application and the regular terminal session, as
+//! the content displayed before launching the application will reappear after the application
+//! exits.
+//!
+//! Note that not all terminal emulators support the alternate screen, and even those that do may
+//! handle it differently. As a result, the behavior may vary depending on the backend being used.
+//! Always consult the specific backend's documentation to understand how it implements the
+//! alternate screen.
+//!
+//! # Mouse Capture
+//!
+//! Mouse capture is a mode where the terminal captures mouse events such as clicks, scrolls, and
+//! movement, and sends them to the application as special sequences or events. This enables the
+//! application to handle and respond to mouse actions, providing a more interactive and graphical
+//! user experience within the terminal. It's particularly useful for applications like
+//! terminal-based games, text editors, or other programs that require more direct interaction from
+//! the user.
+//!
+//! Each backend handles mouse capture differently, with variations in the types of events that can
+//! be captured and how they are represented. As such, the behavior may vary depending on the
+//! backend being used, and developers should consult the specific backend's documentation to
+//! understand how it implements mouse capture.
+//!
+//! [`TermionBackend`]: termion/struct.TermionBackend.html
+//! [`Terminal`]: crate::terminal::Terminal
+//! [`TermionBackend`]: termion/struct.TermionBackend.html
+//! [Crossterm]: https://crates.io/crates/crossterm
+//! [Termion]: https://crates.io/crates/termion
+//! [Termwiz]: https://crates.io/crates/termwiz
+//! [examples]: https://github.com/ratatui-org/ratatui/tree/main/examples#readme
+//! [Backend Comparison]:
+//!     https://ratatui-org.github.io/ratatui-book/concepts/backends/comparison.html
+//! [Ratatui Book]: https://ratatui-org.github.io/ratatui-book
+use std::io;
+
+use strum::{Display, EnumString};
+
+use crate::{buffer::Cell, layout::Size, prelude::Rect};
+
+#[cfg(feature = "termion")]
+mod termion;
+#[cfg(feature = "termion")]
+pub use self::termion::TermionBackend;
+
+#[cfg(feature = "crossterm")]
+mod crossterm;
+#[cfg(feature = "crossterm")]
+pub use self::crossterm::CrosstermBackend;
+
+#[cfg(feature = "termwiz")]
+mod termwiz;
+#[cfg(feature = "termwiz")]
+pub use self::termwiz::TermwizBackend;
+
+mod test;
+pub use self::test::TestBackend;
+
+/// Enum representing the different types of clearing operations that can be performed
+/// on the terminal screen.
+#[derive(Debug, Display, EnumString, Clone, Copy, Eq, PartialEq, Hash)]
+pub enum ClearType {
+    /// Clear the entire screen.
+    All,
+    /// Clear everything after the cursor.
+    AfterCursor,
+    /// Clear everything before the cursor.
+    BeforeCursor,
+    /// Clear the current line.
+    CurrentLine,
+    /// Clear everything from the cursor until the next newline.
+    UntilNewLine,
+}
+
+/// The window size in characters (columns / rows) as well as pixels.
+pub struct WindowSize {
+    /// Size of the window in characters (columns / rows).
+    pub columns_rows: Size,
+    /// Size of the window in pixels.
+    ///
+    /// The `pixels` fields may not be implemented by all terminals and return `0,0`. See
+    /// <https://man7.org/linux/man-pages/man4/tty_ioctl.4.html> under section "Get and set window
+    /// size" / TIOCGWINSZ where the fields are commented as "unused".
+    pub pixels: Size,
+}
+
+/// The `Backend` trait provides an abstraction over different terminal libraries. It defines the
+/// methods required to draw content, manipulate the cursor, and clear the terminal screen.
+///
+/// Most applications should not need to interact with the `Backend` trait directly as the
+/// [`Terminal`] struct provides a higher level interface for interacting with the terminal.
+///
+/// [`Terminal`]: crate::terminal::Terminal
+pub trait Backend {
+    /// Draw the given content to the terminal screen.
+    ///
+    /// The content is provided as an iterator over `(u16, u16, &Cell)` tuples, where the first two
+    /// elements represent the x and y coordinates, and the third element is a reference to the
+    /// [`Cell`] to be drawn.
+    fn draw<'a, I>(&mut self, content: I) -> io::Result<()>
+    where
+        I: Iterator<Item = (u16, u16, &'a Cell)>;
+
+    /// Insert `n` line breaks to the terminal screen.
+    ///
+    /// This method is optional and may not be implemented by all backends.
+    fn append_lines(&mut self, _n: u16) -> io::Result<()> {
+        Ok(())
+    }
+
+    /// Hide the cursor on the terminal screen.
+    ///
+    ///
+    /// See also [`show_cursor`].
+    /// # Example
+    ///
+    /// ```rust
+    /// # use ratatui::backend::{Backend, TestBackend};
+    /// # let mut backend = TestBackend::new(80, 25);
+    /// backend.hide_cursor()?;
+    /// // do something with hidden cursor
+    /// backend.show_cursor()?;
+    /// # std::io::Result::Ok(())
+    /// ```
+    ///
+    /// [`show_cursor`]: Backend::show_cursor
+    fn hide_cursor(&mut self) -> io::Result<()>;
+
+    /// Show the cursor on the terminal screen.
+    ///
+    /// See [`hide_cursor`] for an example.
+    ///
+    /// [`hide_cursor`]: Backend::hide_cursor
+    fn show_cursor(&mut self) -> io::Result<()>;
+
+    /// Get the current cursor position on the terminal screen.
+    ///
+    /// The returned tuple contains the x and y coordinates of the cursor. The origin
+    /// (0, 0) is at the top left corner of the screen.
+    ///
+    /// See [`set_cursor`] for an example.
+    ///
+    /// [`set_cursor`]: Backend::set_cursor
+    fn get_cursor(&mut self) -> io::Result<(u16, u16)>;
+
+    /// Set the cursor position on the terminal screen to the given x and y coordinates.
+    ///
+    /// The origin (0, 0) is at the top left corner of the screen.
+    ///
+    /// # Example
+    ///
+    /// ```rust
+    /// # use ratatui::backend::{Backend, TestBackend};
+    /// # let mut backend = TestBackend::new(80, 25);
+    /// backend.set_cursor(10, 20)?;
+    /// assert_eq!(backend.get_cursor()?, (10, 20));
+    /// # std::io::Result::Ok(())
+    /// ```
+    ///
+    /// [`get_cursor`]: Backend::get_cursor
+    fn set_cursor(&mut self, x: u16, y: u16) -> io::Result<()>;
+
+    /// Clears the whole terminal scree
+    ///
+    /// # Example
+    ///
+    /// ```rust,no_run
+    /// # use ratatui::backend::{Backend, TestBackend};
+    /// # let mut backend = TestBackend::new(80, 25);
+    /// backend.clear()?;
+    /// # std::io::Result::Ok(())
+    /// ```
+    fn clear(&mut self) -> io::Result<()>;
+
+    /// Clears a specific region of the terminal specified by the [`ClearType`] parameter
+    ///
+    /// This method is optional and may not be implemented by all backends. The default
+    /// implementation calls [`clear`] if the `clear_type` is [`ClearType::All`] and returns an
+    /// error otherwise.
+    ///
+    /// # Example
+    ///
+    /// ```rust,no_run
+    /// # use ratatui::{prelude::*, backend::{TestBackend, ClearType}};
+    /// # let mut backend = TestBackend::new(80, 25);
+    /// backend.clear_region(ClearType::All)?;
+    /// # std::io::Result::Ok(())
+    /// ```
+    ///
+    /// # Errors
+    ///
+    /// This method will return an error if the terminal screen could not be cleared. It will also
+    /// return an error if the `clear_type` is not supported by the backend.
+    ///
+    /// [`clear`]: Backend::clear
+    fn clear_region(&mut self, clear_type: ClearType) -> io::Result<()> {
+        match clear_type {
+            ClearType::All => self.clear(),
+            ClearType::AfterCursor
+            | ClearType::BeforeCursor
+            | ClearType::CurrentLine
+            | ClearType::UntilNewLine => Err(io::Error::new(
+                io::ErrorKind::Other,
+                format!("clear_type [{clear_type:?}] not supported with this backend"),
+            )),
+        }
+    }
+
+    /// Get the size of the terminal screen in columns/rows as a [`Rect`].
+    ///
+    /// The returned [`Rect`] contains the width and height of the terminal screen.
+    ///
+    /// # Example
+    ///
+    /// ```rust,no_run
+    /// # use ratatui::{prelude::*, backend::TestBackend};
+    /// let backend = TestBackend::new(80, 25);
+    /// assert_eq!(backend.size()?, Rect::new(0, 0, 80, 25));
+    /// # std::io::Result::Ok(())
+    /// ```
+    fn size(&self) -> io::Result<Rect>;
+
+    /// Get the size of the terminal screen in columns/rows and pixels as a [`WindowSize`].
+    ///
+    /// The reason for this not returning only the pixel size, given the redundancy with the
+    /// `size()` method, is that the underlying backends most likely get both values with one
+    /// syscall, and the user is also most likely to need columns and rows along with pixel size.
+    fn window_size(&mut self) -> io::Result<WindowSize>;
+
+    /// Flush any buffered content to the terminal screen.
+    fn flush(&mut self) -> io::Result<()>;
+}
+
+#[cfg(test)]
+mod tests {
+    use strum::ParseError;
+
+    use super::*;
+
+    #[test]
+    fn clear_type_tostring() {
+        assert_eq!(ClearType::All.to_string(), "All");
+        assert_eq!(ClearType::AfterCursor.to_string(), "AfterCursor");
+        assert_eq!(ClearType::BeforeCursor.to_string(), "BeforeCursor");
+        assert_eq!(ClearType::CurrentLine.to_string(), "CurrentLine");
+        assert_eq!(ClearType::UntilNewLine.to_string(), "UntilNewLine");
+    }
+
+    #[test]
+    fn clear_type_from_str() {
+        assert_eq!("All".parse::<ClearType>(), Ok(ClearType::All));
+        assert_eq!(
+            "AfterCursor".parse::<ClearType>(),
+            Ok(ClearType::AfterCursor)
+        );
+        assert_eq!(
+            "BeforeCursor".parse::<ClearType>(),
+            Ok(ClearType::BeforeCursor)
+        );
+        assert_eq!(
+            "CurrentLine".parse::<ClearType>(),
+            Ok(ClearType::CurrentLine)
+        );
+        assert_eq!(
+            "UntilNewLine".parse::<ClearType>(),
+            Ok(ClearType::UntilNewLine)
+        );
+        assert_eq!("".parse::<ClearType>(), Err(ParseError::VariantNotFound));
+    }
+}

src/backend/crossterm.rs

@@ -1,10 +1,7 @@
-//! This module provides the `CrosstermBackend` implementation for the `Backend` trait.
-//! It uses the `crossterm` crate to interact with the terminal.
+//! This module provides the [`CrosstermBackend`] implementation for the [`Backend`] trait. It uses
+//! the [Crossterm] crate to interact with the terminal.
 //!
-//!
-//! [`Backend`]: trait.Backend.html
-//! [`CrosstermBackend`]: struct.CrosstermBackend.html
-
+//! [Crossterm]: https://crates.io/crates/crossterm
 use std::io::{self, Write};
 
 use crossterm::{
@@ -18,42 +15,87 @@ use crossterm::{
 };
 
 use crate::{
-    backend::{Backend, ClearType},
+    backend::{Backend, ClearType, WindowSize},
     buffer::Cell,
-    layout::Rect,
+    layout::Size,
+    prelude::Rect,
     style::{Color, Modifier},
 };
 
-/// A backend implementation using the `crossterm` crate.
+/// A [`Backend`] implementation that uses [Crossterm] to render to the terminal.
 ///
-/// The `CrosstermBackend` struct is a wrapper around a type implementing `Write`, which
-/// is used to send commands to the terminal. It provides methods for drawing content,
-/// manipulating the cursor, and clearing the terminal screen.
+/// The `CrosstermBackend` struct is a wrapper around a writer implementing [`Write`], which is
+/// used to send commands to the terminal. It provides methods for drawing content, manipulating
+/// the cursor, and clearing the terminal screen.
+///
+/// Most applications should not call the methods on `CrosstermBackend` directly, but will instead
+/// use the [`Terminal`] struct, which provides a more ergonomic interface.
+///
+/// Usually applications will enable raw mode and switch to alternate screen mode after creating
+/// a `CrosstermBackend`. This is done by calling [`crossterm::terminal::enable_raw_mode`] and
+/// [`crossterm::terminal::EnterAlternateScreen`] (and the corresponding disable/leave functions
+/// when the application exits). This is not done automatically by the backend because it is
+/// possible that the application may want to use the terminal for other purposes (like showing
+/// help text) before entering alternate screen mode.
 ///
 /// # Example
 ///
-/// ```rust
-/// use ratatui::backend::{Backend, CrosstermBackend};
+/// ```rust,no_run
+/// use std::io::{stdout, stderr};
+/// use crossterm::{
+///     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+///     ExecutableCommand,
+/// };
+/// use ratatui::prelude::*;
 ///
-/// # fn main() -> Result<(), Box<dyn std::error::Error>> {
-/// let buffer = std::io::stdout();
-/// let mut backend = CrosstermBackend::new(buffer);
-/// backend.clear()?;
-/// # Ok(())
-/// # }
+/// let mut backend = CrosstermBackend::new(stdout());
+/// // or
+/// let backend = CrosstermBackend::new(stderr());
+/// let mut terminal = Terminal::new(backend)?;
+///
+/// enable_raw_mode()?;
+/// stdout().execute(EnterAlternateScreen)?;
+///
+/// terminal.clear()?;
+/// terminal.draw(|frame| {
+///     // -- snip --
+/// })?;
+///
+/// stdout().execute(LeaveAlternateScreen)?;
+/// disable_raw_mode()?;
+///
+/// # std::io::Result::Ok(())
 /// ```
-#[derive(Debug, Default, Clone)]
+///
+/// See the the [examples] directory for more examples. See the [`backend`] module documentation
+/// for more details on raw mode and alternate screen.
+///
+/// [`Write`]: std::io::Write
+/// [`Terminal`]: crate::terminal::Terminal
+/// [`backend`]: crate::backend
+/// [Crossterm]: https://crates.io/crates/crossterm
+/// [examples]: https://github.com/ratatui-org/ratatui/tree/main/examples#examples
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct CrosstermBackend<W: Write> {
-    buffer: W,
+    /// The writer used to send commands to the terminal.
+    writer: W,
 }
 
 impl<W> CrosstermBackend<W>
 where
     W: Write,
 {
-    /// Creates a new `CrosstermBackend` with the given buffer.
-    pub fn new(buffer: W) -> CrosstermBackend<W> {
-        CrosstermBackend { buffer }
+    /// Creates a new `CrosstermBackend` with the given writer.
+    ///
+    /// # Example
+    ///
+    /// ```rust,no_run
+    /// # use std::io::stdout;
+    /// # use ratatui::prelude::*;
+    /// let backend = CrosstermBackend::new(stdout());
+    /// ```
+    pub fn new(writer: W) -> CrosstermBackend<W> {
+        CrosstermBackend { writer }
     }
 }
 
@@ -63,12 +105,12 @@ where
 {
     /// Writes a buffer of bytes to the underlying buffer.
     fn write(&mut self, buf: &[u8]) -> io::Result<usize> {
-        self.buffer.write(buf)
+        self.writer.write(buf)
     }
 
     /// Flushes the underlying buffer.
     fn flush(&mut self) -> io::Result<()> {
-        self.buffer.flush()
+        self.writer.flush()
     }
 }
 
@@ -88,7 +130,7 @@ where
         for (x, y, cell) in content {
             // Move the cursor if the previous location was not (x - 1, y)
             if !matches!(last_pos, Some(p) if x == p.0 + 1 && y == p.1) {
-                map_error(queue!(self.buffer, MoveTo(x, y)))?;
+                queue!(self.writer, MoveTo(x, y))?;
             }
             last_pos = Some((x, y));
             if cell.modifier != modifier {
@@ -96,43 +138,43 @@ where
                     from: modifier,
                     to: cell.modifier,
                 };
-                diff.queue(&mut self.buffer)?;
+                diff.queue(&mut self.writer)?;
                 modifier = cell.modifier;
             }
             if cell.fg != fg {
                 let color = CColor::from(cell.fg);
-                map_error(queue!(self.buffer, SetForegroundColor(color)))?;
+                queue!(self.writer, SetForegroundColor(color))?;
                 fg = cell.fg;
             }
             if cell.bg != bg {
                 let color = CColor::from(cell.bg);
-                map_error(queue!(self.buffer, SetBackgroundColor(color)))?;
+                queue!(self.writer, SetBackgroundColor(color))?;
                 bg = cell.bg;
             }
             if cell.underline_color != underline_color {
                 let color = CColor::from(cell.underline_color);
-                map_error(queue!(self.buffer, SetUnderlineColor(color)))?;
+                queue!(self.writer, SetUnderlineColor(color))?;
                 underline_color = cell.underline_color;
             }
 
-            map_error(queue!(self.buffer, Print(&cell.symbol)))?;
+            queue!(self.writer, Print(&cell.symbol))?;
         }
 
-        map_error(queue!(
-            self.buffer,
+        queue!(
+            self.writer,
             SetForegroundColor(CColor::Reset),
             SetBackgroundColor(CColor::Reset),
             SetUnderlineColor(CColor::Reset),
             SetAttribute(CAttribute::Reset)
-        ))
+        )
     }
 
     fn hide_cursor(&mut self) -> io::Result<()> {
-        map_error(execute!(self.buffer, Hide))
+        execute!(self.writer, Hide)
     }
 
     fn show_cursor(&mut self) -> io::Result<()> {
-        map_error(execute!(self.buffer, Show))
+        execute!(self.writer, Show)
     }
 
     fn get_cursor(&mut self) -> io::Result<(u16, u16)> {
@@ -141,7 +183,7 @@ where
     }
 
     fn set_cursor(&mut self, x: u16, y: u16) -> io::Result<()> {
-        map_error(execute!(self.buffer, MoveTo(x, y)))
+        execute!(self.writer, MoveTo(x, y))
     }
 
     fn clear(&mut self) -> io::Result<()> {
@@ -149,8 +191,8 @@ where
     }
 
     fn clear_region(&mut self, clear_type: ClearType) -> io::Result<()> {
-        map_error(execute!(
-            self.buffer,
+        execute!(
+            self.writer,
             Clear(match clear_type {
                 ClearType::All => crossterm::terminal::ClearType::All,
                 ClearType::AfterCursor => crossterm::terminal::ClearType::FromCursorDown,
@@ -158,30 +200,40 @@ where
                 ClearType::CurrentLine => crossterm::terminal::ClearType::CurrentLine,
                 ClearType::UntilNewLine => crossterm::terminal::ClearType::UntilNewLine,
             })
-        ))
+        )
     }
 
     fn append_lines(&mut self, n: u16) -> io::Result<()> {
         for _ in 0..n {
-            map_error(queue!(self.buffer, Print("\n")))?;
+            queue!(self.writer, Print("\n"))?;
         }
-        self.buffer.flush()
+        self.writer.flush()
     }
 
     fn size(&self) -> io::Result<Rect> {
-        let (width, height) =
-            terminal::size().map_err(|e| io::Error::new(io::ErrorKind::Other, e.to_string()))?;
-
+        let (width, height) = terminal::size()?;
         Ok(Rect::new(0, 0, width, height))
     }
 
-    fn flush(&mut self) -> io::Result<()> {
-        self.buffer.flush()
+    fn window_size(&mut self) -> Result<WindowSize, io::Error> {
+        let crossterm::terminal::WindowSize {
+            columns,
+            rows,
+            width,
+            height,
+        } = terminal::window_size()?;
+        Ok(WindowSize {
+            columns_rows: Size {
+                width: columns,
+                height: rows,
+            },
+            pixels: Size { width, height },
+        })
     }
-}
 
-fn map_error(error: crossterm::Result<()>) -> io::Result<()> {
-    error.map_err(|e| io::Error::new(io::ErrorKind::Other, e.to_string()))
+    fn flush(&mut self) -> io::Result<()> {
+        self.writer.flush()
+    }
 }
 
 impl From<Color> for CColor {
@@ -213,7 +265,7 @@ impl From<Color> for CColor {
 /// The `ModifierDiff` struct is used to calculate the difference between two `Modifier`
 /// values. This is useful when updating the terminal display, as it allows for more
 /// efficient updates by only sending the necessary changes.
-#[derive(Debug, Default, Clone, Copy)]
+#[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash)]
 struct ModifierDiff {
     pub from: Modifier,
     pub to: Modifier,
@@ -227,54 +279,54 @@ impl ModifierDiff {
         //use crossterm::Attribute;
         let removed = self.from - self.to;
         if removed.contains(Modifier::REVERSED) {
-            map_error(queue!(w, SetAttribute(CAttribute::NoReverse)))?;
+            queue!(w, SetAttribute(CAttribute::NoReverse))?;
         }
         if removed.contains(Modifier::BOLD) {
-            map_error(queue!(w, SetAttribute(CAttribute::NormalIntensity)))?;
+            queue!(w, SetAttribute(CAttribute::NormalIntensity))?;
             if self.to.contains(Modifier::DIM) {
-                map_error(queue!(w, SetAttribute(CAttribute::Dim)))?;
+                queue!(w, SetAttribute(CAttribute::Dim))?;
             }
         }
         if removed.contains(Modifier::ITALIC) {
-            map_error(queue!(w, SetAttribute(CAttribute::NoItalic)))?;
+            queue!(w, SetAttribute(CAttribute::NoItalic))?;
         }
         if removed.contains(Modifier::UNDERLINED) {
-            map_error(queue!(w, SetAttribute(CAttribute::NoUnderline)))?;
+            queue!(w, SetAttribute(CAttribute::NoUnderline))?;
         }
         if removed.contains(Modifier::DIM) {
-            map_error(queue!(w, SetAttribute(CAttribute::NormalIntensity)))?;
+            queue!(w, SetAttribute(CAttribute::NormalIntensity))?;
         }
         if removed.contains(Modifier::CROSSED_OUT) {
-            map_error(queue!(w, SetAttribute(CAttribute::NotCrossedOut)))?;
+            queue!(w, SetAttribute(CAttribute::NotCrossedOut))?;
         }
         if removed.contains(Modifier::SLOW_BLINK) || removed.contains(Modifier::RAPID_BLINK) {
-            map_error(queue!(w, SetAttribute(CAttribute::NoBlink)))?;
+            queue!(w, SetAttribute(CAttribute::NoBlink))?;
         }
 
         let added = self.to - self.from;
         if added.contains(Modifier::REVERSED) {
-            map_error(queue!(w, SetAttribute(CAttribute::Reverse)))?;
+            queue!(w, SetAttribute(CAttribute::Reverse))?;
         }
         if added.contains(Modifier::BOLD) {
-            map_error(queue!(w, SetAttribute(CAttribute::Bold)))?;
+            queue!(w, SetAttribute(CAttribute::Bold))?;
         }
         if added.contains(Modifier::ITALIC) {
-            map_error(queue!(w, SetAttribute(CAttribute::Italic)))?;
+            queue!(w, SetAttribute(CAttribute::Italic))?;
         }
         if added.contains(Modifier::UNDERLINED) {
-            map_error(queue!(w, SetAttribute(CAttribute::Underlined)))?;
+            queue!(w, SetAttribute(CAttribute::Underlined))?;
         }
         if added.contains(Modifier::DIM) {
-            map_error(queue!(w, SetAttribute(CAttribute::Dim)))?;
+            queue!(w, SetAttribute(CAttribute::Dim))?;
         }
         if added.contains(Modifier::CROSSED_OUT) {
-            map_error(queue!(w, SetAttribute(CAttribute::CrossedOut)))?;
+            queue!(w, SetAttribute(CAttribute::CrossedOut))?;
         }
         if added.contains(Modifier::SLOW_BLINK) {
-            map_error(queue!(w, SetAttribute(CAttribute::SlowBlink)))?;
+            queue!(w, SetAttribute(CAttribute::SlowBlink))?;
         }
         if added.contains(Modifier::RAPID_BLINK) {
-            map_error(queue!(w, SetAttribute(CAttribute::RapidBlink)))?;
+            queue!(w, SetAttribute(CAttribute::RapidBlink))?;
         }
 
         Ok(())

src/backend/mod.rs

@@ -1,117 +0,0 @@
-//! This module provides the backend implementations for different terminal libraries.
-//! It defines the [`Backend`] trait which is used to abstract over the specific
-//! terminal library being used.
-//!
-//! The following terminal libraries are supported:
-//! - Crossterm (with the `crossterm` feature)
-//! - Termion (with the `termion` feature)
-//! - Termwiz (with the `termwiz` feature)
-//!
-//! Additionally, a [`TestBackend`] is provided for testing purposes.
-//!
-//! # Example
-//!
-//! ```rust
-//! use ratatui::backend::{Backend, CrosstermBackend};
-//!
-//! # fn main() -> Result<(), Box<dyn std::error::Error>> {
-//! let buffer = std::io::stdout();
-//! let mut backend = CrosstermBackend::new(buffer);
-//! backend.clear()?;
-//! # Ok(())
-//! # }
-//! ```
-//!
-//! [`Backend`]: trait.Backend.html
-//! [`TestBackend`]: struct.TestBackend.html
-
-use std::io;
-
-use crate::{buffer::Cell, layout::Rect};
-
-#[cfg(feature = "termion")]
-mod termion;
-#[cfg(feature = "termion")]
-pub use self::termion::TermionBackend;
-
-#[cfg(feature = "crossterm")]
-mod crossterm;
-#[cfg(feature = "crossterm")]
-pub use self::crossterm::CrosstermBackend;
-
-#[cfg(feature = "termwiz")]
-mod termwiz;
-#[cfg(feature = "termwiz")]
-pub use self::termwiz::TermwizBackend;
-
-mod test;
-pub use self::test::TestBackend;
-
-/// Enum representing the different types of clearing operations that can be performed
-/// on the terminal screen.
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub enum ClearType {
-    All,
-    AfterCursor,
-    BeforeCursor,
-    CurrentLine,
-    UntilNewLine,
-}
-
-/// The `Backend` trait provides an abstraction over different terminal libraries.
-/// It defines the methods required to draw content, manipulate the cursor, and
-/// clear the terminal screen.
-pub trait Backend {
-    /// Draw the given content to the terminal screen.
-    ///
-    /// The content is provided as an iterator over `(u16, u16, &Cell)` tuples,
-    /// where the first two elements represent the x and y coordinates, and the
-    /// third element is a reference to the [`Cell`] to be drawn.
-    fn draw<'a, I>(&mut self, content: I) -> Result<(), io::Error>
-    where
-        I: Iterator<Item = (u16, u16, &'a Cell)>;
-
-    /// Insert `n` line breaks to the terminal screen.
-    ///
-    /// This method is optional and may not be implemented by all backends.
-    fn append_lines(&mut self, _n: u16) -> io::Result<()> {
-        Ok(())
-    }
-
-    /// Hide the cursor on the terminal screen.
-    fn hide_cursor(&mut self) -> Result<(), io::Error>;
-
-    /// Show the cursor on the terminal screen.
-    fn show_cursor(&mut self) -> Result<(), io::Error>;
-
-    /// Get the current cursor position on the terminal screen.
-    fn get_cursor(&mut self) -> Result<(u16, u16), io::Error>;
-
-    /// Set the cursor position on the terminal screen to the given x and y coordinates.
-    fn set_cursor(&mut self, x: u16, y: u16) -> Result<(), io::Error>;
-
-    /// Clears the whole terminal screen
-    fn clear(&mut self) -> Result<(), io::Error>;
-
-    /// Clears a specific region of the terminal specified by the [`ClearType`] parameter
-    ///
-    /// This method is optional and may not be implemented by all backends.
-    fn clear_region(&mut self, clear_type: ClearType) -> Result<(), io::Error> {
-        match clear_type {
-            ClearType::All => self.clear(),
-            ClearType::AfterCursor
-            | ClearType::BeforeCursor
-            | ClearType::CurrentLine
-            | ClearType::UntilNewLine => Err(io::Error::new(
-                io::ErrorKind::Other,
-                format!("clear_type [{clear_type:?}] not supported with this backend"),
-            )),
-        }
-    }
-
-    /// Get the size of the terminal screen as a [`Rect`].
-    fn size(&self) -> Result<Rect, io::Error>;
-
-    /// Flush any buffered content to the terminal screen.
-    fn flush(&mut self) -> Result<(), io::Error>;
-}

src/backend/termion.rs

@@ -1,51 +1,86 @@
-//! This module provides the `TermionBackend` implementation for the [`Backend`] trait.
-//! It uses the Termion crate to interact with the terminal.
+//! This module provides the [`TermionBackend`] implementation for the [`Backend`] trait. It uses
+//! the [Termion] crate to interact with the terminal.
 //!
 //! [`Backend`]: crate::backend::Backend
 //! [`TermionBackend`]: crate::backend::TermionBackend
-
+//! [Termion]: https://docs.rs/termion
 use std::{
     fmt,
     io::{self, Write},
 };
 
 use crate::{
-    backend::{Backend, ClearType},
+    backend::{Backend, ClearType, WindowSize},
     buffer::Cell,
-    layout::Rect,
+    prelude::Rect,
     style::{Color, Modifier},
 };
 
-/// A backend that uses the Termion library to draw content, manipulate the cursor,
-/// and clear the terminal screen.
+/// A [`Backend`] implementation that uses [Termion] to render to the terminal.
+///
+/// The `TermionBackend` struct is a wrapper around a writer implementing [`Write`], which is used
+/// to send commands to the terminal. It provides methods for drawing content, manipulating the
+/// cursor, and clearing the terminal screen.
+///
+/// Most applications should not call the methods on `TermionBackend` directly, but will instead
+/// use the [`Terminal`] struct, which provides a more ergonomic interface.
+///
+/// Usually applications will enable raw mode and switch to alternate screen mode when starting.
+/// This is done by calling [`IntoRawMode::into_raw_mode()`] and
+/// [`IntoAlternateScreen::into_alternate_screen()`] on the writer before creating the backend.
+/// This is not done automatically by the backend because it is possible that the application may
+/// want to use the terminal for other purposes (like showing help text) before entering alternate
+/// screen mode. This backend automatically disable raw mode and switches back to the primary
+/// screen when the writer is dropped.
 ///
 /// # Example
 ///
-/// ```rust
-/// use ratatui::backend::{Backend, TermionBackend};
+/// ```rust,no_run
+/// use std::io::{stdout, stderr};
+/// use ratatui::prelude::*;
+/// use termion::{raw::IntoRawMode, screen::IntoAlternateScreen};
 ///
-/// # fn main() -> Result<(), Box<dyn std::error::Error>> {
-/// let stdout = std::io::stdout();
-/// let mut backend = TermionBackend::new(stdout);
-/// backend.clear()?;
-/// # Ok(())
-/// # }
+/// let writer = stdout().into_raw_mode()?.into_alternate_screen()?;
+/// let mut backend = TermionBackend::new(writer);
+/// // or
+/// let writer = stderr().into_raw_mode()?.into_alternate_screen()?;
+/// let backend = TermionBackend::new(stderr());
+/// let mut terminal = Terminal::new(backend)?;
+///
+/// terminal.clear()?;
+/// terminal.draw(|frame| {
+///     // -- snip --
+/// })?;
+/// # std::io::Result::Ok(())
 /// ```
-#[derive(Debug, Default, Clone)]
+///
+/// [`IntoRawMode::into_raw_mode()`]: termion::raw::IntoRawMode
+/// [`IntoAlternateScreen::into_alternate_screen()`]: termion::screen::IntoAlternateScreen
+/// [`Terminal`]: crate::terminal::Terminal
+/// [Termion]: https://docs.rs/termion
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct TermionBackend<W>
 where
     W: Write,
 {
-    stdout: W,
+    writer: W,
 }
 
 impl<W> TermionBackend<W>
 where
     W: Write,
 {
-    /// Creates a new Termion backend with the given output.
-    pub fn new(stdout: W) -> TermionBackend<W> {
-        TermionBackend { stdout }
+    /// Creates a new Termion backend with the given writer.
+    ///
+    /// # Example
+    ///
+    /// ```rust,no_run
+    /// # use std::io::stdout;
+    /// # use ratatui::prelude::*;
+    /// let backend = TermionBackend::new(stdout());
+    /// ```
+    pub fn new(writer: W) -> TermionBackend<W> {
+        TermionBackend { writer }
     }
 }
 
@@ -54,11 +89,11 @@ where
     W: Write,
 {
     fn write(&mut self, buf: &[u8]) -> io::Result<usize> {
-        self.stdout.write(buf)
+        self.writer.write(buf)
     }
 
     fn flush(&mut self) -> io::Result<()> {
-        self.stdout.flush()
+        self.writer.flush()
     }
 }
 
@@ -72,39 +107,39 @@ where
 
     fn clear_region(&mut self, clear_type: ClearType) -> io::Result<()> {
         match clear_type {
-            ClearType::All => write!(self.stdout, "{}", termion::clear::All)?,
-            ClearType::AfterCursor => write!(self.stdout, "{}", termion::clear::AfterCursor)?,
-            ClearType::BeforeCursor => write!(self.stdout, "{}", termion::clear::BeforeCursor)?,
-            ClearType::CurrentLine => write!(self.stdout, "{}", termion::clear::CurrentLine)?,
-            ClearType::UntilNewLine => write!(self.stdout, "{}", termion::clear::UntilNewline)?,
+            ClearType::All => write!(self.writer, "{}", termion::clear::All)?,
+            ClearType::AfterCursor => write!(self.writer, "{}", termion::clear::AfterCursor)?,
+            ClearType::BeforeCursor => write!(self.writer, "{}", termion::clear::BeforeCursor)?,
+            ClearType::CurrentLine => write!(self.writer, "{}", termion::clear::CurrentLine)?,
+            ClearType::UntilNewLine => write!(self.writer, "{}", termion::clear::UntilNewline)?,
         };
-        self.stdout.flush()
+        self.writer.flush()
     }
 
     fn append_lines(&mut self, n: u16) -> io::Result<()> {
         for _ in 0..n {
-            writeln!(self.stdout)?;
+            writeln!(self.writer)?;
         }
-        self.stdout.flush()
+        self.writer.flush()
     }
 
     fn hide_cursor(&mut self) -> io::Result<()> {
-        write!(self.stdout, "{}", termion::cursor::Hide)?;
-        self.stdout.flush()
+        write!(self.writer, "{}", termion::cursor::Hide)?;
+        self.writer.flush()
     }
 
     fn show_cursor(&mut self) -> io::Result<()> {
-        write!(self.stdout, "{}", termion::cursor::Show)?;
-        self.stdout.flush()
+        write!(self.writer, "{}", termion::cursor::Show)?;
+        self.writer.flush()
     }
 
     fn get_cursor(&mut self) -> io::Result<(u16, u16)> {
-        termion::cursor::DetectCursorPos::cursor_pos(&mut self.stdout).map(|(x, y)| (x - 1, y - 1))
+        termion::cursor::DetectCursorPos::cursor_pos(&mut self.writer).map(|(x, y)| (x - 1, y - 1))
     }
 
     fn set_cursor(&mut self, x: u16, y: u16) -> io::Result<()> {
-        write!(self.stdout, "{}", termion::cursor::Goto(x + 1, y + 1))?;
-        self.stdout.flush()
+        write!(self.writer, "{}", termion::cursor::Goto(x + 1, y + 1))?;
+        self.writer.flush()
     }
 
     fn draw<'a, I>(&mut self, content: I) -> io::Result<()>
@@ -147,7 +182,7 @@ where
             string.push_str(&cell.symbol);
         }
         write!(
-            self.stdout,
+            self.writer,
             "{string}{}{}{}",
             Fg(Color::Reset),
             Bg(Color::Reset),
@@ -160,20 +195,27 @@ where
         Ok(Rect::new(0, 0, terminal.0, terminal.1))
     }
 
+    fn window_size(&mut self) -> Result<WindowSize, io::Error> {
+        Ok(WindowSize {
+            columns_rows: termion::terminal_size()?.into(),
+            pixels: termion::terminal_size_pixels()?.into(),
+        })
+    }
+
     fn flush(&mut self) -> io::Result<()> {
-        self.stdout.flush()
+        self.writer.flush()
     }
 }
-#[derive(Debug, Default, Clone, Copy)]
+#[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash)]
 struct Fg(Color);
 
-#[derive(Debug, Default, Clone, Copy)]
+#[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash)]
 struct Bg(Color);
 
 /// The `ModifierDiff` struct is used to calculate the difference between two `Modifier`
 /// values. This is useful when updating the terminal display, as it allows for more
 /// efficient updates by only sending the necessary changes.
-#[derive(Debug, Default, Clone, Copy)]
+#[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash)]
 struct ModifierDiff {
     from: Modifier,
     to: Modifier,

src/backend/termwiz.rs

@@ -1,8 +1,9 @@
-//! This module provides the `TermwizBackend` implementation for the [`Backend`] trait.
-//! It uses the `termwiz` crate to interact with the terminal.
+//! This module provides the `TermwizBackend` implementation for the [`Backend`] trait. It uses the
+//! [Termwiz] crate to interact with the terminal.
 //!
 //! [`Backend`]: trait.Backend.html
 //! [`TermwizBackend`]: crate::backend::TermionBackend
+//! [Termwiz]: https://crates.io/crates/termwiz
 
 use std::{error::Error, io};
 
@@ -11,34 +12,78 @@ use termwiz::{
     cell::{AttributeChange, Blink, Intensity, Underline},
     color::{AnsiColor, ColorAttribute, SrgbaTuple},
     surface::{Change, CursorVisibility, Position},
-    terminal::{buffered::BufferedTerminal, SystemTerminal, Terminal},
+    terminal::{buffered::BufferedTerminal, ScreenSize, SystemTerminal, Terminal},
 };
 
 use crate::{
-    backend::Backend,
+    backend::{Backend, WindowSize},
     buffer::Cell,
-    layout::Rect,
+    layout::Size,
+    prelude::Rect,
     style::{Color, Modifier},
 };
 
-/// Termwiz backend implementation for the [`Backend`] trait.
+/// A [`Backend`] implementation that uses [Termwiz] to render to the terminal.
+///
+/// The `TermwizBackend` struct is a wrapper around a [`BufferedTerminal`], which is used to send
+/// commands to the terminal. It provides methods for drawing content, manipulating the cursor, and
+/// clearing the terminal screen.
+///
+/// Most applications should not call the methods on `TermwizBackend` directly, but will instead
+/// use the [`Terminal`] struct, which provides a more ergonomic interface.
+///
+/// This backend automatically enables raw mode and switches to the alternate screen when it is
+/// created using the [`TermwizBackend::new`] method (and disables raw mode and returns to the main
+/// screen when dropped). Use the [`TermwizBackend::with_buffered_terminal`] to create a new
+/// instance with a custom [`BufferedTerminal`] if this is not desired.
+///
 /// # Example
 ///
 /// ```rust,no_run
-/// use ratatui::backend::{Backend, TermwizBackend};
+/// use ratatui::prelude::*;
 ///
-/// # fn main() -> Result<(), Box<dyn std::error::Error>> {
-/// let mut backend = TermwizBackend::new()?;
-/// backend.clear()?;
-/// # Ok(())
-/// # }
+/// let backend = TermwizBackend::new()?;
+/// let mut terminal = Terminal::new(backend)?;
+///
+/// terminal.clear()?;
+/// terminal.draw(|frame| {
+///     // -- snip --
+/// })?;
+/// # std::result::Result::Ok::<(), Box<dyn std::error::Error>>(())
 /// ```
+///
+/// See the the [examples] directory for more examples. See the [`backend`] module documentation
+/// for more details on raw mode and alternate screen.
+///
+/// [`backend`]: crate::backend
+/// [`Terminal`]: crate::terminal::Terminal
+/// [`BufferedTerminal`]: termwiz::terminal::buffered::BufferedTerminal
+/// [Termwiz]: https://crates.io/crates/termwiz
+/// [examples]: https://github.com/ratatui-org/ratatui/tree/main/examples#readme
 pub struct TermwizBackend {
     buffered_terminal: BufferedTerminal<SystemTerminal>,
 }
 
 impl TermwizBackend {
     /// Creates a new Termwiz backend instance.
+    ///
+    /// The backend will automatically enable raw mode and enter the alternate screen.
+    ///
+    /// # Errors
+    ///
+    /// Returns an error if unable to do any of the following:
+    /// - query the terminal capabilities.
+    /// - enter raw mode.
+    /// - enter the alternate screen.
+    /// - create the system or buffered terminal.
+    ///
+    /// # Example
+    ///
+    /// ```rust,no_run
+    /// # use ratatui::prelude::*;
+    /// let backend = TermwizBackend::new()?;
+    /// # Ok::<(), Box<dyn std::error::Error>>(())
+    /// ```
     pub fn new() -> Result<TermwizBackend, Box<dyn Error>> {
         let mut buffered_terminal =
             BufferedTerminal::new(SystemTerminal::new(Capabilities::new_from_env()?)?)?;
@@ -169,22 +214,31 @@ impl Backend for TermwizBackend {
     }
 
     fn size(&self) -> Result<Rect, io::Error> {
-        let (term_width, term_height) = self.buffered_terminal.dimensions();
-        let max = u16::max_value();
-        Ok(Rect::new(
-            0,
-            0,
-            if term_width > usize::from(max) {
-                max
-            } else {
-                term_width as u16
+        let (cols, rows) = self.buffered_terminal.dimensions();
+        Ok(Rect::new(0, 0, u16_max(cols), u16_max(rows)))
+    }
+
+    fn window_size(&mut self) -> Result<WindowSize, io::Error> {
+        let ScreenSize {
+            cols,
+            rows,
+            xpixel,
+            ypixel,
+        } = self
+            .buffered_terminal
+            .terminal()
+            .get_screen_size()
+            .map_err(|e| io::Error::new(io::ErrorKind::Other, e))?;
+        Ok(WindowSize {
+            columns_rows: Size {
+                width: u16_max(cols),
+                height: u16_max(rows),
             },
-            if term_height > usize::from(max) {
-                max
-            } else {
-                term_height as u16
+            pixels: Size {
+                width: u16_max(xpixel),
+                height: u16_max(ypixel),
             },
-        ))
+        })
     }
 
     fn flush(&mut self) -> Result<(), io::Error> {
@@ -221,3 +275,8 @@ impl From<Color> for ColorAttribute {
         }
     }
 }
+
+#[inline]
+fn u16_max(i: usize) -> u16 {
+    u16::try_from(i).unwrap_or(u16::MAX)
+}

src/backend/test.rs

@@ -9,26 +9,31 @@ use std::{
 use unicode_width::UnicodeWidthStr;
 
 use crate::{
-    backend::Backend,
+    backend::{Backend, WindowSize},
     buffer::{Buffer, Cell},
-    layout::Rect,
+    layout::{Rect, Size},
 };
 
-/// A backend used for the integration tests.
+/// A [`Backend`] implementation used for integration testing that that renders to an in memory
+/// buffer.
+///
+/// Note: that although many of the integration and unit tests in ratatui are written using this
+/// backend, it is preferable to write unit tests for widgets directly against the buffer rather
+/// than using this backend. This backend is intended for integration tests that test the entire
+/// terminal UI.
 ///
 /// # Example
 ///
 /// ```rust
-/// use ratatui::{backend::{Backend, TestBackend}, buffer::Buffer};
+/// use ratatui::{backend::TestBackend, prelude::*};
 ///
-/// # fn main() -> Result<(), Box<dyn std::error::Error>> {
 /// let mut backend = TestBackend::new(10, 2);
 /// backend.clear()?;
 /// backend.assert_buffer(&Buffer::with_lines(vec!["          "; 2]));
-/// # Ok(())
-/// # }
+/// # std::io::Result::Ok(())
 /// ```
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Eq, PartialEq, Hash)]
+#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
 pub struct TestBackend {
     width: u16,
     buffer: Buffer,
@@ -93,6 +98,7 @@ impl TestBackend {
     /// Asserts that the TestBackend's buffer is equal to the expected buffer.
     /// If the buffers are not equal, a panic occurs with a detailed error message
     /// showing the differences between the expected and actual buffers.
+    #[track_caller]
     pub fn assert_buffer(&self, expected: &Buffer) {
         assert_eq!(expected.area, self.buffer.area);
         let diff = expected.diff(&self.buffer);
@@ -177,7 +183,151 @@ impl Backend for TestBackend {
         Ok(Rect::new(0, 0, self.width, self.height))
     }
 
+    fn window_size(&mut self) -> Result<WindowSize, io::Error> {
+        // Some arbitrary window pixel size, probably doesn't need much testing.
+        static WINDOW_PIXEL_SIZE: Size = Size {
+            width: 640,
+            height: 480,
+        };
+        Ok(WindowSize {
+            columns_rows: (self.width, self.height).into(),
+            pixels: WINDOW_PIXEL_SIZE,
+        })
+    }
+
     fn flush(&mut self) -> Result<(), io::Error> {
         Ok(())
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn new() {
+        assert_eq!(
+            TestBackend::new(10, 2),
+            TestBackend {
+                width: 10,
+                height: 2,
+                buffer: Buffer::with_lines(vec!["          "; 2]),
+                cursor: false,
+                pos: (0, 0),
+            }
+        );
+    }
+    #[test]
+    fn test_buffer_view() {
+        let buffer = Buffer::with_lines(vec!["aaaa"; 2]);
+        assert_eq!(buffer_view(&buffer), "\"aaaa\"\n\"aaaa\"\n");
+    }
+
+    #[test]
+    fn buffer_view_with_overwrites() {
+        let multi_byte_char = "👨‍👩‍👧‍👦"; // renders 8 wide
+        let buffer = Buffer::with_lines(vec![multi_byte_char]);
+        assert_eq!(
+            buffer_view(&buffer),
+            format!(
+                r#""{multi_byte_char}" Hidden by multi-width symbols: [(1, " "), (2, " "), (3, " "), (4, " "), (5, " "), (6, " "), (7, " ")]
+"#,
+                multi_byte_char = multi_byte_char
+            )
+        );
+    }
+
+    #[test]
+    fn buffer() {
+        let backend = TestBackend::new(10, 2);
+        assert_eq!(backend.buffer(), &Buffer::with_lines(vec!["          "; 2]));
+    }
+
+    #[test]
+    fn resize() {
+        let mut backend = TestBackend::new(10, 2);
+        backend.resize(5, 5);
+        assert_eq!(backend.buffer(), &Buffer::with_lines(vec!["     "; 5]));
+    }
+
+    #[test]
+    fn assert_buffer() {
+        let backend = TestBackend::new(10, 2);
+        let buffer = Buffer::with_lines(vec!["          "; 2]);
+        backend.assert_buffer(&buffer);
+    }
+
+    #[test]
+    #[should_panic]
+    fn assert_buffer_panics() {
+        let backend = TestBackend::new(10, 2);
+        let buffer = Buffer::with_lines(vec!["aaaaaaaaaa"; 2]);
+        backend.assert_buffer(&buffer);
+    }
+
+    #[test]
+    fn display() {
+        let backend = TestBackend::new(10, 2);
+        assert_eq!(format!("{}", backend), "\"          \"\n\"          \"\n");
+    }
+
+    #[test]
+    fn draw() {
+        let mut backend = TestBackend::new(10, 2);
+        let mut cell = Cell::default();
+        cell.set_symbol("a");
+        backend.draw([(0, 0, &cell)].into_iter()).unwrap();
+        backend.draw([(0, 1, &cell)].into_iter()).unwrap();
+        backend.assert_buffer(&Buffer::with_lines(vec!["a         "; 2]));
+    }
+
+    #[test]
+    fn hide_cursor() {
+        let mut backend = TestBackend::new(10, 2);
+        backend.hide_cursor().unwrap();
+        assert!(!backend.cursor);
+    }
+
+    #[test]
+    fn show_cursor() {
+        let mut backend = TestBackend::new(10, 2);
+        backend.show_cursor().unwrap();
+        assert!(backend.cursor);
+    }
+
+    #[test]
+    fn get_cursor() {
+        let mut backend = TestBackend::new(10, 2);
+        assert_eq!(backend.get_cursor().unwrap(), (0, 0));
+    }
+
+    #[test]
+    fn set_cursor() {
+        let mut backend = TestBackend::new(10, 10);
+        backend.set_cursor(5, 5).unwrap();
+        assert_eq!(backend.pos, (5, 5));
+    }
+
+    #[test]
+    fn clear() {
+        let mut backend = TestBackend::new(10, 2);
+        let mut cell = Cell::default();
+        cell.set_symbol("a");
+        backend.draw([(0, 0, &cell)].into_iter()).unwrap();
+        backend.draw([(0, 1, &cell)].into_iter()).unwrap();
+        backend.clear().unwrap();
+        backend.assert_buffer(&Buffer::with_lines(vec!["          "; 2]));
+    }
+
+    #[test]
+    fn size() {
+        let backend = TestBackend::new(10, 2);
+        assert_eq!(backend.size().unwrap(), Rect::new(0, 0, 10, 2));
+    }
+
+    #[test]
+    fn flush() {
+        let mut backend = TestBackend::new(10, 2);
+        backend.flush().unwrap();
+    }
+}

src/buffer.rs

@@ -6,15 +6,15 @@ use std::{
 use unicode_segmentation::UnicodeSegmentation;
 use unicode_width::UnicodeWidthStr;
 
-#[allow(deprecated)]
 use crate::{
     layout::Rect,
     style::{Color, Modifier, Style},
-    text::{Line, Span, Spans},
+    text::{Line, Span},
 };
 
 /// A buffer cell
-#[derive(Debug, Clone, Eq, PartialEq)]
+#[derive(Debug, Clone, Eq, PartialEq, Hash)]
+#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
 pub struct Cell {
     pub symbol: String,
     pub fg: Color,
@@ -22,6 +22,7 @@ pub struct Cell {
     #[cfg(feature = "crossterm")]
     pub underline_color: Color,
     pub modifier: Modifier,
+    pub skip: bool,
 }
 
 impl Cell {
@@ -80,6 +81,15 @@ impl Cell {
             .add_modifier(self.modifier)
     }
 
+    /// Sets the cell to be skipped when copying (diffing) the buffer to the screen.
+    ///
+    /// This is helpful when it is necessary to prevent the buffer from overwriting a cell that is
+    /// covered by an image from some terminal graphics protocol (Sixel / iTerm / Kitty ...).
+    pub fn set_skip(&mut self, skip: bool) -> &mut Cell {
+        self.skip = skip;
+        self
+    }
+
     pub fn reset(&mut self) {
         self.symbol.clear();
         self.symbol.push(' ');
@@ -90,6 +100,7 @@ impl Cell {
             self.underline_color = Color::Reset;
         }
         self.modifier = Modifier::empty();
+        self.skip = false;
     }
 }
 
@@ -102,6 +113,7 @@ impl Default for Cell {
             #[cfg(feature = "crossterm")]
             underline_color: Color::Reset,
             modifier: Modifier::empty(),
+            skip: false,
         }
     }
 }
@@ -116,9 +128,7 @@ impl Default for Cell {
 /// # Examples:
 ///
 /// ```
-/// use ratatui::buffer::{Buffer, Cell};
-/// use ratatui::layout::Rect;
-/// use ratatui::style::{Color, Style, Modifier};
+/// use ratatui::{prelude::*, buffer::Cell};
 ///
 /// let mut buf = Buffer::empty(Rect{x: 0, y: 0, width: 10, height: 5});
 /// buf.get_mut(0, 2).set_symbol("x");
@@ -130,12 +140,14 @@ impl Default for Cell {
 ///     bg: Color::White,
 ///     #[cfg(feature = "crossterm")]
 ///     underline_color: Color::Reset,
-///     modifier: Modifier::empty()
+///     modifier: Modifier::empty(),
+///     skip: false
 /// });
 /// buf.get_mut(5, 0).set_char('x');
 /// assert_eq!(buf.get(5, 0).symbol, "x");
 /// ```
-#[derive(Default, Clone, Eq, PartialEq)]
+#[derive(Default, Clone, Eq, PartialEq, Hash)]
+#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
 pub struct Buffer {
     /// The area represented by this buffer
     pub area: Rect,
@@ -162,24 +174,16 @@ impl Buffer {
     }
 
     /// Returns a Buffer containing the given lines
-    pub fn with_lines<S>(lines: Vec<S>) -> Buffer
+    pub fn with_lines<'a, S>(lines: Vec<S>) -> Buffer
     where
-        S: AsRef<str>,
+        S: Into<Line<'a>>,
     {
+        let lines = lines.into_iter().map(Into::into).collect::<Vec<_>>();
         let height = lines.len() as u16;
-        let width = lines
-            .iter()
-            .map(|i| i.as_ref().width() as u16)
-            .max()
-            .unwrap_or_default();
-        let mut buffer = Buffer::empty(Rect {
-            x: 0,
-            y: 0,
-            width,
-            height,
-        });
+        let width = lines.iter().map(Line::width).max().unwrap_or_default() as u16;
+        let mut buffer = Buffer::empty(Rect::new(0, 0, width, height));
         for (y, line) in lines.iter().enumerate() {
-            buffer.set_string(0, y as u16, line, Style::default());
+            buffer.set_line(0, y as u16, line, width);
         }
         buffer
     }
@@ -213,8 +217,7 @@ impl Buffer {
     /// # Examples
     ///
     /// ```
-    /// # use ratatui::buffer::Buffer;
-    /// # use ratatui::layout::Rect;
+    /// # use ratatui::prelude::*;
     /// let rect = Rect::new(200, 100, 10, 10);
     /// let buffer = Buffer::empty(rect);
     /// // Global coordinates to the top corner of this buffer's area
@@ -226,8 +229,7 @@ impl Buffer {
     /// Panics when given an coordinate that is outside of this Buffer's area.
     ///
     /// ```should_panic
-    /// # use ratatui::buffer::Buffer;
-    /// # use ratatui::layout::Rect;
+    /// # use ratatui::prelude::*;
     /// let rect = Rect::new(200, 100, 10, 10);
     /// let buffer = Buffer::empty(rect);
     /// // Top coordinate is outside of the buffer in global coordinate space, as the Buffer's area
@@ -253,8 +255,7 @@ impl Buffer {
     /// # Examples
     ///
     /// ```
-    /// # use ratatui::buffer::Buffer;
-    /// # use ratatui::layout::Rect;
+    /// # use ratatui::prelude::*;
     /// let rect = Rect::new(200, 100, 10, 10);
     /// let buffer = Buffer::empty(rect);
     /// assert_eq!(buffer.pos_of(0), (200, 100));
@@ -266,8 +267,7 @@ impl Buffer {
     /// Panics when given an index that is outside the Buffer's content.
     ///
     /// ```should_panic
-    /// # use ratatui::buffer::Buffer;
-    /// # use ratatui::layout::Rect;
+    /// # use ratatui::prelude::*;
     /// let rect = Rect::new(0, 0, 10, 10); // 100 cells in total
     /// let buffer = Buffer::empty(rect);
     /// // Index 100 is the 101th cell, which lies outside of the area of this Buffer.
@@ -333,29 +333,6 @@ impl Buffer {
         (x_offset as u16, y)
     }
 
-    #[allow(deprecated)]
-    #[deprecated(note = "Use `Buffer::set_line` instead")]
-    pub fn set_spans(&mut self, x: u16, y: u16, spans: &Spans<'_>, width: u16) -> (u16, u16) {
-        let mut remaining_width = width;
-        let mut x = x;
-        for span in &spans.0 {
-            if remaining_width == 0 {
-                break;
-            }
-            let pos = self.set_stringn(
-                x,
-                y,
-                span.content.as_ref(),
-                remaining_width as usize,
-                span.style,
-            );
-            let w = pos.0.saturating_sub(x);
-            x = pos.0;
-            remaining_width = remaining_width.saturating_sub(w);
-        }
-        (x, y)
-    }
-
     pub fn set_line(&mut self, x: u16, y: u16, line: &Line<'_>, width: u16) -> (u16, u16) {
         let mut remaining_width = width;
         let mut x = x;
@@ -486,10 +463,10 @@ impl Buffer {
         // Cells invalidated by drawing/replacing preceding multi-width characters:
         let mut invalidated: usize = 0;
         // Cells from the current buffer to skip due to preceding multi-width characters taking
-        // their place (the skipped cells should be blank anyway):
+        // their place (the skipped cells should be blank anyway), or due to per-cell-skipping:
         let mut to_skip: usize = 0;
         for (i, (current, previous)) in next_buffer.iter().zip(previous_buffer.iter()).enumerate() {
-            if (current != previous || invalidated > 0) && to_skip == 0 {
+            if !current.skip && (current != previous || invalidated > 0) && to_skip == 0 {
                 let (x, y) = self.pos_of(i);
                 updates.push((x, y, &next_buffer[i]));
             }
@@ -914,6 +891,18 @@ mod tests {
         );
     }
 
+    #[test]
+    fn buffer_diffing_skip() {
+        let prev = Buffer::with_lines(vec!["123"]);
+        let mut next = Buffer::with_lines(vec!["456"]);
+        for i in 1..3 {
+            next.content[i].set_skip(true);
+        }
+
+        let diff = prev.diff(&next);
+        assert_eq!(diff, vec![(0, 0, &cell("4"))],);
+    }
+
     #[test]
     fn buffer_merge() {
         let mut one = Buffer::filled(
@@ -995,4 +984,63 @@ mod tests {
         };
         assert_buffer_eq!(one, merged);
     }
+
+    #[test]
+    fn buffer_merge_skip() {
+        let mut one = Buffer::filled(
+            Rect {
+                x: 0,
+                y: 0,
+                width: 2,
+                height: 2,
+            },
+            Cell::default().set_symbol("1"),
+        );
+        let two = Buffer::filled(
+            Rect {
+                x: 0,
+                y: 1,
+                width: 2,
+                height: 2,
+            },
+            Cell::default().set_symbol("2").set_skip(true),
+        );
+        one.merge(&two);
+        let skipped: Vec<bool> = one.content().iter().map(|c| c.skip).collect();
+        assert_eq!(skipped, vec![false, false, true, true, true, true]);
+    }
+
+    #[test]
+    fn buffer_merge_skip2() {
+        let mut one = Buffer::filled(
+            Rect {
+                x: 0,
+                y: 0,
+                width: 2,
+                height: 2,
+            },
+            Cell::default().set_symbol("1").set_skip(true),
+        );
+        let two = Buffer::filled(
+            Rect {
+                x: 0,
+                y: 1,
+                width: 2,
+                height: 2,
+            },
+            Cell::default().set_symbol("2"),
+        );
+        one.merge(&two);
+        let skipped: Vec<bool> = one.content().iter().map(|c| c.skip).collect();
+        assert_eq!(skipped, vec![true, true, false, false, false, false]);
+    }
+
+    #[test]
+    fn with_lines_accepts_into_lines() {
+        use crate::style::Stylize;
+        let mut buf = Buffer::empty(Rect::new(0, 0, 3, 2));
+        buf.set_string(0, 0, "foo", Style::new().red());
+        buf.set_string(0, 1, "bar", Style::new().blue());
+        assert_eq!(buf, Buffer::with_lines(vec!["foo".red(), "bar".blue()]));
+    }
 }

src/lib.rs

@@ -1,9 +1,10 @@
 #![forbid(unsafe_code)]
 
-//! [ratatui](https://github.com/ratatui-org/ratatui) is a library used to build rich
-//! terminal users interfaces and dashboards.
+//! [ratatui](https://github.com/ratatui-org/ratatui) is a library that is all about cooking up terminal user
+//! interfaces (TUIs).
 //!
-//! ![](https://raw.githubusercontent.com/ratatui-org/ratatui/master/assets/demo.gif)
+//! ![Demo](https://raw.githubusercontent.com/ratatui-org/ratatui/aa09e59dc0058347f68d7c1e0c91f863c6f2b8c9/examples/demo2.gif)
+// this is a permalink to https://github.com/ratatui-org/ratatui/blob/images/examples/demo2.gif
 //!
 //! # Get started
 //!
@@ -12,8 +13,8 @@
 //! Add the following to your `Cargo.toml`:
 //! ```toml
 //! [dependencies]
-//! crossterm = "0.26"
-//! ratatui = "0.20"
+//! crossterm = "0.27"
+//! ratatui = "0.23"
 //! ```
 //!
 //! The crate is using the `crossterm` backend by default that works on most platforms. But if for
@@ -22,20 +23,12 @@
 //!
 //! ```toml
 //! [dependencies]
-//! termion = "1.5"
-//! ratatui = { version = "0.20", default-features = false, features = ['termion'] }
+//! termion = "2.0.1"
+//! ratatui = { version = "0.23", default-features = false, features = ['termion'] }
 //! ```
 //!
 //! The same logic applies for all other available backends.
 //!
-//! ### Features
-//!
-//! Widgets which add dependencies are gated behind feature flags to prevent unused transitive
-//! dependencies. The available features are:
-//!
-//! * `widget-calendar` - enables [`widgets::calendar`] and adds a dependency on the [time
-//! crate](https://crates.io/crates/time).
-//!
 //! ## Creating a `Terminal`
 //!
 //! Every application using `ratatui` should start by instantiating a `Terminal`. It is a light
@@ -44,7 +37,7 @@
 //!
 //! ```rust,no_run
 //! use std::io;
-//! use ratatui::{backend::CrosstermBackend, Terminal};
+//! use ratatui::prelude::*;
 //!
 //! fn main() -> Result<(), io::Error> {
 //!     let stdout = io::stdout();
@@ -59,7 +52,7 @@
 //!
 //! ```rust,ignore
 //! use std::io;
-//! use ratatui::{backend::TermionBackend, Terminal};
+//! use ratatui::prelude::*;
 //! use termion::raw::IntoRawMode;
 //!
 //! fn main() -> Result<(), io::Error> {
@@ -80,18 +73,14 @@
 //! implement your own.
 //!
 //! Each widget follows a builder pattern API providing a default configuration along with methods
-//! to customize them. The widget is then rendered using [`Frame::render_widget`] which takes
-//! your widget instance and an area to draw to.
+//! to customize them. The widget is then rendered using [`Frame::render_widget`] which takes your
+//! widget instance and an area to draw to.
 //!
 //! The following example renders a block of the size of the terminal:
 //!
 //! ```rust,no_run
 //! use std::{io, thread, time::Duration};
-//! use ratatui::{
-//!     backend::CrosstermBackend,
-//!     widgets::{Block, Borders},
-//!     Terminal
-//! };
+//! use ratatui::{prelude::*, widgets::*};
 //! use crossterm::{
 //!     event::{self, DisableMouseCapture, EnableMouseCapture},
 //!     execute,
@@ -142,12 +131,8 @@
 //! full customization. And `Layout` is no exception:
 //!
 //! ```rust,no_run
-//! use ratatui::{
-//!     backend::Backend,
-//!     layout::{Constraint, Direction, Layout},
-//!     widgets::{Block, Borders},
-//!     Frame,
-//! };
+//! use ratatui::{prelude::*, widgets::*};
+//!
 //! fn ui<B: Backend>(f: &mut Frame<B>) {
 //!    let chunks = Layout::default()
 //!         .direction(Direction::Vertical)
@@ -171,13 +156,32 @@
 //! }
 //! ```
 //!
-//! This let you describe responsive terminal UI by nesting layouts. You should note that by
-//! default the computed layout tries to fill the available space completely. So if for any reason
-//! you might need a blank space somewhere, try to pass an additional constraint and don't use the
+//! This let you describe responsive terminal UI by nesting layouts. You should note that by default
+//! the computed layout tries to fill the available space completely. So if for any reason you might
+//! need a blank space somewhere, try to pass an additional constraint and don't use the
 //! corresponding area.
+//!
+//! # Features
+#![cfg_attr(feature = "document-features", doc = document_features::document_features!())]
+//!
+//! [`Layout`]: layout::Layout
+//! [`backend`]: backend
+//! [`calendar`]: widgets::calendar
+//! [`CrosstermBackend`]: backend::CrosstermBackend
+//! [`TermionBackend`]: backend::TermionBackend
+//! [`TermwizBackend`]: backend::TermwizBackend
+//! [Crossterm crate]: https://crates.io/crates/crossterm
+//! [Serde crate]: https://crates.io/crates/serde
+//! [Termion crate]: https://crates.io/crates/termion
+//! [Termwiz crate]: https://crates.io/crates/termwiz
+//! [Time crate]: https://crates.io/crates/time
 
 // show the feature flags in the generated documentation
 #![cfg_attr(docsrs, feature(doc_auto_cfg))]
+#![doc(
+    html_logo_url = "https://raw.githubusercontent.com/ratatui-org/ratatui/main/assets/logo.png",
+    html_favicon_url = "https://raw.githubusercontent.com/ratatui-org/ratatui/main/assets/favicon.ico"
+)]
 
 pub mod backend;
 pub mod buffer;
@@ -188,6 +192,7 @@ pub mod terminal;
 pub mod text;
 pub mod widgets;
 
-pub use self::terminal::{Frame, Terminal, TerminalOptions, Viewport};
+#[doc(inline)]
+pub use self::terminal::{CompletedFrame, Frame, Terminal, TerminalOptions, Viewport};
 
 pub mod prelude;

src/prelude.rs

@@ -9,7 +9,6 @@
 //!
 //! ```rust
 //! use ratatui::{prelude::*, widgets::*};
-//! use ratatui::widgets::{Block, Borders};
 //!
 //! #[derive(Debug, Default, PartialEq, Eq)]
 //! struct Line;
@@ -30,6 +29,6 @@ pub use crate::{
     layout::{self, Alignment, Constraint, Corner, Direction, Layout, Margin, Rect},
     style::{self, Color, Modifier, Style, Styled, Stylize},
     symbols::{self, Marker},
-    terminal::{self, Frame, Terminal, TerminalOptions, Viewport},
+    terminal::{CompletedFrame, Frame, Terminal, TerminalOptions, Viewport},
     text::{self, Line, Masked, Span, Text},
 };

src/style.rs

@@ -1,142 +1,73 @@
 //! `style` contains the primitives used to control how your user interface will look.
 //!
+//! There are two ways to set styles:
+//! - Creating and using the [`Style`] struct. (e.g. `Style::new().fg(Color::Red)`).
+//! - Using style shorthands. (e.g. `"hello".red()`).
+//!
 //! # Using the `Style` struct
 //!
-//! This is useful when creating style variables.
-//! ## Example
-//! ```
-//! use ratatui::style::{Color, Modifier, Style};
+//! This is the original approach to styling and likely the most common. This is useful when
+//! creating style variables to reuse, however the shorthands are often more convenient and
+//! readable for most use cases.
 //!
-//! Style::default()
+//! ## Example
+//!
+//! ```
+//! use ratatui::prelude::*;
+//!
+//! let heading_style = Style::new()
 //!    .fg(Color::Black)
 //!    .bg(Color::Green)
 //!    .add_modifier(Modifier::ITALIC | Modifier::BOLD);
+//! let span = Span::styled("hello", heading_style);
 //! ```
 //!
 //! # Using style shorthands
 //!
-//! This is best for concise styling.
+//! Originally Ratatui only had the ability to set styles using the `Style` struct. This is still
+//! supported, but there are now shorthands for all the styles that can be set. These save you from
+//! having to create a `Style` struct every time you want to set a style.
+//!
+//! The shorthands are implemented in the [`Stylize`] trait which is automatically implemented for
+//! many types via the [`Styled`] trait. This means that you can use the shorthands on any type
+//! that implements [`Styled`]. E.g.:
+//! - Strings and string slices when styled return a [`Span`]
+//! - [`Span`]s can be styled again, which will merge the styles.
+//! - Many widget types can be styled directly rather than calling their style() method.
+//!
+//! See the [`Stylize`] and [`Styled`] traits for more information. These traits are re-exported in
+//! the [`prelude`] module for convenience.
+//!
 //! ## Example
+//!
 //! ```
-//! use ratatui::prelude::*;
+//! use ratatui::{prelude::*, widgets::*};
 //!
 //! assert_eq!(
 //!    "hello".red().on_blue().bold(),
-//!     Span::styled("hello", Style::default().fg(Color::Red).bg(Color::Blue).add_modifier(Modifier::BOLD))
-//! )
+//!     Span::styled(
+//!         "hello",
+//!         Style::default().fg(Color::Red).bg(Color::Blue).add_modifier(Modifier::BOLD))
+//! );
+//!
+//! assert_eq!(
+//!     Paragraph::new("hello").red().on_blue().bold(),
+//!     Paragraph::new("hello")
+//!         .style(Style::default().fg(Color::Red).bg(Color::Blue).add_modifier(Modifier::BOLD))
+//! );
 //! ```
+//!
+//! [`prelude`]: crate::prelude
+//! [`Span`]: crate::text::Span
 
-use std::{
-    fmt::{self, Debug},
-    str::FromStr,
-};
+use std::fmt::{self, Debug};
 
 use bitflags::bitflags;
 
 mod stylize;
 pub use stylize::{Styled, Stylize};
-
-/// ANSI Color
-///
-/// All colors from the [ANSI color table](https://en.wikipedia.org/wiki/ANSI_escape_code#Colors)
-/// are supported (though some names are not exactly the same).
-///
-/// | Color Name     | Color                   | Foreground | Background |
-/// |----------------|-------------------------|------------|------------|
-/// | `black`        | [`Color::Black`]        | 30         | 40         |
-/// | `red`          | [`Color::Red`]          | 31         | 41         |
-/// | `green`        | [`Color::Green`]        | 32         | 42         |
-/// | `yellow`       | [`Color::Yellow`]       | 33         | 43         |
-/// | `blue`         | [`Color::Blue`]         | 34         | 44         |
-/// | `magenta`      | [`Color::Magenta`]      | 35         | 45         |
-/// | `cyan`         | [`Color::Cyan`]         | 36         | 46         |
-/// | `gray`*        | [`Color::Gray`]         | 37         | 47         |
-/// | `darkgray`*    | [`Color::DarkGray`]     | 90         | 100        |
-/// | `lightred`     | [`Color::LightRed`]     | 91         | 101        |
-/// | `lightgreen`   | [`Color::LightGreen`]   | 92         | 102        |
-/// | `lightyellow`  | [`Color::LightYellow`]  | 93         | 103        |
-/// | `lightblue`    | [`Color::LightBlue`]    | 94         | 104        |
-/// | `lightmagenta` | [`Color::LightMagenta`] | 95         | 105        |
-/// | `lightcyan`    | [`Color::LightCyan`]    | 96         | 106        |
-/// | `white`*       | [`Color::White`]        | 97         | 107        |
-///
-/// - `gray` is sometimes called `white` - this is not supported as we use `white` for bright white
-/// - `gray` is sometimes called `silver` - this is supported
-/// - `darkgray` is sometimes called `light black` or `bright black` (both are supported)
-/// - `white` is sometimes called `light white` or `bright white` (both are supported)
-/// - we support `bright` and `light` prefixes for all colors
-/// - we support `-` and `_` and ` ` as separators for all colors
-/// - we support both `gray` and `grey` spellings
-///
-/// # Example
-///
-/// ```
-/// use ratatui::style::Color;
-/// use std::str::FromStr;
-/// assert_eq!(Color::from_str("red"), Ok(Color::Red));
-/// assert_eq!("red".parse(), Ok(Color::Red));
-/// assert_eq!("lightred".parse(), Ok(Color::LightRed));
-/// assert_eq!("light red".parse(), Ok(Color::LightRed));
-/// assert_eq!("light-red".parse(), Ok(Color::LightRed));
-/// assert_eq!("light_red".parse(), Ok(Color::LightRed));
-/// assert_eq!("lightRed".parse(), Ok(Color::LightRed));
-/// assert_eq!("bright red".parse(), Ok(Color::LightRed));
-/// assert_eq!("bright-red".parse(), Ok(Color::LightRed));
-/// assert_eq!("silver".parse(), Ok(Color::Gray));
-/// assert_eq!("dark-grey".parse(), Ok(Color::DarkGray));
-/// assert_eq!("dark gray".parse(), Ok(Color::DarkGray));
-/// assert_eq!("light-black".parse(), Ok(Color::DarkGray));
-/// assert_eq!("white".parse(), Ok(Color::White));
-/// assert_eq!("bright white".parse(), Ok(Color::White));
-/// ```
-#[derive(Debug, Default, Clone, Copy, Eq, PartialEq)]
-#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
-pub enum Color {
-    /// Resets the foreground or background color
-    #[default]
-    Reset,
-    /// ANSI Color: Black. Foreground: 30, Background: 40
-    Black,
-    /// ANSI Color: Red. Foreground: 31, Background: 41
-    Red,
-    /// ANSI Color: Green. Foreground: 32, Background: 42
-    Green,
-    /// ANSI Color: Yellow. Foreground: 33, Background: 43
-    Yellow,
-    /// ANSI Color: Blue. Foreground: 34, Background: 44
-    Blue,
-    /// ANSI Color: Magenta. Foreground: 35, Background: 45
-    Magenta,
-    /// ANSI Color: Cyan. Foreground: 36, Background: 46
-    Cyan,
-    /// ANSI Color: White. Foreground: 37, Background: 47
-    ///
-    /// Note that this is sometimes called `silver` or `white` but we use `white` for bright white
-    Gray,
-    /// ANSI Color: Bright Black. Foreground: 90, Background: 100
-    ///
-    /// Note that this is sometimes called `light black` or `bright black` but we use `dark gray`
-    DarkGray,
-    /// ANSI Color: Bright Red. Foreground: 91, Background: 101
-    LightRed,
-    /// ANSI Color: Bright Green. Foreground: 92, Background: 102
-    LightGreen,
-    /// ANSI Color: Bright Yellow. Foreground: 93, Background: 103
-    LightYellow,
-    /// ANSI Color: Bright Blue. Foreground: 94, Background: 104
-    LightBlue,
-    /// ANSI Color: Bright Magenta. Foreground: 95, Background: 105
-    LightMagenta,
-    /// ANSI Color: Bright Cyan. Foreground: 96, Background: 106
-    LightCyan,
-    /// ANSI Color: Bright White. Foreground: 97, Background: 107
-    /// Sometimes called `bright white` or `light white` in some terminals
-    White,
-    /// An RGB color
-    Rgb(u8, u8, u8),
-    /// An 8-bit 256 color. See <https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit>
-    Indexed(u8),
-}
+mod color;
+pub use color::Color;
 
 bitflags! {
     /// Modifier changes the way a piece of text is displayed.
@@ -146,12 +77,12 @@ bitflags! {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::style::Modifier;
+    /// use ratatui::{prelude::*};
     ///
     /// let m = Modifier::BOLD | Modifier::ITALIC;
     /// ```
     #[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Default, Clone, Copy, PartialEq, Eq)]
+    #[derive(Default, Clone, Copy, Eq, PartialEq, Hash)]
     pub struct Modifier: u16 {
         const BOLD              = 0b0000_0000_0001;
         const DIM               = 0b0000_0000_0010;
@@ -179,24 +110,33 @@ impl fmt::Debug for Modifier {
     }
 }
 
-/// Style let you control the main characteristics of the displayed elements.
+/// Style lets you control the main characteristics of the displayed elements.
 ///
 /// ```rust
-/// # use ratatui::style::{Color, Modifier, Style};
+/// use ratatui::{prelude::*};
+///
 /// Style::default()
 ///     .fg(Color::Black)
 ///     .bg(Color::Green)
 ///     .add_modifier(Modifier::ITALIC | Modifier::BOLD);
 /// ```
 ///
-/// It represents an incremental change. If you apply the styles S1, S2, S3 to a cell of the
+/// Styles can also be created with a [shorthand notation](crate::style#using-style-shorthands).
+///
+/// ```rust
+/// # use ratatui::prelude::*;
+/// Style::new().black().on_green().italic().bold();
+/// ```
+///
+/// For more information about the style shorthands, see the [`Stylize`] trait.
+///
+/// Styles represents an incremental change. If you apply the styles S1, S2, S3 to a cell of the
 /// terminal buffer, the style of this cell will be the result of the merge of S1, S2 and S3, not
 /// just S3.
 ///
 /// ```rust
-/// # use ratatui::style::{Color, Modifier, Style};
-/// # use ratatui::buffer::Buffer;
-/// # use ratatui::layout::Rect;
+/// use ratatui::{prelude::*};
+///
 /// let styles = [
 ///     Style::default().fg(Color::Blue).add_modifier(Modifier::BOLD | Modifier::ITALIC),
 ///     Style::default().bg(Color::Red).add_modifier(Modifier::UNDERLINED),
@@ -225,9 +165,8 @@ impl fmt::Debug for Modifier {
 /// reset all properties until that point use [`Style::reset`].
 ///
 /// ```
-/// # use ratatui::style::{Color, Modifier, Style};
-/// # use ratatui::buffer::Buffer;
-/// # use ratatui::layout::Rect;
+/// use ratatui::{prelude::*};
+///
 /// let styles = [
 ///     Style::default().fg(Color::Blue).add_modifier(Modifier::BOLD | Modifier::ITALIC),
 ///     Style::reset().fg(Color::Yellow),
@@ -248,7 +187,7 @@ impl fmt::Debug for Modifier {
 ///     buffer.get(0, 0).style(),
 /// );
 /// ```
-#[derive(Debug, Clone, Copy, Eq, PartialEq)]
+#[derive(Debug, Clone, Copy, Eq, PartialEq, Hash)]
 #[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
 pub struct Style {
     pub fg: Option<Color>,
@@ -305,7 +244,7 @@ impl Style {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::style::{Color, Style};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().fg(Color::Blue);
     /// let diff = Style::default().fg(Color::Red);
     /// assert_eq!(style.patch(diff), Style::default().fg(Color::Red));
@@ -320,7 +259,7 @@ impl Style {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::style::{Color, Style};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().bg(Color::Blue);
     /// let diff = Style::default().bg(Color::Red);
     /// assert_eq!(style.patch(diff), Style::default().bg(Color::Red));
@@ -340,7 +279,7 @@ impl Style {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::style::{Color, Modifier, Style};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().underline_color(Color::Blue).add_modifier(Modifier::UNDERLINED);
     /// let diff = Style::default().underline_color(Color::Red).add_modifier(Modifier::UNDERLINED);
     /// assert_eq!(style.patch(diff), Style::default().underline_color(Color::Red).add_modifier(Modifier::UNDERLINED));
@@ -358,7 +297,7 @@ impl Style {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::style::{Color, Modifier, Style};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().add_modifier(Modifier::BOLD);
     /// let diff = Style::default().add_modifier(Modifier::ITALIC);
     /// let patched = style.patch(diff);
@@ -378,7 +317,7 @@ impl Style {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::style::{Color, Modifier, Style};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().add_modifier(Modifier::BOLD | Modifier::ITALIC);
     /// let diff = Style::default().remove_modifier(Modifier::ITALIC);
     /// let patched = style.patch(diff);
@@ -396,7 +335,7 @@ impl Style {
     ///
     /// ## Examples
     /// ```
-    /// # use ratatui::style::{Color, Modifier, Style};
+    /// # use ratatui::prelude::*;
     /// let style_1 = Style::default().fg(Color::Yellow);
     /// let style_2 = Style::default().bg(Color::Red);
     /// let combined = style_1.patch(style_2);
@@ -422,105 +361,8 @@ impl Style {
     }
 }
 
-/// Error type indicating a failure to parse a color string.
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub struct ParseColorError;
-
-impl std::fmt::Display for ParseColorError {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "Failed to parse Colors")
-    }
-}
-
-impl std::error::Error for ParseColorError {}
-
-/// Converts a string representation to a `Color` instance.
-///
-/// The `from_str` function attempts to parse the given string and convert it to the corresponding
-/// `Color` variant. It supports named colors, RGB values, and indexed colors. If the string cannot
-/// be parsed, a `ParseColorError` is returned.
-///
-/// See the [`Color`](Color) documentation for more information on the supported color names.
-///
-/// # Examples
-///
-/// ```
-/// # use std::str::FromStr;
-/// # use ratatui::style::Color;
-/// let color: Color = Color::from_str("blue").unwrap();
-/// assert_eq!(color, Color::Blue);
-///
-/// let color: Color = Color::from_str("#FF0000").unwrap();
-/// assert_eq!(color, Color::Rgb(255, 0, 0));
-///
-/// let color: Color = Color::from_str("10").unwrap();
-/// assert_eq!(color, Color::Indexed(10));
-///
-/// let color: Result<Color, _> = Color::from_str("invalid_color");
-/// assert!(color.is_err());
-/// ```
-impl FromStr for Color {
-    type Err = ParseColorError;
-
-    fn from_str(s: &str) -> Result<Self, Self::Err> {
-        Ok(
-            // There is a mix of different color names and formats in the wild.
-            // This is an attempt to support as many as possible.
-            match s
-                .to_lowercase()
-                .replace([' ', '-', '_'], "")
-                .replace("bright", "light")
-                .replace("grey", "gray")
-                .replace("silver", "gray")
-                .replace("lightblack", "darkgray")
-                .replace("lightwhite", "white")
-                .replace("lightgray", "white")
-                .as_ref()
-            {
-                "reset" => Self::Reset,
-                "black" => Self::Black,
-                "red" => Self::Red,
-                "green" => Self::Green,
-                "yellow" => Self::Yellow,
-                "blue" => Self::Blue,
-                "magenta" => Self::Magenta,
-                "cyan" => Self::Cyan,
-                "gray" => Self::Gray,
-                "darkgray" => Self::DarkGray,
-                "lightred" => Self::LightRed,
-                "lightgreen" => Self::LightGreen,
-                "lightyellow" => Self::LightYellow,
-                "lightblue" => Self::LightBlue,
-                "lightmagenta" => Self::LightMagenta,
-                "lightcyan" => Self::LightCyan,
-                "white" => Self::White,
-                _ => {
-                    if let Ok(index) = s.parse::<u8>() {
-                        Self::Indexed(index)
-                    } else if let (Ok(r), Ok(g), Ok(b)) = {
-                        if !s.starts_with('#') || s.len() != 7 {
-                            return Err(ParseColorError);
-                        }
-                        (
-                            u8::from_str_radix(&s[1..3], 16),
-                            u8::from_str_radix(&s[3..5], 16),
-                            u8::from_str_radix(&s[5..7], 16),
-                        )
-                    } {
-                        Self::Rgb(r, g, b)
-                    } else {
-                        return Err(ParseColorError);
-                    }
-                }
-            },
-        )
-    }
-}
-
 #[cfg(test)]
 mod tests {
-    use std::error::Error;
-
     use super::*;
 
     fn styles() -> Vec<Style> {
@@ -607,92 +449,6 @@ mod tests {
         );
     }
 
-    #[test]
-    fn from_rgb_color() {
-        let color: Color = Color::from_str("#FF0000").unwrap();
-        assert_eq!(color, Color::Rgb(255, 0, 0));
-    }
-
-    #[test]
-    fn from_indexed_color() {
-        let color: Color = Color::from_str("10").unwrap();
-        assert_eq!(color, Color::Indexed(10));
-    }
-
-    #[test]
-    fn from_ansi_color() -> Result<(), Box<dyn Error>> {
-        assert_eq!(Color::from_str("reset")?, Color::Reset);
-        assert_eq!(Color::from_str("black")?, Color::Black);
-        assert_eq!(Color::from_str("red")?, Color::Red);
-        assert_eq!(Color::from_str("green")?, Color::Green);
-        assert_eq!(Color::from_str("yellow")?, Color::Yellow);
-        assert_eq!(Color::from_str("blue")?, Color::Blue);
-        assert_eq!(Color::from_str("magenta")?, Color::Magenta);
-        assert_eq!(Color::from_str("cyan")?, Color::Cyan);
-        assert_eq!(Color::from_str("gray")?, Color::Gray);
-        assert_eq!(Color::from_str("darkgray")?, Color::DarkGray);
-        assert_eq!(Color::from_str("lightred")?, Color::LightRed);
-        assert_eq!(Color::from_str("lightgreen")?, Color::LightGreen);
-        assert_eq!(Color::from_str("lightyellow")?, Color::LightYellow);
-        assert_eq!(Color::from_str("lightblue")?, Color::LightBlue);
-        assert_eq!(Color::from_str("lightmagenta")?, Color::LightMagenta);
-        assert_eq!(Color::from_str("lightcyan")?, Color::LightCyan);
-        assert_eq!(Color::from_str("white")?, Color::White);
-
-        // aliases
-        assert_eq!(Color::from_str("lightblack")?, Color::DarkGray);
-        assert_eq!(Color::from_str("lightwhite")?, Color::White);
-        assert_eq!(Color::from_str("lightgray")?, Color::White);
-
-        // silver = grey = gray
-        assert_eq!(Color::from_str("grey")?, Color::Gray);
-        assert_eq!(Color::from_str("silver")?, Color::Gray);
-
-        // spaces are ignored
-        assert_eq!(Color::from_str("light black")?, Color::DarkGray);
-        assert_eq!(Color::from_str("light white")?, Color::White);
-        assert_eq!(Color::from_str("light gray")?, Color::White);
-
-        // dashes are ignored
-        assert_eq!(Color::from_str("light-black")?, Color::DarkGray);
-        assert_eq!(Color::from_str("light-white")?, Color::White);
-        assert_eq!(Color::from_str("light-gray")?, Color::White);
-
-        // underscores are ignored
-        assert_eq!(Color::from_str("light_black")?, Color::DarkGray);
-        assert_eq!(Color::from_str("light_white")?, Color::White);
-        assert_eq!(Color::from_str("light_gray")?, Color::White);
-
-        // bright = light
-        assert_eq!(Color::from_str("bright-black")?, Color::DarkGray);
-        assert_eq!(Color::from_str("bright-white")?, Color::White);
-
-        // bright = light
-        assert_eq!(Color::from_str("brightblack")?, Color::DarkGray);
-        assert_eq!(Color::from_str("brightwhite")?, Color::White);
-
-        Ok(())
-    }
-
-    #[test]
-    fn from_invalid_colors() {
-        let bad_colors = [
-            "invalid_color", // not a color string
-            "abcdef0",       // 7 chars is not a color
-            " bcdefa",       // doesn't start with a '#'
-            "#abcdef00",     // too many chars
-            "resett",        // typo
-            "lightblackk",   // typo
-        ];
-
-        for bad_color in bad_colors {
-            assert!(
-                Color::from_str(bad_color).is_err(),
-                "bad color: '{bad_color}'"
-            );
-        }
-    }
-
     #[test]
     fn style_can_be_const() {
         const RED: Color = Color::Red;

src/style/color.rs

@@ -0,0 +1,362 @@
+use std::{
+    fmt::{self, Debug, Display},
+    str::FromStr,
+};
+
+/// ANSI Color
+///
+/// All colors from the [ANSI color table] are supported (though some names are not exactly the
+/// same).
+///
+/// | Color Name     | Color                   | Foreground | Background |
+/// |----------------|-------------------------|------------|------------|
+/// | `black`        | [`Color::Black`]        | 30         | 40         |
+/// | `red`          | [`Color::Red`]          | 31         | 41         |
+/// | `green`        | [`Color::Green`]        | 32         | 42         |
+/// | `yellow`       | [`Color::Yellow`]       | 33         | 43         |
+/// | `blue`         | [`Color::Blue`]         | 34         | 44         |
+/// | `magenta`      | [`Color::Magenta`]      | 35         | 45         |
+/// | `cyan`         | [`Color::Cyan`]         | 36         | 46         |
+/// | `gray`*        | [`Color::Gray`]         | 37         | 47         |
+/// | `darkgray`*    | [`Color::DarkGray`]     | 90         | 100        |
+/// | `lightred`     | [`Color::LightRed`]     | 91         | 101        |
+/// | `lightgreen`   | [`Color::LightGreen`]   | 92         | 102        |
+/// | `lightyellow`  | [`Color::LightYellow`]  | 93         | 103        |
+/// | `lightblue`    | [`Color::LightBlue`]    | 94         | 104        |
+/// | `lightmagenta` | [`Color::LightMagenta`] | 95         | 105        |
+/// | `lightcyan`    | [`Color::LightCyan`]    | 96         | 106        |
+/// | `white`*       | [`Color::White`]        | 97         | 107        |
+///
+/// - `gray` is sometimes called `white` - this is not supported as we use `white` for bright white
+/// - `gray` is sometimes called `silver` - this is supported
+/// - `darkgray` is sometimes called `light black` or `bright black` (both are supported)
+/// - `white` is sometimes called `light white` or `bright white` (both are supported)
+/// - we support `bright` and `light` prefixes for all colors
+/// - we support `-` and `_` and ` ` as separators for all colors
+/// - we support both `gray` and `grey` spellings
+///
+/// # Example
+///
+/// ```
+/// use std::str::FromStr;
+/// use ratatui::prelude::*;
+///
+/// assert_eq!(Color::from_str("red"), Ok(Color::Red));
+/// assert_eq!("red".parse(), Ok(Color::Red));
+/// assert_eq!("lightred".parse(), Ok(Color::LightRed));
+/// assert_eq!("light red".parse(), Ok(Color::LightRed));
+/// assert_eq!("light-red".parse(), Ok(Color::LightRed));
+/// assert_eq!("light_red".parse(), Ok(Color::LightRed));
+/// assert_eq!("lightRed".parse(), Ok(Color::LightRed));
+/// assert_eq!("bright red".parse(), Ok(Color::LightRed));
+/// assert_eq!("bright-red".parse(), Ok(Color::LightRed));
+/// assert_eq!("silver".parse(), Ok(Color::Gray));
+/// assert_eq!("dark-grey".parse(), Ok(Color::DarkGray));
+/// assert_eq!("dark gray".parse(), Ok(Color::DarkGray));
+/// assert_eq!("light-black".parse(), Ok(Color::DarkGray));
+/// assert_eq!("white".parse(), Ok(Color::White));
+/// assert_eq!("bright white".parse(), Ok(Color::White));
+/// ```
+///
+/// [ANSI color table]: https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
+#[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash)]
+#[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
+pub enum Color {
+    /// Resets the foreground or background color
+    #[default]
+    Reset,
+    /// ANSI Color: Black. Foreground: 30, Background: 40
+    Black,
+    /// ANSI Color: Red. Foreground: 31, Background: 41
+    Red,
+    /// ANSI Color: Green. Foreground: 32, Background: 42
+    Green,
+    /// ANSI Color: Yellow. Foreground: 33, Background: 43
+    Yellow,
+    /// ANSI Color: Blue. Foreground: 34, Background: 44
+    Blue,
+    /// ANSI Color: Magenta. Foreground: 35, Background: 45
+    Magenta,
+    /// ANSI Color: Cyan. Foreground: 36, Background: 46
+    Cyan,
+    /// ANSI Color: White. Foreground: 37, Background: 47
+    ///
+    /// Note that this is sometimes called `silver` or `white` but we use `white` for bright white
+    Gray,
+    /// ANSI Color: Bright Black. Foreground: 90, Background: 100
+    ///
+    /// Note that this is sometimes called `light black` or `bright black` but we use `dark gray`
+    DarkGray,
+    /// ANSI Color: Bright Red. Foreground: 91, Background: 101
+    LightRed,
+    /// ANSI Color: Bright Green. Foreground: 92, Background: 102
+    LightGreen,
+    /// ANSI Color: Bright Yellow. Foreground: 93, Background: 103
+    LightYellow,
+    /// ANSI Color: Bright Blue. Foreground: 94, Background: 104
+    LightBlue,
+    /// ANSI Color: Bright Magenta. Foreground: 95, Background: 105
+    LightMagenta,
+    /// ANSI Color: Bright Cyan. Foreground: 96, Background: 106
+    LightCyan,
+    /// ANSI Color: Bright White. Foreground: 97, Background: 107
+    /// Sometimes called `bright white` or `light white` in some terminals
+    White,
+    /// An RGB color.
+    ///
+    /// Note that only terminals that support 24-bit true color will display this correctly.
+    /// Notably versions of Windows Terminal prior to Windows 10 and macOS Terminal.app do not
+    /// support this.
+    ///
+    /// If the terminal does not support true color, code using the  [`TermwizBackend`] will
+    /// fallback to the default text color. Crossterm and Termion do not have this capability and
+    /// the display will be unpredictable (e.g. Terminal.app may display glitched blinking text).
+    /// See <https://github.com/ratatui-org/ratatui/issues/475> for an example of this problem.
+    ///
+    /// See also: <https://en.wikipedia.org/wiki/ANSI_escape_code#24-bit>
+    ///
+    /// [`TermwizBackend`]: crate::backend::TermwizBackend
+    Rgb(u8, u8, u8),
+    /// An 8-bit 256 color.
+    ///
+    /// See also <https://en.wikipedia.org/wiki/ANSI_escape_code#8-bit>
+    Indexed(u8),
+}
+
+/// Error type indicating a failure to parse a color string.
+#[derive(Debug, Clone, Copy, Eq, PartialEq, Hash)]
+pub struct ParseColorError;
+
+impl std::fmt::Display for ParseColorError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "Failed to parse Colors")
+    }
+}
+
+impl std::error::Error for ParseColorError {}
+
+/// Converts a string representation to a `Color` instance.
+///
+/// The `from_str` function attempts to parse the given string and convert it to the corresponding
+/// `Color` variant. It supports named colors, RGB values, and indexed colors. If the string cannot
+/// be parsed, a `ParseColorError` is returned.
+///
+/// See the [`Color`] documentation for more information on the supported color names.
+///
+/// # Examples
+///
+/// ```
+/// use std::str::FromStr;
+/// use ratatui::prelude::*;
+///
+/// let color: Color = Color::from_str("blue").unwrap();
+/// assert_eq!(color, Color::Blue);
+///
+/// let color: Color = Color::from_str("#FF0000").unwrap();
+/// assert_eq!(color, Color::Rgb(255, 0, 0));
+///
+/// let color: Color = Color::from_str("10").unwrap();
+/// assert_eq!(color, Color::Indexed(10));
+///
+/// let color: Result<Color, _> = Color::from_str("invalid_color");
+/// assert!(color.is_err());
+/// ```
+impl FromStr for Color {
+    type Err = ParseColorError;
+
+    fn from_str(s: &str) -> Result<Self, Self::Err> {
+        Ok(
+            // There is a mix of different color names and formats in the wild.
+            // This is an attempt to support as many as possible.
+            match s
+                .to_lowercase()
+                .replace([' ', '-', '_'], "")
+                .replace("bright", "light")
+                .replace("grey", "gray")
+                .replace("silver", "gray")
+                .replace("lightblack", "darkgray")
+                .replace("lightwhite", "white")
+                .replace("lightgray", "white")
+                .as_ref()
+            {
+                "reset" => Self::Reset,
+                "black" => Self::Black,
+                "red" => Self::Red,
+                "green" => Self::Green,
+                "yellow" => Self::Yellow,
+                "blue" => Self::Blue,
+                "magenta" => Self::Magenta,
+                "cyan" => Self::Cyan,
+                "gray" => Self::Gray,
+                "darkgray" => Self::DarkGray,
+                "lightred" => Self::LightRed,
+                "lightgreen" => Self::LightGreen,
+                "lightyellow" => Self::LightYellow,
+                "lightblue" => Self::LightBlue,
+                "lightmagenta" => Self::LightMagenta,
+                "lightcyan" => Self::LightCyan,
+                "white" => Self::White,
+                _ => {
+                    if let Ok(index) = s.parse::<u8>() {
+                        Self::Indexed(index)
+                    } else if let (Ok(r), Ok(g), Ok(b)) = {
+                        if !s.starts_with('#') || s.len() != 7 {
+                            return Err(ParseColorError);
+                        }
+                        (
+                            u8::from_str_radix(&s[1..3], 16),
+                            u8::from_str_radix(&s[3..5], 16),
+                            u8::from_str_radix(&s[5..7], 16),
+                        )
+                    } {
+                        Self::Rgb(r, g, b)
+                    } else {
+                        return Err(ParseColorError);
+                    }
+                }
+            },
+        )
+    }
+}
+
+impl Display for Color {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Color::Reset => write!(f, "Reset"),
+            Color::Black => write!(f, "Black"),
+            Color::Red => write!(f, "Red"),
+            Color::Green => write!(f, "Green"),
+            Color::Yellow => write!(f, "Yellow"),
+            Color::Blue => write!(f, "Blue"),
+            Color::Magenta => write!(f, "Magenta"),
+            Color::Cyan => write!(f, "Cyan"),
+            Color::Gray => write!(f, "Gray"),
+            Color::DarkGray => write!(f, "DarkGray"),
+            Color::LightRed => write!(f, "LightRed"),
+            Color::LightGreen => write!(f, "LightGreen"),
+            Color::LightYellow => write!(f, "LightYellow"),
+            Color::LightBlue => write!(f, "LightBlue"),
+            Color::LightMagenta => write!(f, "LightMagenta"),
+            Color::LightCyan => write!(f, "LightCyan"),
+            Color::White => write!(f, "White"),
+            Color::Rgb(r, g, b) => write!(f, "#{:02X}{:02X}{:02X}", r, g, b),
+            Color::Indexed(i) => write!(f, "{}", i),
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use std::error::Error;
+
+    use super::*;
+
+    #[test]
+    fn from_rgb_color() {
+        let color: Color = Color::from_str("#FF0000").unwrap();
+        assert_eq!(color, Color::Rgb(255, 0, 0));
+    }
+
+    #[test]
+    fn from_indexed_color() {
+        let color: Color = Color::from_str("10").unwrap();
+        assert_eq!(color, Color::Indexed(10));
+    }
+
+    #[test]
+    fn from_ansi_color() -> Result<(), Box<dyn Error>> {
+        assert_eq!(Color::from_str("reset")?, Color::Reset);
+        assert_eq!(Color::from_str("black")?, Color::Black);
+        assert_eq!(Color::from_str("red")?, Color::Red);
+        assert_eq!(Color::from_str("green")?, Color::Green);
+        assert_eq!(Color::from_str("yellow")?, Color::Yellow);
+        assert_eq!(Color::from_str("blue")?, Color::Blue);
+        assert_eq!(Color::from_str("magenta")?, Color::Magenta);
+        assert_eq!(Color::from_str("cyan")?, Color::Cyan);
+        assert_eq!(Color::from_str("gray")?, Color::Gray);
+        assert_eq!(Color::from_str("darkgray")?, Color::DarkGray);
+        assert_eq!(Color::from_str("lightred")?, Color::LightRed);
+        assert_eq!(Color::from_str("lightgreen")?, Color::LightGreen);
+        assert_eq!(Color::from_str("lightyellow")?, Color::LightYellow);
+        assert_eq!(Color::from_str("lightblue")?, Color::LightBlue);
+        assert_eq!(Color::from_str("lightmagenta")?, Color::LightMagenta);
+        assert_eq!(Color::from_str("lightcyan")?, Color::LightCyan);
+        assert_eq!(Color::from_str("white")?, Color::White);
+
+        // aliases
+        assert_eq!(Color::from_str("lightblack")?, Color::DarkGray);
+        assert_eq!(Color::from_str("lightwhite")?, Color::White);
+        assert_eq!(Color::from_str("lightgray")?, Color::White);
+
+        // silver = grey = gray
+        assert_eq!(Color::from_str("grey")?, Color::Gray);
+        assert_eq!(Color::from_str("silver")?, Color::Gray);
+
+        // spaces are ignored
+        assert_eq!(Color::from_str("light black")?, Color::DarkGray);
+        assert_eq!(Color::from_str("light white")?, Color::White);
+        assert_eq!(Color::from_str("light gray")?, Color::White);
+
+        // dashes are ignored
+        assert_eq!(Color::from_str("light-black")?, Color::DarkGray);
+        assert_eq!(Color::from_str("light-white")?, Color::White);
+        assert_eq!(Color::from_str("light-gray")?, Color::White);
+
+        // underscores are ignored
+        assert_eq!(Color::from_str("light_black")?, Color::DarkGray);
+        assert_eq!(Color::from_str("light_white")?, Color::White);
+        assert_eq!(Color::from_str("light_gray")?, Color::White);
+
+        // bright = light
+        assert_eq!(Color::from_str("bright-black")?, Color::DarkGray);
+        assert_eq!(Color::from_str("bright-white")?, Color::White);
+
+        // bright = light
+        assert_eq!(Color::from_str("brightblack")?, Color::DarkGray);
+        assert_eq!(Color::from_str("brightwhite")?, Color::White);
+
+        Ok(())
+    }
+
+    #[test]
+    fn from_invalid_colors() {
+        let bad_colors = [
+            "invalid_color", // not a color string
+            "abcdef0",       // 7 chars is not a color
+            " bcdefa",       // doesn't start with a '#'
+            "#abcdef00",     // too many chars
+            "resett",        // typo
+            "lightblackk",   // typo
+        ];
+
+        for bad_color in bad_colors {
+            assert!(
+                Color::from_str(bad_color).is_err(),
+                "bad color: '{bad_color}'"
+            );
+        }
+    }
+
+    #[test]
+    fn display() {
+        assert_eq!(format!("{}", Color::Black), "Black");
+        assert_eq!(format!("{}", Color::Red), "Red");
+        assert_eq!(format!("{}", Color::Green), "Green");
+        assert_eq!(format!("{}", Color::Yellow), "Yellow");
+        assert_eq!(format!("{}", Color::Blue), "Blue");
+        assert_eq!(format!("{}", Color::Magenta), "Magenta");
+        assert_eq!(format!("{}", Color::Cyan), "Cyan");
+        assert_eq!(format!("{}", Color::Gray), "Gray");
+        assert_eq!(format!("{}", Color::DarkGray), "DarkGray");
+        assert_eq!(format!("{}", Color::LightRed), "LightRed");
+        assert_eq!(format!("{}", Color::LightGreen), "LightGreen");
+        assert_eq!(format!("{}", Color::LightYellow), "LightYellow");
+        assert_eq!(format!("{}", Color::LightBlue), "LightBlue");
+        assert_eq!(format!("{}", Color::LightMagenta), "LightMagenta");
+        assert_eq!(format!("{}", Color::LightCyan), "LightCyan");
+        assert_eq!(format!("{}", Color::White), "White");
+        assert_eq!(format!("{}", Color::Indexed(10)), "10");
+        assert_eq!(format!("{}", Color::Rgb(255, 0, 0)), "#FF0000");
+        assert_eq!(format!("{}", Color::Reset), "Reset");
+    }
+}

src/style/stylize.rs

@@ -90,19 +90,41 @@ macro_rules! modifier {
     };
 }
 
-/// The trait that enables something to be have a style.
+/// An extension trait for styling objects.
+///
+/// For any type that implements `Stylize`, the provided methods in this trait can be used to style
+/// the type further. This trait is automatically implemented for any type that implements the
+/// [`Styled`] trait which e.g.: [`String`], [`&str`], [`Span`], [`Style`] and many Widget types.
+///
+/// This results in much more ergonomic styling of text and widgets. For example, instead of
+/// writing:
+///
+/// ```rust,ignore
+/// let text = Span::styled("Hello", Style::default().fg(Color::Red).bg(Color::Blue));
+/// ```
+///
+/// You can write:
+///
+/// ```rust,ignore
+/// let text = "Hello".red().on_blue();
+/// ```
+///
+/// This trait implements a provided method for every color as both foreground and background
+/// (prefixed by `on_`), and all modifiers as both an additive and subtractive modifier (prefixed
+/// by `not_`). The `reset()` method is also provided to reset the style.
 ///
 /// # Examples
 /// ```
-/// use ratatui::{
-///     style::{Color, Modifier, Style, Styled, Stylize},
-///     text::Span,
-/// };
+/// use ratatui::{prelude::*, widgets::*};
 ///
-/// assert_eq!(
-///    "hello".red().on_blue().bold(),
-///     Span::styled("hello", Style::default().fg(Color::Red).bg(Color::Blue).add_modifier(Modifier::BOLD))
-/// )
+/// let span = "hello".red().on_blue().bold();
+/// let line = Line::from(vec![
+///     "hello".red().on_blue().bold(),
+///     "world".green().on_yellow().not_bold(),
+/// ]);
+/// let paragraph = Paragraph::new(line).italic().underlined();
+/// let block = Block::default().title("Title").borders(Borders::ALL).on_white().bold();
+/// ```
 pub trait Stylize<'a, T>: Sized {
     fn bg(self, color: Color) -> T;
     fn fg<S: Into<Color>>(self, color: S) -> T;
@@ -179,16 +201,145 @@ impl<'a> Styled for &'a str {
     }
 }
 
+impl Styled for String {
+    type Item = Span<'static>;
+
+    fn style(&self) -> Style {
+        Style::default()
+    }
+
+    fn set_style(self, style: Style) -> Self::Item {
+        Span::styled(self, style)
+    }
+}
+
 #[cfg(test)]
 mod tests {
+    use itertools::Itertools;
+
     use super::*;
 
+    #[test]
+    fn str_styled() {
+        assert_eq!("hello".style(), Style::default());
+        assert_eq!(
+            "hello".set_style(Style::new().cyan()),
+            Span::styled("hello", Style::new().cyan())
+        );
+        assert_eq!("hello".black(), Span::from("hello").black());
+        assert_eq!("hello".red(), Span::from("hello").red());
+        assert_eq!("hello".green(), Span::from("hello").green());
+        assert_eq!("hello".yellow(), Span::from("hello").yellow());
+        assert_eq!("hello".blue(), Span::from("hello").blue());
+        assert_eq!("hello".magenta(), Span::from("hello").magenta());
+        assert_eq!("hello".cyan(), Span::from("hello").cyan());
+        assert_eq!("hello".gray(), Span::from("hello").gray());
+        assert_eq!("hello".dark_gray(), Span::from("hello").dark_gray());
+        assert_eq!("hello".light_red(), Span::from("hello").light_red());
+        assert_eq!("hello".light_green(), Span::from("hello").light_green());
+        assert_eq!("hello".light_yellow(), Span::from("hello").light_yellow());
+        assert_eq!("hello".light_blue(), Span::from("hello").light_blue());
+        assert_eq!("hello".light_magenta(), Span::from("hello").light_magenta());
+        assert_eq!("hello".light_cyan(), Span::from("hello").light_cyan());
+        assert_eq!("hello".white(), Span::from("hello").white());
+
+        assert_eq!("hello".on_black(), Span::from("hello").on_black());
+        assert_eq!("hello".on_red(), Span::from("hello").on_red());
+        assert_eq!("hello".on_green(), Span::from("hello").on_green());
+        assert_eq!("hello".on_yellow(), Span::from("hello").on_yellow());
+        assert_eq!("hello".on_blue(), Span::from("hello").on_blue());
+        assert_eq!("hello".on_magenta(), Span::from("hello").on_magenta());
+        assert_eq!("hello".on_cyan(), Span::from("hello").on_cyan());
+        assert_eq!("hello".on_gray(), Span::from("hello").on_gray());
+        assert_eq!("hello".on_dark_gray(), Span::from("hello").on_dark_gray());
+        assert_eq!("hello".on_light_red(), Span::from("hello").on_light_red());
+        assert_eq!(
+            "hello".on_light_green(),
+            Span::from("hello").on_light_green()
+        );
+        assert_eq!(
+            "hello".on_light_yellow(),
+            Span::from("hello").on_light_yellow()
+        );
+        assert_eq!("hello".on_light_blue(), Span::from("hello").on_light_blue());
+        assert_eq!(
+            "hello".on_light_magenta(),
+            Span::from("hello").on_light_magenta()
+        );
+        assert_eq!("hello".on_light_cyan(), Span::from("hello").on_light_cyan());
+        assert_eq!("hello".on_white(), Span::from("hello").on_white());
+
+        assert_eq!("hello".bold(), Span::from("hello").bold());
+        assert_eq!("hello".dim(), Span::from("hello").dim());
+        assert_eq!("hello".italic(), Span::from("hello").italic());
+        assert_eq!("hello".underlined(), Span::from("hello").underlined());
+        assert_eq!("hello".slow_blink(), Span::from("hello").slow_blink());
+        assert_eq!("hello".rapid_blink(), Span::from("hello").rapid_blink());
+        assert_eq!("hello".reversed(), Span::from("hello").reversed());
+        assert_eq!("hello".hidden(), Span::from("hello").hidden());
+        assert_eq!("hello".crossed_out(), Span::from("hello").crossed_out());
+
+        assert_eq!("hello".not_bold(), Span::from("hello").not_bold());
+        assert_eq!("hello".not_dim(), Span::from("hello").not_dim());
+        assert_eq!("hello".not_italic(), Span::from("hello").not_italic());
+        assert_eq!(
+            "hello".not_underlined(),
+            Span::from("hello").not_underlined()
+        );
+        assert_eq!(
+            "hello".not_slow_blink(),
+            Span::from("hello").not_slow_blink()
+        );
+        assert_eq!(
+            "hello".not_rapid_blink(),
+            Span::from("hello").not_rapid_blink()
+        );
+        assert_eq!("hello".not_reversed(), Span::from("hello").not_reversed());
+        assert_eq!("hello".not_hidden(), Span::from("hello").not_hidden());
+        assert_eq!(
+            "hello".not_crossed_out(),
+            Span::from("hello").not_crossed_out()
+        );
+
+        assert_eq!("hello".reset(), Span::from("hello").reset());
+    }
+
+    #[test]
+    fn string_styled() {
+        let s = String::from("hello");
+        assert_eq!(s.style(), Style::default());
+        assert_eq!(
+            s.clone().set_style(Style::new().cyan()),
+            Span::styled("hello", Style::new().cyan())
+        );
+        assert_eq!(s.clone().black(), Span::from("hello").black());
+        assert_eq!(s.clone().on_black(), Span::from("hello").on_black());
+        assert_eq!(s.clone().bold(), Span::from("hello").bold());
+        assert_eq!(s.clone().not_bold(), Span::from("hello").not_bold());
+        assert_eq!(s.clone().reset(), Span::from("hello").reset());
+    }
+
+    #[test]
+    fn temporary_string_styled() {
+        // to_string() is used to create a temporary String, which is then styled. Without the
+        // `Styled` trait impl for `String`, this would fail to compile with the error: "temporary
+        // value dropped while borrowed"
+        let s = "hello".to_string().red();
+        assert_eq!(s, Span::from("hello").red());
+
+        // format!() is used to create a temporary String inside a closure, which suffers the same
+        // issue as above without the `Styled` trait impl for `String`
+        let items = vec![String::from("a"), String::from("b")];
+        let sss = items.iter().map(|s| format!("{s}{s}").red()).collect_vec();
+        assert_eq!(sss, vec![Span::from("aa").red(), Span::from("bb").red()]);
+    }
+
     #[test]
     fn reset() {
         assert_eq!(
             "hello".on_cyan().light_red().bold().underlined().reset(),
             Span::styled("hello", Style::reset())
-        )
+        );
     }
 
     #[test]
@@ -211,14 +362,14 @@ mod tests {
             .fg(Color::Cyan)
             .add_modifier(Modifier::BOLD);
 
-        assert_eq!("hello".cyan().bold(), Span::styled("hello", cyan_bold))
+        assert_eq!("hello".cyan().bold(), Span::styled("hello", cyan_bold));
     }
 
     #[test]
     fn fg_bg() {
         let cyan_fg_bg = Style::default().bg(Color::Cyan).fg(Color::Cyan);
 
-        assert_eq!("hello".cyan().on_cyan(), Span::styled("hello", cyan_fg_bg))
+        assert_eq!("hello".cyan().on_cyan(), Span::styled("hello", cyan_fg_bg));
     }
 
     #[test]

src/symbols.rs

@@ -1,3 +1,5 @@
+use strum::{Display, EnumString};
+
 pub mod block {
     pub const FULL: &str = "█";
     pub const SEVEN_EIGHTHS: &str = "▉";
@@ -8,7 +10,7 @@ pub mod block {
     pub const ONE_QUARTER: &str = "▎";
     pub const ONE_EIGHTH: &str = "▏";
 
-    #[derive(Debug, Clone)]
+    #[derive(Debug, Clone, Eq, PartialEq, Hash)]
     pub struct Set {
         pub full: &'static str,
         pub seven_eighths: &'static str,
@@ -62,7 +64,7 @@ pub mod bar {
     pub const ONE_QUARTER: &str = "▂";
     pub const ONE_EIGHTH: &str = "▁";
 
-    #[derive(Debug, Clone)]
+    #[derive(Debug, Clone, Eq, PartialEq, Hash)]
     pub struct Set {
         pub full: &'static str,
         pub seven_eighths: &'static str,
@@ -155,7 +157,7 @@ pub mod line {
     pub const DOUBLE_CROSS: &str = "╬";
     pub const THICK_CROSS: &str = "╋";
 
-    #[derive(Debug, Clone)]
+    #[derive(Debug, Clone, Eq, PartialEq, Hash)]
     pub struct Set {
         pub vertical: &'static str,
         pub horizontal: &'static str,
@@ -240,16 +242,23 @@ pub mod braille {
 }
 
 /// Marker to use when plotting data points
-#[derive(Debug, Default, Clone, Copy)]
+#[derive(Debug, Default, Display, EnumString, Clone, Copy, Eq, PartialEq, Hash)]
 pub enum Marker {
-    /// One point per cell in shape of dot
+    /// One point per cell in shape of dot ("•")
     #[default]
     Dot,
-    /// One point per cell in shape of a block
+    /// One point per cell in shape of a block ("█")
     Block,
-    /// One point per cell in the shape of a bar
+    /// One point per cell in the shape of a bar ("▄")
     Bar,
-    /// Up to 8 points per cell
+    /// Use the [Unicode Braille Patterns](https://en.wikipedia.org/wiki/Braille_Patterns) block to
+    /// represent data points.
+    ///
+    /// This is a 2x4 grid of dots, where each dot can be either on or off.
+    ///
+    /// Note: Support for this marker is limited to terminals and fonts that support Unicode
+    /// Braille Patterns. If your terminal does not support this, you will see unicode replacement
+    /// characters (<28>) instead of Braille dots.
     Braille,
 }
 
@@ -265,7 +274,7 @@ pub mod scrollbar {
     /// │  └──────── thumb
     /// └─────────── begin
     /// ```
-    #[derive(Debug, Default, Clone)]
+    #[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
     pub struct Set {
         pub track: &'static str,
         pub thumb: &'static str,
@@ -301,3 +310,27 @@ pub mod scrollbar {
         end: "→",
     };
 }
+
+#[cfg(test)]
+mod tests {
+    use strum::ParseError;
+
+    use super::*;
+
+    #[test]
+    fn marker_tostring() {
+        assert_eq!(Marker::Dot.to_string(), "Dot");
+        assert_eq!(Marker::Block.to_string(), "Block");
+        assert_eq!(Marker::Bar.to_string(), "Bar");
+        assert_eq!(Marker::Braille.to_string(), "Braille");
+    }
+
+    #[test]
+    fn marker_from_str() {
+        assert_eq!("Dot".parse::<Marker>(), Ok(Marker::Dot));
+        assert_eq!("Block".parse::<Marker>(), Ok(Marker::Block));
+        assert_eq!("Bar".parse::<Marker>(), Ok(Marker::Bar));
+        assert_eq!("Braille".parse::<Marker>(), Ok(Marker::Braille));
+        assert_eq!("".parse::<Marker>(), Err(ParseError::VariantNotFound));
+    }
+}

src/terminal.rs

@@ -1,4 +1,35 @@
-use std::io;
+#![deny(missing_docs)]
+//! Provides the [`Terminal`], [`Frame`] and related types.
+//!
+//! The [`Terminal`] is the main interface of this library. It is responsible for drawing and
+//! maintaining the state of the different widgets that compose your application.
+//!
+//! The [`Frame`] is a consistent view into the terminal state for rendering. It is obtained via
+//! the closure argument of [`Terminal::draw`]. It is used to render widgets to the terminal and
+//! control the cursor position.
+//!
+//! # Example
+//!
+//! ```rust,no_run
+//! use std::io::stdout;
+//! use ratatui::{prelude::*, widgets::Paragraph};
+//!
+//! let backend = CrosstermBackend::new(stdout());
+//! let mut terminal = Terminal::new(backend)?;
+//! terminal.draw(|frame| {
+//!     let area = frame.size();
+//!     frame.render_widget(Paragraph::new("Hello world!"), area);
+//! })?;
+//! # std::io::Result::Ok(())
+//! ```
+//!
+//! [Crossterm]: https://crates.io/crates/crossterm
+//! [Termion]: https://crates.io/crates/termion
+//! [Termwiz]: https://crates.io/crates/termwiz
+//! [`backend`]: crate::backend
+//! [`Backend`]: crate::backend::Backend
+//! [`Buffer`]: crate::buffer::Buffer
+use std::{fmt, io};
 
 use crate::{
     backend::{Backend, ClearType},
@@ -7,27 +38,98 @@ use crate::{
     widgets::{StatefulWidget, Widget},
 };
 
-#[derive(Debug, Default, Clone, Eq, PartialEq)]
+/// Represents the viewport of the terminal. The viewport is the area of the terminal that is
+/// currently visible to the user. It can be either fullscreen, inline or fixed.
+///
+/// When the viewport is fullscreen, the whole terminal is used to draw the application.
+///
+/// When the viewport is inline, it is drawn inline with the rest of the terminal. The height of
+/// the viewport is fixed, but the width is the same as the terminal width.
+///
+/// When the viewport is fixed, it is drawn in a fixed area of the terminal. The area is specified
+/// by a [`Rect`].
+///
+/// See [`Terminal::with_options`] for more information.
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub enum Viewport {
+    /// The viewport is fullscreen
     #[default]
     Fullscreen,
+    /// The viewport is inline with the rest of the terminal.
+    ///
+    /// The viewport's height is fixed and specified in number of lines. The width is the same as
+    /// the terminal's width. The viewport is drawn below the cursor position.
     Inline(u16),
+    /// The viewport is drawn in a fixed area of the terminal. The area is specified by a [`Rect`].
     Fixed(Rect),
 }
 
+impl fmt::Display for Viewport {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Viewport::Fullscreen => write!(f, "Fullscreen"),
+            Viewport::Inline(height) => write!(f, "Inline({})", height),
+            Viewport::Fixed(area) => write!(f, "Fixed({})", area),
+        }
+    }
+}
+
 /// Options to pass to [`Terminal::with_options`]
-#[derive(Debug, Default, Clone, Eq, PartialEq)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct TerminalOptions {
     /// Viewport used to draw to the terminal
     pub viewport: Viewport,
 }
 
-/// Interface to the terminal backed by Termion
-#[derive(Debug, Default, Clone)]
+/// An interface that Ratatui to interact and draw [`Frame`]s on the user's terminal.
+///
+/// This is the main entry point for Ratatui. It is responsible for drawing and maintaining the
+/// state of the buffers, cursor and viewport.
+///
+/// The [`Terminal`] is generic over a [`Backend`] implementation which is used to interface with
+/// the underlying terminal library. The [`Backend`] trait is implemented for three popular Rust
+/// terminal libraries: [Crossterm], [Termion] and [Termwiz]. See the [`backend`] module for more
+/// information.
+///
+/// The terminal has two buffers that are used to draw the application. The first buffer is the
+/// current buffer and the second buffer is the previous buffer. The two buffers are compared at
+/// the end of each draw pass to output only the changes to the terminal.
+///
+/// The terminal also has a viewport which is the area of the terminal that is currently visible to
+/// the user. It can be either fullscreen, inline or fixed. See [`Viewport`] for more information.
+///
+/// Applications should detect terminal resizes and call [`Terminal::draw`] to redraw the
+/// application with the new size. This will automatically resize the internal buffers to match the
+/// new size for inline and fullscreen viewports. Fixed viewports are not resized automatically.
+///
+/// # Examples
+///
+/// ```rust,no_run
+/// use std::io::stdout;
+/// use ratatui::{prelude::*, widgets::Paragraph};
+///
+/// let backend = CrosstermBackend::new(stdout());
+/// let mut terminal = Terminal::new(backend)?;
+/// terminal.draw(|frame| {
+///     let area = frame.size();
+///     frame.render_widget(Paragraph::new("Hello World!"), area);
+///     frame.set_cursor(0, 0);
+/// })?;
+/// # std::io::Result::Ok(())
+/// ```
+///
+/// [Crossterm]: https://crates.io/crates/crossterm
+/// [Termion]: https://crates.io/crates/termion
+/// [Termwiz]: https://crates.io/crates/termwiz
+/// [`backend`]: crate::backend
+/// [`Backend`]: crate::backend::Backend
+/// [`Buffer`]: crate::buffer::Buffer
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct Terminal<B>
 where
     B: Backend,
 {
+    /// The backend used to interface with the terminal
     backend: B,
     /// Holds the results of the current and previous draw calls. The two are compared at the end
     /// of each draw pass to output the necessary updates to the terminal
@@ -38,6 +140,7 @@ where
     hidden_cursor: bool,
     /// Viewport
     viewport: Viewport,
+    /// Area of the viewport
     viewport_area: Rect,
     /// Last known size of the terminal. Used to detect if the internal buffers have to be resized.
     last_known_size: Rect,
@@ -46,105 +149,6 @@ where
     last_known_cursor_pos: (u16, u16),
 }
 
-/// Represents a consistent terminal interface for rendering.
-#[derive(Debug)]
-pub struct Frame<'a, B: 'a>
-where
-    B: Backend,
-{
-    terminal: &'a mut Terminal<B>,
-
-    /// Where should the cursor be after drawing this frame?
-    ///
-    /// If `None`, the cursor is hidden and its position is controlled by the backend. If `Some((x,
-    /// y))`, the cursor is shown and placed at `(x, y)` after the call to `Terminal::draw()`.
-    cursor_position: Option<(u16, u16)>,
-}
-
-impl<'a, B> Frame<'a, B>
-where
-    B: Backend,
-{
-    /// Frame size, guaranteed not to change when rendering.
-    pub fn size(&self) -> Rect {
-        self.terminal.viewport_area
-    }
-
-    /// Render a [`Widget`] to the current buffer using [`Widget::render`].
-    ///
-    /// # Examples
-    ///
-    /// ```rust
-    /// # use ratatui::Terminal;
-    /// # use ratatui::backend::TestBackend;
-    /// # use ratatui::layout::Rect;
-    /// # use ratatui::widgets::Block;
-    /// # let backend = TestBackend::new(5, 5);
-    /// # let mut terminal = Terminal::new(backend).unwrap();
-    /// let block = Block::default();
-    /// let area = Rect::new(0, 0, 5, 5);
-    /// let mut frame = terminal.get_frame();
-    /// frame.render_widget(block, area);
-    /// ```
-    pub fn render_widget<W>(&mut self, widget: W, area: Rect)
-    where
-        W: Widget,
-    {
-        widget.render(area, self.terminal.current_buffer_mut());
-    }
-
-    /// Render a [`StatefulWidget`] to the current buffer using [`StatefulWidget::render`].
-    ///
-    /// The last argument should be an instance of the [`StatefulWidget::State`] associated to the
-    /// given [`StatefulWidget`].
-    ///
-    /// # Examples
-    ///
-    /// ```rust
-    /// # use ratatui::Terminal;
-    /// # use ratatui::backend::TestBackend;
-    /// # use ratatui::layout::Rect;
-    /// # use ratatui::widgets::{List, ListItem, ListState};
-    /// # let backend = TestBackend::new(5, 5);
-    /// # let mut terminal = Terminal::new(backend).unwrap();
-    /// let mut state = ListState::default();
-    /// state.select(Some(1));
-    /// let items = vec![
-    ///     ListItem::new("Item 1"),
-    ///     ListItem::new("Item 2"),
-    /// ];
-    /// let list = List::new(items);
-    /// let area = Rect::new(0, 0, 5, 5);
-    /// let mut frame = terminal.get_frame();
-    /// frame.render_stateful_widget(list, area, &mut state);
-    /// ```
-    pub fn render_stateful_widget<W>(&mut self, widget: W, area: Rect, state: &mut W::State)
-    where
-        W: StatefulWidget,
-    {
-        widget.render(area, self.terminal.current_buffer_mut(), state);
-    }
-
-    /// After drawing this frame, make the cursor visible and put it at the specified (x, y)
-    /// coordinates. If this method is not called, the cursor will be hidden.
-    ///
-    /// Note that this will interfere with calls to `Terminal::hide_cursor()`,
-    /// `Terminal::show_cursor()`, and `Terminal::set_cursor()`. Pick one of the APIs and stick
-    /// with it.
-    pub fn set_cursor(&mut self, x: u16, y: u16) {
-        self.cursor_position = Some((x, y));
-    }
-}
-
-/// `CompletedFrame` represents the state of the terminal after all changes performed in the last
-/// [`Terminal::draw`] call have been applied. Therefore, it is only valid until the next call to
-/// [`Terminal::draw`].
-#[derive(Debug, Clone)]
-pub struct CompletedFrame<'a> {
-    pub buffer: &'a Buffer,
-    pub area: Rect,
-}
-
 impl<B> Drop for Terminal<B>
 where
     B: Backend,
@@ -163,8 +167,17 @@ impl<B> Terminal<B>
 where
     B: Backend,
 {
-    /// Wrapper around Terminal initialization. Each buffer is initialized with a blank string and
-    /// default colors for the foreground and the background
+    /// Creates a new [`Terminal`] with the given [`Backend`] with a full screen viewport.
+    ///
+    /// # Example
+    ///
+    /// ```rust,no_run
+    /// # use std::io::stdout;
+    /// # use ratatui::prelude::*;
+    /// let backend = CrosstermBackend::new(stdout());
+    /// let terminal = Terminal::new(backend)?;
+    /// # std::io::Result::Ok(())
+    /// ```
     pub fn new(backend: B) -> io::Result<Terminal<B>> {
         Terminal::with_options(
             backend,
@@ -174,6 +187,21 @@ where
         )
     }
 
+    /// Creates a new [`Terminal`] with the given [`Backend`] and [`TerminalOptions`].
+    ///
+    /// # Example
+    ///
+    /// ```rust
+    /// # use std::io::stdout;
+    /// # use ratatui::{prelude::*, backend::TestBackend};
+    /// let backend = CrosstermBackend::new(stdout());
+    /// let viewport = Viewport::Fixed(Rect::new(0, 0, 10, 10));
+    /// let terminal = Terminal::with_options(
+    ///     backend,
+    ///     TerminalOptions { viewport },
+    /// )?;
+    /// # std::io::Result::Ok(())
+    /// ```
     pub fn with_options(mut backend: B, options: TerminalOptions) -> io::Result<Terminal<B>> {
         let size = match options.viewport {
             Viewport::Fullscreen | Viewport::Inline(_) => backend.size()?,
@@ -204,14 +232,17 @@ where
         }
     }
 
+    /// Gets the current buffer as a mutable reference.
     pub fn current_buffer_mut(&mut self) -> &mut Buffer {
         &mut self.buffers[self.current]
     }
 
+    /// Gets the backend
     pub fn backend(&self) -> &B {
         &self.backend
     }
 
+    /// Gets the backend as a mutable reference
     pub fn backend_mut(&mut self) -> &mut B {
         &mut self.backend
     }
@@ -228,9 +259,10 @@ where
         self.backend.draw(updates.into_iter())
     }
 
-    /// Updates the Terminal so that internal buffers match the requested size. Requested size will
-    /// be saved so the size can remain consistent when rendering.
-    /// This leads to a full clear of the screen.
+    /// Updates the Terminal so that internal buffers match the requested size.
+    ///
+    /// Requested size will be saved so the size can remain consistent when rendering. This leads
+    /// to a full clear of the screen.
     pub fn resize(&mut self, size: Rect) -> io::Result<()> {
         let next_area = match self.viewport {
             Viewport::Fullscreen => size,
@@ -270,6 +302,23 @@ where
 
     /// Synchronizes terminal size, calls the rendering closure, flushes the current internal state
     /// and prepares for the next draw call.
+    ///
+    /// This is the main entry point for drawing to the terminal.
+    ///
+    /// # Examples
+    ///
+    /// ```rust,no_run
+    /// # use std::io::stdout;
+    /// # use ratatui::{prelude::*, widgets::Paragraph};
+    /// let backend = CrosstermBackend::new(stdout());
+    /// let mut terminal = Terminal::new(backend)?;
+    /// terminal.draw(|frame| {
+    ///     let area = frame.size();
+    ///     frame.render_widget(Paragraph::new("Hello World!"), area);
+    ///     frame.set_cursor(0, 0);
+    /// })?;
+    /// # std::io::Result::Ok(())
+    /// ```
     pub fn draw<F>(&mut self, f: F) -> io::Result<CompletedFrame>
     where
         F: FnOnce(&mut Frame<B>),
@@ -307,22 +356,29 @@ where
         })
     }
 
+    /// Hides the cursor.
     pub fn hide_cursor(&mut self) -> io::Result<()> {
         self.backend.hide_cursor()?;
         self.hidden_cursor = true;
         Ok(())
     }
 
+    /// Shows the cursor.
     pub fn show_cursor(&mut self) -> io::Result<()> {
         self.backend.show_cursor()?;
         self.hidden_cursor = false;
         Ok(())
     }
 
+    /// Gets the current cursor position.
+    ///
+    /// This is the position of the cursor after the last draw call and is returned as a tuple of
+    /// `(x, y)` coordinates.
     pub fn get_cursor(&mut self) -> io::Result<(u16, u16)> {
         self.backend.get_cursor()
     }
 
+    /// Sets the cursor position.
     pub fn set_cursor(&mut self, x: u16, y: u16) -> io::Result<()> {
         self.backend.set_cursor(x, y)?;
         self.last_known_cursor_pos = (x, y);
@@ -393,11 +449,7 @@ where
     /// ## Insert a single line before the current viewport
     ///
     /// ```rust
-    /// # use ratatui::widgets::{Paragraph, Widget};
-    /// # use ratatui::text::{Line, Span};
-    /// # use ratatui::style::{Color, Style};
-    /// # use ratatui::{Terminal};
-    /// # use ratatui::backend::TestBackend;
+    /// # use ratatui::{backend::TestBackend, prelude::*, widgets::*};
     /// # let backend = TestBackend::new(10, 10);
     /// # let mut terminal = Terminal::new(backend).unwrap();
     /// terminal.insert_before(1, |buf| {
@@ -487,3 +539,144 @@ fn compute_inline_size<B: Backend>(
         pos,
     ))
 }
+
+/// A consistent view into the terminal state for rendering a single frame.
+///
+/// This is obtained via the closure argument of [`Terminal::draw`]. It is used to render widgets
+/// to the terminal and control the cursor position.
+///
+/// The changes drawn to the frame are not immediately applied to the terminal. They are only
+/// applied after the closure returns. This allows for widgets to be drawn in any order. The
+/// changes are then compared to the previous frame and only the necessary updates are applied to
+/// the terminal.
+///
+/// The [`Frame`] is generic over a [`Backend`] implementation which is used to interface with the
+/// underlying terminal library. The [`Backend`] trait is implemented for three popular Rust
+/// terminal libraries: [Crossterm], [Termion] and [Termwiz]. See the [`backend`] module for more
+/// information.
+///
+/// [Crossterm]: https://crates.io/crates/crossterm
+/// [Termion]: https://crates.io/crates/termion
+/// [Termwiz]: https://crates.io/crates/termwiz
+/// [`backend`]: crate::backend
+/// [`Backend`]: crate::backend::Backend
+/// [`Buffer`]: crate::buffer::Buffer
+#[derive(Debug, Hash)]
+pub struct Frame<'a, B: 'a>
+where
+    B: Backend,
+{
+    /// The terminal that this frame is associated with.
+    terminal: &'a mut Terminal<B>,
+
+    /// Where should the cursor be after drawing this frame?
+    ///
+    /// If `None`, the cursor is hidden and its position is controlled by the backend. If `Some((x,
+    /// y))`, the cursor is shown and placed at `(x, y)` after the call to `Terminal::draw()`.
+    cursor_position: Option<(u16, u16)>,
+}
+
+impl<'a, B> Frame<'a, B>
+where
+    B: Backend,
+{
+    /// The size of the current frame
+    ///
+    /// This is guaranteed not to change when rendering.
+    pub fn size(&self) -> Rect {
+        self.terminal.viewport_area
+    }
+
+    /// Render a [`Widget`] to the current buffer using [`Widget::render`].
+    ///
+    /// Usually the area argument is the size of the current frame or a sub-area of the current
+    /// frame (which can be obtained using [`Layout`] to split the total area).
+    ///
+    /// # Example
+    ///
+    /// ```rust
+    /// # use ratatui::{backend::TestBackend, prelude::*, widgets::Block};
+    /// # let backend = TestBackend::new(5, 5);
+    /// # let mut terminal = Terminal::new(backend).unwrap();
+    /// # let mut frame = terminal.get_frame();
+    /// let block = Block::default();
+    /// let area = Rect::new(0, 0, 5, 5);
+    /// frame.render_widget(block, area);
+    /// ```
+    ///
+    /// [`Layout`]: crate::layout::Layout
+    pub fn render_widget<W>(&mut self, widget: W, area: Rect)
+    where
+        W: Widget,
+    {
+        widget.render(area, self.terminal.current_buffer_mut());
+    }
+
+    /// Render a [`StatefulWidget`] to the current buffer using [`StatefulWidget::render`].
+    ///
+    /// Usually the area argument is the size of the current frame or a sub-area of the current
+    /// frame (which can be obtained using [`Layout`] to split the total area).
+    ///
+    /// The last argument should be an instance of the [`StatefulWidget::State`] associated to the
+    /// given [`StatefulWidget`].
+    ///
+    /// # Examples
+    ///
+    /// ```rust
+    /// # use ratatui::{backend::TestBackend, prelude::*, widgets::*};
+    /// # let backend = TestBackend::new(5, 5);
+    /// # let mut terminal = Terminal::new(backend).unwrap();
+    /// # let mut frame = terminal.get_frame();
+    /// let mut state = ListState::default().with_selected(Some(1));
+    /// let list = List::new(vec![
+    ///     ListItem::new("Item 1"),
+    ///     ListItem::new("Item 2"),
+    /// ]);
+    /// let area = Rect::new(0, 0, 5, 5);
+    /// frame.render_stateful_widget(list, area, &mut state);
+    /// ```
+    ///
+    /// [`Layout`]: crate::layout::Layout
+    pub fn render_stateful_widget<W>(&mut self, widget: W, area: Rect, state: &mut W::State)
+    where
+        W: StatefulWidget,
+    {
+        widget.render(area, self.terminal.current_buffer_mut(), state);
+    }
+
+    /// After drawing this frame, make the cursor visible and put it at the specified (x, y)
+    /// coordinates. If this method is not called, the cursor will be hidden.
+    ///
+    /// Note that this will interfere with calls to `Terminal::hide_cursor()`,
+    /// `Terminal::show_cursor()`, and `Terminal::set_cursor()`. Pick one of the APIs and stick
+    /// with it.
+    pub fn set_cursor(&mut self, x: u16, y: u16) {
+        self.cursor_position = Some((x, y));
+    }
+}
+
+/// `CompletedFrame` represents the state of the terminal after all changes performed in the last
+/// [`Terminal::draw`] call have been applied. Therefore, it is only valid until the next call to
+/// [`Terminal::draw`].
+#[derive(Debug, Clone, Eq, PartialEq, Hash)]
+pub struct CompletedFrame<'a> {
+    /// The buffer that was used to draw the last frame.
+    pub buffer: &'a Buffer,
+    /// The size of the last frame.
+    pub area: Rect,
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn viewport_to_string() {
+        assert_eq!(Viewport::Fullscreen.to_string(), "Fullscreen");
+        assert_eq!(Viewport::Inline(5).to_string(), "Inline(5)");
+        assert_eq!(
+            Viewport::Fixed(Rect::new(0, 0, 5, 5)).to_string(),
+            "Fixed(5x5+0+0)"
+        );
+    }
+}

src/text.rs

@@ -19,9 +19,8 @@
 //! its `title` property (which is a [`Line`] under the hood):
 //!
 //! ```rust
-//! # use ratatui::widgets::Block;
-//! # use ratatui::text::{Span, Line};
-//! # use ratatui::style::{Color, Style};
+//! use ratatui::{prelude::*, widgets::*};
+//!
 //! // A simple string with no styling.
 //! // Converted to Line(vec![
 //! //   Span { content: Cow::Borrowed("My title"), style: Style { .. } }
@@ -61,11 +60,6 @@ pub use masked::Masked;
 mod span;
 pub use span::Span;
 
-/// We keep this for backward compatibility.
-mod spans;
-#[allow(deprecated)]
-pub use spans::Spans;
-
 #[allow(clippy::module_inception)]
 mod text;
 pub use text::Text;

src/text/grapheme.rs

@@ -5,7 +5,7 @@ use crate::style::{Style, Styled};
 /// it actually is not a member of the text type hierarchy (`Text` -> `Line` -> `Span`).
 /// It is a separate type used mostly for rendering purposes. A `Span` consists of components that
 /// can be split into `StyledGrapheme`s, but it does not contain a collection of `StyledGrapheme`s.
-#[derive(Debug, Default, Clone, PartialEq, Eq)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct StyledGrapheme<'a> {
     pub symbol: &'a str,
     pub style: Style,
@@ -29,3 +29,39 @@ impl<'a> Styled for StyledGrapheme<'a> {
         self
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::prelude::*;
+
+    #[test]
+    fn new() {
+        let style = Style::new().yellow();
+        let sg = StyledGrapheme::new("a", style);
+        assert_eq!(sg.symbol, "a");
+        assert_eq!(sg.style, style);
+    }
+
+    #[test]
+    fn style() {
+        let style = Style::new().yellow();
+        let sg = StyledGrapheme::new("a", style);
+        assert_eq!(sg.style(), style);
+    }
+
+    #[test]
+    fn set_style() {
+        let style = Style::new().yellow().on_red();
+        let style2 = Style::new().green();
+        let sg = StyledGrapheme::new("a", style).set_style(style2);
+        assert_eq!(sg.style, style2);
+    }
+
+    #[test]
+    fn stylize() {
+        let style = Style::new().yellow().on_red();
+        let sg = StyledGrapheme::new("a", style).green();
+        assert_eq!(sg.style, Style::new().green().on_red());
+    }
+}

src/text/line.rs

@@ -1,23 +1,44 @@
-#![allow(deprecated)]
 use std::borrow::Cow;
 
-use super::{Span, Spans, Style, StyledGrapheme};
+use super::{Span, Style, StyledGrapheme};
 use crate::layout::Alignment;
 
-#[derive(Debug, Default, Clone, Eq, PartialEq)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct Line<'a> {
     pub spans: Vec<Span<'a>>,
     pub alignment: Option<Alignment>,
 }
 
 impl<'a> Line<'a> {
+    /// Create a line with the default style.
+    ///
+    /// # Examples
+    ///
+    /// ```rust
+    /// # use ratatui::prelude::*;
+    /// Line::raw("test content");
+    /// Line::raw(String::from("test content"));
+    /// ```
+    pub fn raw<T>(content: T) -> Line<'a>
+    where
+        T: Into<Cow<'a, str>>,
+    {
+        Line {
+            spans: content
+                .into()
+                .lines()
+                .map(|v| Span::raw(v.to_string()))
+                .collect(),
+            alignment: None,
+        }
+    }
+
     /// Create a line with a style.
     ///
     /// # Examples
     ///
     /// ```rust
-    /// # use ratatui::text::Line;
-    /// # use ratatui::style::{Color, Modifier, Style};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC);
     /// Line::styled("My text", style);
     /// Line::styled(String::from("My text"), style);
@@ -34,8 +55,7 @@ impl<'a> Line<'a> {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::text::{Span, Line};
-    /// # use ratatui::style::{Color, Style};
+    /// # use ratatui::prelude::*;
     /// let line = Line::from(vec![
     ///     Span::styled("My", Style::default().fg(Color::Yellow)),
     ///     Span::raw(" text"),
@@ -54,9 +74,9 @@ impl<'a> Line<'a> {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::text::{Line, StyledGrapheme};
-    /// # use ratatui::style::{Color, Modifier, Style};
-    /// # use std::iter::Iterator;
+    /// use std::iter::Iterator;
+    /// use ratatui::{prelude::*, text::StyledGrapheme};
+    ///
     /// let line = Line::styled("Text", Style::default().fg(Color::Yellow));
     /// let style = Style::default().fg(Color::Green).bg(Color::Black);
     /// assert_eq!(
@@ -83,8 +103,7 @@ impl<'a> Line<'a> {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::text::{Span, Line};
-    /// # use ratatui::style::{Color, Style, Modifier};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC);
     /// let mut raw_line = Line::from(vec![
     ///     Span::raw("My"),
@@ -112,8 +131,7 @@ impl<'a> Line<'a> {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::text::{Span, Line};
-    /// # use ratatui::style::{Color, Style, Modifier};
+    /// # use ratatui::prelude::*;
     /// let mut line = Line::from(vec![
     ///     Span::styled("My", Style::default().fg(Color::Yellow)),
     ///     Span::styled(" text", Style::default().add_modifier(Modifier::BOLD)),
@@ -135,10 +153,7 @@ impl<'a> Line<'a> {
     /// ## Examples
     ///
     /// ```rust
-    /// # use std::borrow::Cow;
-    /// # use ratatui::layout::Alignment;
-    /// # use ratatui::text::{Span, Line};
-    /// # use ratatui::style::{Color, Style, Modifier};
+    /// # use ratatui::prelude::*;
     /// let mut line = Line::from("Hi, what's up?");
     /// assert_eq!(None, line.alignment);
     /// assert_eq!(Some(Alignment::Right), line.alignment(Alignment::Right).alignment)
@@ -187,18 +202,12 @@ impl<'a> From<Line<'a>> for String {
     }
 }
 
-impl<'a> From<Spans<'a>> for Line<'a> {
-    fn from(value: Spans<'a>) -> Self {
-        Self::from(value.0)
-    }
-}
-
 #[cfg(test)]
 mod tests {
     use crate::{
         layout::Alignment,
         style::{Color, Modifier, Style},
-        text::{Line, Span, Spans, StyledGrapheme},
+        text::{Line, Span, StyledGrapheme},
     };
 
     #[test]
@@ -273,15 +282,6 @@ mod tests {
         assert_eq!(vec![span], line.spans);
     }
 
-    #[test]
-    fn test_from_spans() {
-        let spans = vec![
-            Span::styled("Hello,", Style::default().fg(Color::Red)),
-            Span::styled(" world!", Style::default().fg(Color::Green)),
-        ];
-        assert_eq!(Line::from(Spans::from(spans.clone())), Line::from(spans));
-    }
-
     #[test]
     fn test_into_string() {
         let line = Line::from(vec![
@@ -330,4 +330,15 @@ mod tests {
             ],
         );
     }
+
+    #[test]
+    fn raw_str() {
+        let line = Line::raw("test content");
+        assert_eq!(line.spans, vec![Span::raw("test content")]);
+        assert_eq!(line.alignment, None);
+
+        let line = Line::raw("a\nb");
+        assert_eq!(line.spans, vec![Span::raw("a"), Span::raw("b")]);
+        assert_eq!(line.alignment, None);
+    }
 }

src/text/masked.rs

@@ -13,7 +13,7 @@ use super::Text;
 /// # Examples
 ///
 /// ```rust
-/// use ratatui::{buffer::Buffer, layout::Rect, text::Masked, widgets::{Paragraph, Widget}};
+/// use ratatui::{prelude::*, widgets::*};
 ///
 /// let mut buffer = Buffer::empty(Rect::new(0, 0, 5, 1));
 /// let password = Masked::new("12345", 'x');

src/text/span.rs

@@ -6,22 +6,69 @@ use unicode_width::UnicodeWidthStr;
 use super::StyledGrapheme;
 use crate::style::{Style, Styled};
 
-/// A string where all graphemes have the same style.
-#[derive(Debug, Default, Clone, Eq, PartialEq)]
+/// Represents a part of a line that is contiguous and where all characters share the same style.
+///
+/// A `Span` is the smallest unit of text that can be styled. It is usually combined in the [`Line`]
+/// type to represent a line of text where each `Span` may have a different style.
+///
+/// # Examples
+///
+/// A `Span` with `style` set to [`Style::default()`] can be created from a `&str`, a `String`, or
+/// any type convertible to [`Cow<str>`].
+///
+/// ```rust
+/// use ratatui::prelude::*;
+///
+/// let span = Span::raw("test content");
+/// let span = Span::raw(String::from("test content"));
+/// let span = Span::from("test content");
+/// let span = Span::from(String::from("test content"));
+/// let span: Span = "test content".into();
+/// let span: Span = String::from("test content").into();
+/// ```
+///
+/// Styled spans can be created using [`Span::styled`] or by converting strings using methods from
+/// the [`Stylize`] trait.
+///
+/// ```rust
+/// use ratatui::prelude::*;
+///
+/// let span = Span::styled("test content", Style::new().green());
+/// let span = Span::styled(String::from("test content"), Style::new().green());
+/// let span = "test content".green();
+/// let span = String::from("test content").green();
+/// ```
+///
+/// `Span` implements [`Stylize`], which allows it to be styled using the shortcut methods. Styles
+/// applied are additive.
+///
+/// ```rust
+/// use ratatui::prelude::*;
+///
+/// let span = Span::raw("test content").green().on_yellow().italic();
+/// let span = Span::raw(String::from("test content")).green().on_yellow().italic();
+/// ```
+///
+/// [`Line`]: crate::text::Line
+/// [`Stylize`]: crate::style::Stylize
+/// [`Cow<str>`]: std::borrow::Cow
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct Span<'a> {
+    /// The content of the span as a Clone-on-write string.
     pub content: Cow<'a, str>,
+    /// The style of the span.
     pub style: Style,
 }
 
 impl<'a> Span<'a> {
-    /// Create a span with no style.
+    /// Create a span with the default style.
     ///
-    /// ## Examples
+    /// # Examples
     ///
     /// ```rust
-    /// # use ratatui::text::Span;
-    /// Span::raw("My text");
-    /// Span::raw(String::from("My text"));
+    /// # use ratatui::prelude::*;
+    /// Span::raw("test content");
+    /// Span::raw(String::from("test content"));
     /// ```
     pub fn raw<T>(content: T) -> Span<'a>
     where
@@ -33,16 +80,15 @@ impl<'a> Span<'a> {
         }
     }
 
-    /// Create a span with a style.
+    /// Create a span with the specified style.
     ///
     /// # Examples
     ///
     /// ```rust
-    /// # use ratatui::text::Span;
-    /// # use ratatui::style::{Color, Modifier, Style};
-    /// let style = Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC);
-    /// Span::styled("My text", style);
-    /// Span::styled(String::from("My text"), style);
+    /// # use ratatui::prelude::*;
+    /// let style = Style::new().yellow().on_green().italic();
+    /// Span::styled("test content", style);
+    /// Span::styled(String::from("test content"), style);
     /// ```
     pub fn styled<T>(content: T, style: Style) -> Span<'a>
     where
@@ -54,31 +100,31 @@ impl<'a> Span<'a> {
         }
     }
 
-    /// Returns the width of the content held by this span.
+    /// Returns the unicode width of the content held by this span.
     pub fn width(&self) -> usize {
         self.content.width()
     }
 
     /// Returns an iterator over the graphemes held by this span.
     ///
-    /// `base_style` is the [`Style`] that will be patched with each grapheme [`Style`] to get
-    /// the resulting [`Style`].
+    /// `base_style` is the [`Style`] that will be patched with the `Span`'s `style` to get the
+    /// resulting [`Style`].
     ///
-    /// ## Examples
+    /// # Example
     ///
     /// ```rust
-    /// # use ratatui::text::{Span, StyledGrapheme};
-    /// # use ratatui::style::{Color, Modifier, Style};
-    /// # use std::iter::Iterator;
-    /// let span = Span::styled("Text", Style::default().fg(Color::Yellow));
-    /// let style = Style::default().fg(Color::Green).bg(Color::Black);
+    /// use std::iter::Iterator;
+    /// use ratatui::{prelude::*, text::StyledGrapheme};
+    ///
+    /// let span = Span::styled("Test", Style::new().green().italic());
+    /// let style = Style::new().red().on_yellow();
     /// assert_eq!(
     ///     span.styled_graphemes(style).collect::<Vec<StyledGrapheme>>(),
     ///     vec![
-    ///         StyledGrapheme::new("T", Style::default().fg(Color::Yellow).bg(Color::Black)),
-    ///         StyledGrapheme::new("e", Style::default().fg(Color::Yellow).bg(Color::Black)),
-    ///         StyledGrapheme::new("x", Style::default().fg(Color::Yellow).bg(Color::Black)),
-    ///         StyledGrapheme::new("t", Style::default().fg(Color::Yellow).bg(Color::Black)),
+    ///         StyledGrapheme::new("T", Style::new().green().on_yellow().italic()),
+    ///         StyledGrapheme::new("e", Style::new().green().on_yellow().italic()),
+    ///         StyledGrapheme::new("s", Style::new().green().on_yellow().italic()),
+    ///         StyledGrapheme::new("t", Style::new().green().on_yellow().italic()),
     ///     ],
     /// );
     /// ```
@@ -86,66 +132,59 @@ impl<'a> Span<'a> {
         &'a self,
         base_style: Style,
     ) -> impl Iterator<Item = StyledGrapheme<'a>> {
-        UnicodeSegmentation::graphemes(self.content.as_ref(), true)
+        self.content
+            .as_ref()
+            .graphemes(true)
+            .filter(|g| *g != "\n")
             .map(move |g| StyledGrapheme {
                 symbol: g,
                 style: base_style.patch(self.style),
             })
-            .filter(|s| s.symbol != "\n")
     }
 
-    /// Patches the style an existing Span, adding modifiers from the given style.
+    /// Patches the style of the Span, adding modifiers from the given style.
     ///
-    /// ## Examples
+    /// # Example
     ///
     /// ```rust
-    /// # use ratatui::text::Span;
-    /// # use ratatui::style::{Color, Style, Modifier};
-    /// let style = Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC);
-    /// let mut raw_span = Span::raw("My text");
-    /// let mut styled_span = Span::styled("My text", style);
-    ///
-    /// assert_ne!(raw_span, styled_span);
-    ///
-    /// raw_span.patch_style(style);
-    /// assert_eq!(raw_span, styled_span);
+    /// # use ratatui::prelude::*;
+    /// let mut span = Span::styled("test content", Style::new().green().italic());
+    /// span.patch_style(Style::new().red().on_yellow().bold());
+    /// assert_eq!(span.style, Style::new().red().on_yellow().italic().bold());
     /// ```
     pub fn patch_style(&mut self, style: Style) {
         self.style = self.style.patch(style);
     }
 
     /// Resets the style of the Span.
-    /// Equivalent to calling `patch_style(Style::reset())`.
     ///
-    /// ## Examples
+    /// This is Equivalent to calling `patch_style(Style::reset())`.
+    ///
+    /// # Example
     ///
     /// ```rust
-    /// # use ratatui::text::Span;
-    /// # use ratatui::style::{Color, Style, Modifier};
-    /// let mut span = Span::styled("My text", Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC));
-    ///
+    /// # use ratatui::prelude::*;
+    /// let mut span = Span::styled("Test Content", Style::new().green().on_yellow().italic());
     /// span.reset_style();
-    /// assert_eq!(Style::reset(), span.style);
+    /// assert_eq!(span.style, Style::reset());
     /// ```
     pub fn reset_style(&mut self) {
         self.patch_style(Style::reset());
     }
 }
 
-impl<'a> From<String> for Span<'a> {
-    fn from(s: String) -> Span<'a> {
-        Span::raw(s)
-    }
-}
-
-impl<'a> From<&'a str> for Span<'a> {
-    fn from(s: &'a str) -> Span<'a> {
-        Span::raw(s)
+impl<'a, T> From<T> for Span<'a>
+where
+    T: Into<Cow<'a, str>>,
+{
+    fn from(s: T) -> Self {
+        Span::raw(s.into())
     }
 }
 
 impl<'a> Styled for Span<'a> {
     type Item = Span<'a>;
+
     fn style(&self) -> Style {
         self.style
     }
@@ -155,3 +194,113 @@ impl<'a> Styled for Span<'a> {
         self
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::style::Stylize;
+
+    #[test]
+    fn default() {
+        let span = Span::default();
+        assert_eq!(span.content, Cow::Borrowed(""));
+        assert_eq!(span.style, Style::default());
+    }
+
+    #[test]
+    fn raw_str() {
+        let span = Span::raw("test content");
+        assert_eq!(span.content, Cow::Borrowed("test content"));
+        assert_eq!(span.style, Style::default());
+    }
+
+    #[test]
+    fn raw_string() {
+        let content = String::from("test content");
+        let span = Span::raw(content.clone());
+        assert_eq!(span.content, Cow::Owned::<str>(content));
+        assert_eq!(span.style, Style::default());
+    }
+
+    #[test]
+    fn styled_str() {
+        let style = Style::new().red();
+        let span = Span::styled("test content", style);
+        assert_eq!(span.content, Cow::Borrowed("test content"));
+        assert_eq!(span.style, Style::new().red());
+    }
+
+    #[test]
+    fn styled_string() {
+        let content = String::from("test content");
+        let style = Style::new().green();
+        let span = Span::styled(content.clone(), style);
+        assert_eq!(span.content, Cow::Owned::<str>(content));
+        assert_eq!(span.style, style);
+    }
+
+    #[test]
+    fn from_ref_str_borrowed_cow() {
+        let content = "test content";
+        let span = Span::from(content);
+        assert_eq!(span.content, Cow::Borrowed(content));
+        assert_eq!(span.style, Style::default());
+    }
+
+    #[test]
+    fn from_string_ref_str_borrowed_cow() {
+        let content = String::from("test content");
+        let span = Span::from(content.as_str());
+        assert_eq!(span.content, Cow::Borrowed(content.as_str()));
+        assert_eq!(span.style, Style::default());
+    }
+
+    #[test]
+    fn from_string_owned_cow() {
+        let content = String::from("test content");
+        let span = Span::from(content.clone());
+        assert_eq!(span.content, Cow::Owned::<str>(content));
+        assert_eq!(span.style, Style::default());
+    }
+
+    #[test]
+    fn from_ref_string_borrowed_cow() {
+        let content = String::from("test content");
+        let span = Span::from(&content);
+        assert_eq!(span.content, Cow::Borrowed(content.as_str()));
+        assert_eq!(span.style, Style::default());
+    }
+
+    #[test]
+    fn reset_style() {
+        let mut span = Span::styled("test content", Style::new().green());
+        span.reset_style();
+        assert_eq!(span.style, Style::reset());
+    }
+
+    #[test]
+    fn patch_style() {
+        let mut span = Span::styled("test content", Style::new().green().on_yellow());
+        span.patch_style(Style::new().red().bold());
+        assert_eq!(span.style, Style::new().red().on_yellow().bold());
+    }
+
+    #[test]
+    fn width() {
+        assert_eq!(Span::raw("").width(), 0);
+        assert_eq!(Span::raw("test").width(), 4);
+        assert_eq!(Span::raw("test content").width(), 12);
+    }
+
+    #[test]
+    fn stylize() {
+        let span = Span::raw("test content").green();
+        assert_eq!(span.content, Cow::Borrowed("test content"));
+        assert_eq!(span.style, Style::new().green());
+
+        let span = Span::styled("test content", Style::new().green());
+        let stylized = span.on_yellow().bold();
+        assert_eq!(stylized.content, Cow::Borrowed("test content"));
+        assert_eq!(stylized.style, Style::new().green().on_yellow().bold());
+    }
+}

src/text/spans.rs

@@ -1,225 +0,0 @@
-#![allow(deprecated)]
-
-use super::{Span, Style};
-use crate::{layout::Alignment, text::Line};
-
-/// A string composed of clusters of graphemes, each with their own style.
-///
-/// `Spans` has been deprecated in favor of `Line`, and will be removed in the
-/// future. All methods that accept Spans have been replaced with methods that
-/// accept Into<Line<'a>> (which is implemented on `Spans`) to allow users of
-/// this crate to gradually transition to Line.
-#[derive(Debug, Default, Clone, Eq, PartialEq)]
-#[deprecated(note = "Use `ratatui::text::Line` instead")]
-pub struct Spans<'a>(pub Vec<Span<'a>>);
-
-impl<'a> Spans<'a> {
-    /// Returns the width of the underlying string.
-    ///
-    /// ## Examples
-    ///
-    /// ```rust
-    /// # use ratatui::text::{Span, Spans};
-    /// # use ratatui::style::{Color, Style};
-    /// let spans = Spans::from(vec![
-    ///     Span::styled("My", Style::default().fg(Color::Yellow)),
-    ///     Span::raw(" text"),
-    /// ]);
-    /// assert_eq!(7, spans.width());
-    /// ```
-    pub fn width(&self) -> usize {
-        self.0.iter().map(Span::width).sum()
-    }
-
-    /// Patches the style of each Span in an existing Spans, adding modifiers from the given style.
-    ///
-    /// ## Examples
-    ///
-    /// ```rust
-    /// # use ratatui::text::{Span, Spans};
-    /// # use ratatui::style::{Color, Style, Modifier};
-    /// let style = Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC);
-    /// let mut raw_spans = Spans::from(vec![
-    ///     Span::raw("My"),
-    ///     Span::raw(" text"),
-    /// ]);
-    /// let mut styled_spans = Spans::from(vec![
-    ///     Span::styled("My", style),
-    ///     Span::styled(" text", style),
-    /// ]);
-    ///
-    /// assert_ne!(raw_spans, styled_spans);
-    ///
-    /// raw_spans.patch_style(style);
-    /// assert_eq!(raw_spans, styled_spans);
-    /// ```
-    pub fn patch_style(&mut self, style: Style) {
-        for span in &mut self.0 {
-            span.patch_style(style);
-        }
-    }
-
-    /// Resets the style of each Span in the Spans.
-    /// Equivalent to calling `patch_style(Style::reset())`.
-    ///
-    /// ## Examples
-    ///
-    /// ```rust
-    /// # use ratatui::text::{Span, Spans};
-    /// # use ratatui::style::{Color, Style, Modifier};
-    /// let mut spans = Spans::from(vec![
-    ///     Span::styled("My", Style::default().fg(Color::Yellow)),
-    ///     Span::styled(" text", Style::default().add_modifier(Modifier::BOLD)),
-    /// ]);
-    ///
-    /// spans.reset_style();
-    /// assert_eq!(Style::reset(), spans.0[0].style);
-    /// assert_eq!(Style::reset(), spans.0[1].style);
-    /// ```
-    pub fn reset_style(&mut self) {
-        for span in &mut self.0 {
-            span.reset_style();
-        }
-    }
-
-    /// Sets the target alignment for this line of text.
-    /// Defaults to: [`None`], meaning the alignment is determined by the rendering widget.
-    ///
-    /// ## Examples
-    ///
-    /// ```rust
-    /// # use std::borrow::Cow;
-    /// # use ratatui::layout::Alignment;
-    /// # use ratatui::text::{Span, Spans};
-    /// # use ratatui::style::{Color, Style, Modifier};
-    /// let mut line = Spans::from("Hi, what's up?").alignment(Alignment::Right);
-    /// assert_eq!(Some(Alignment::Right), line.alignment)
-    /// ```
-    pub fn alignment(self, alignment: Alignment) -> Line<'a> {
-        let line = Line::from(self);
-        line.alignment(alignment)
-    }
-}
-
-impl<'a> From<String> for Spans<'a> {
-    fn from(s: String) -> Spans<'a> {
-        Spans(vec![Span::from(s)])
-    }
-}
-
-impl<'a> From<&'a str> for Spans<'a> {
-    fn from(s: &'a str) -> Spans<'a> {
-        Spans(vec![Span::from(s)])
-    }
-}
-
-impl<'a> From<Vec<Span<'a>>> for Spans<'a> {
-    fn from(spans: Vec<Span<'a>>) -> Spans<'a> {
-        Spans(spans)
-    }
-}
-
-impl<'a> From<Span<'a>> for Spans<'a> {
-    fn from(span: Span<'a>) -> Spans<'a> {
-        Spans(vec![span])
-    }
-}
-
-impl<'a> From<Spans<'a>> for String {
-    fn from(line: Spans<'a>) -> String {
-        line.0.iter().fold(String::new(), |mut acc, s| {
-            acc.push_str(s.content.as_ref());
-            acc
-        })
-    }
-}
-
-#[cfg(test)]
-mod tests {
-    use crate::{
-        style::{Color, Modifier, Style},
-        text::{Span, Spans},
-    };
-
-    #[test]
-    fn test_width() {
-        let spans = Spans::from(vec![
-            Span::styled("My", Style::default().fg(Color::Yellow)),
-            Span::raw(" text"),
-        ]);
-        assert_eq!(7, spans.width());
-
-        let empty_spans = Spans::default();
-        assert_eq!(0, empty_spans.width());
-    }
-
-    #[test]
-    fn test_patch_style() {
-        let style = Style::default()
-            .fg(Color::Yellow)
-            .add_modifier(Modifier::ITALIC);
-        let mut raw_spans = Spans::from(vec![Span::raw("My"), Span::raw(" text")]);
-        let styled_spans = Spans::from(vec![
-            Span::styled("My", style),
-            Span::styled(" text", style),
-        ]);
-
-        assert_ne!(raw_spans, styled_spans);
-
-        raw_spans.patch_style(style);
-        assert_eq!(raw_spans, styled_spans);
-    }
-
-    #[test]
-    fn test_reset_style() {
-        let mut spans = Spans::from(vec![
-            Span::styled("My", Style::default().fg(Color::Yellow)),
-            Span::styled(" text", Style::default().add_modifier(Modifier::BOLD)),
-        ]);
-
-        spans.reset_style();
-        assert_eq!(Style::reset(), spans.0[0].style);
-        assert_eq!(Style::reset(), spans.0[1].style);
-    }
-
-    #[test]
-    fn test_from_string() {
-        let s = String::from("Hello, world!");
-        let spans = Spans::from(s);
-        assert_eq!(vec![Span::from("Hello, world!")], spans.0);
-    }
-
-    #[test]
-    fn test_from_str() {
-        let s = "Hello, world!";
-        let spans = Spans::from(s);
-        assert_eq!(vec![Span::from("Hello, world!")], spans.0);
-    }
-
-    #[test]
-    fn test_from_vec() {
-        let spans_vec = vec![
-            Span::styled("Hello,", Style::default().fg(Color::Red)),
-            Span::styled(" world!", Style::default().fg(Color::Green)),
-        ];
-        let spans = Spans::from(spans_vec.clone());
-        assert_eq!(spans_vec, spans.0);
-    }
-
-    #[test]
-    fn test_from_span() {
-        let span = Span::styled("Hello, world!", Style::default().fg(Color::Yellow));
-        let spans = Spans::from(span.clone());
-        assert_eq!(vec![span], spans.0);
-    }
-
-    #[test]
-    fn test_into_string() {
-        let spans = Spans::from(vec![
-            Span::styled("Hello,", Style::default().fg(Color::Red)),
-            Span::styled(" world!", Style::default().fg(Color::Green)),
-        ]);
-        let s: String = spans.into();
-        assert_eq!("Hello, world!", s);
-    }
-}

src/text/text.rs

@@ -1,7 +1,6 @@
 use std::borrow::Cow;
 
-#[allow(deprecated)]
-use super::{Line, Span, Spans};
+use super::{Line, Span};
 use crate::style::Style;
 
 /// A string split over multiple lines where each line is composed of several clusters, each with
@@ -12,8 +11,8 @@ use crate::style::Style;
 /// [`core::iter::Extend`] which enables the concatenation of several [`Text`] blocks.
 ///
 /// ```rust
-/// # use ratatui::text::Text;
-/// # use ratatui::style::{Color, Modifier, Style};
+/// use ratatui::prelude::*;
+///
 /// let style = Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC);
 ///
 /// // An initial two lines of `Text` built from a `&str`
@@ -28,7 +27,7 @@ use crate::style::Style;
 /// text.extend(Text::styled("Some more lines\nnow with more style!", style));
 /// assert_eq!(6, text.height());
 /// ```
-#[derive(Debug, Default, Clone, Eq, PartialEq)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct Text<'a> {
     pub lines: Vec<Line<'a>>,
 }
@@ -39,7 +38,7 @@ impl<'a> Text<'a> {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::text::Text;
+    /// # use ratatui::prelude::*;
     /// Text::raw("The first line\nThe second line");
     /// Text::raw(String::from("The first line\nThe second line"));
     /// ```
@@ -62,8 +61,7 @@ impl<'a> Text<'a> {
     /// # Examples
     ///
     /// ```rust
-    /// # use ratatui::text::Text;
-    /// # use ratatui::style::{Color, Modifier, Style};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC);
     /// Text::styled("The first line\nThe second line", style);
     /// Text::styled(String::from("The first line\nThe second line"), style);
@@ -82,7 +80,7 @@ impl<'a> Text<'a> {
     /// ## Examples
     ///
     /// ```rust
-    /// use ratatui::text::Text;
+    /// # use ratatui::prelude::*;
     /// let text = Text::from("The first line\nThe second line");
     /// assert_eq!(15, text.width());
     /// ```
@@ -95,7 +93,7 @@ impl<'a> Text<'a> {
     /// ## Examples
     ///
     /// ```rust
-    /// use ratatui::text::Text;
+    /// # use ratatui::prelude::*;
     /// let text = Text::from("The first line\nThe second line");
     /// assert_eq!(2, text.height());
     /// ```
@@ -108,8 +106,7 @@ impl<'a> Text<'a> {
     /// # Examples
     ///
     /// ```rust
-    /// # use ratatui::text::Text;
-    /// # use ratatui::style::{Color, Modifier, Style};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC);
     /// let mut raw_text = Text::raw("The first line\nThe second line");
     /// let styled_text = Text::styled(String::from("The first line\nThe second line"), style);
@@ -130,8 +127,7 @@ impl<'a> Text<'a> {
     /// ## Examples
     ///
     /// ```rust
-    /// # use ratatui::text::{Span, Line, Text};
-    /// # use ratatui::style::{Color, Style, Modifier};
+    /// # use ratatui::prelude::*;
     /// let style = Style::default().fg(Color::Yellow).add_modifier(Modifier::ITALIC);
     /// let mut text = Text::styled("The first line\nThe second line", style);
     ///
@@ -175,30 +171,12 @@ impl<'a> From<Span<'a>> for Text<'a> {
     }
 }
 
-#[allow(deprecated)]
-impl<'a> From<Spans<'a>> for Text<'a> {
-    fn from(spans: Spans<'a>) -> Text<'a> {
-        Text {
-            lines: vec![spans.into()],
-        }
-    }
-}
-
 impl<'a> From<Line<'a>> for Text<'a> {
     fn from(line: Line<'a>) -> Text<'a> {
         Text { lines: vec![line] }
     }
 }
 
-#[allow(deprecated)]
-impl<'a> From<Vec<Spans<'a>>> for Text<'a> {
-    fn from(lines: Vec<Spans<'a>>) -> Text<'a> {
-        Text {
-            lines: lines.into_iter().map(|l| l.0.into()).collect(),
-        }
-    }
-}
-
 impl<'a> From<Vec<Line<'a>>> for Text<'a> {
     fn from(lines: Vec<Line<'a>>) -> Text<'a> {
         Text { lines }
@@ -223,3 +201,193 @@ where
         self.lines.extend(lines);
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::style::Stylize;
+
+    #[test]
+    fn raw() {
+        let text = Text::raw("The first line\nThe second line");
+        assert_eq!(
+            text.lines,
+            vec![Line::from("The first line"), Line::from("The second line")]
+        );
+    }
+
+    #[test]
+    fn styled() {
+        let style = Style::new().yellow().italic();
+        let text = Text::styled("The first line\nThe second line", style);
+        assert_eq!(
+            text.lines,
+            vec![
+                Line::from(Span::styled("The first line", style)),
+                Line::from(Span::styled("The second line", style))
+            ]
+        );
+    }
+
+    #[test]
+    fn width() {
+        let text = Text::from("The first line\nThe second line");
+        assert_eq!(15, text.width());
+    }
+
+    #[test]
+    fn height() {
+        let text = Text::from("The first line\nThe second line");
+        assert_eq!(2, text.height());
+    }
+
+    #[test]
+    fn patch_style() {
+        let style = Style::new().yellow().italic();
+        let style2 = Style::new().red().underlined();
+        let mut text = Text::styled("The first line\nThe second line", style);
+
+        text.patch_style(style2);
+        let expected_style = Style::new().red().italic().underlined();
+        assert_eq!(
+            text.lines,
+            vec![
+                Line::from(Span::styled("The first line", expected_style)),
+                Line::from(Span::styled("The second line", expected_style))
+            ]
+        );
+    }
+
+    #[test]
+    fn reset_style() {
+        let style = Style::new().yellow().italic();
+        let mut text = Text::styled("The first line\nThe second line", style);
+
+        text.reset_style();
+        assert_eq!(
+            text.lines,
+            vec![
+                Line::from(Span::styled("The first line", Style::reset())),
+                Line::from(Span::styled("The second line", Style::reset()))
+            ]
+        );
+    }
+
+    #[test]
+    fn from_string() {
+        let text = Text::from(String::from("The first line\nThe second line"));
+        assert_eq!(
+            text.lines,
+            vec![Line::from("The first line"), Line::from("The second line")]
+        );
+    }
+
+    #[test]
+    fn from_str() {
+        let text = Text::from("The first line\nThe second line");
+        assert_eq!(
+            text.lines,
+            vec![Line::from("The first line"), Line::from("The second line")]
+        );
+    }
+
+    #[test]
+    fn from_cow() {
+        let text = Text::from(Cow::Borrowed("The first line\nThe second line"));
+        assert_eq!(
+            text.lines,
+            vec![Line::from("The first line"), Line::from("The second line")]
+        );
+    }
+
+    #[test]
+    fn from_span() {
+        let style = Style::new().yellow().italic();
+        let text = Text::from(Span::styled("The first line\nThe second line", style));
+        assert_eq!(
+            text.lines,
+            vec![Line::from(Span::styled(
+                "The first line\nThe second line",
+                style
+            ))]
+        );
+    }
+
+    #[test]
+    fn from_line() {
+        let text = Text::from(Line::from("The first line"));
+        assert_eq!(text.lines, vec![Line::from("The first line")]);
+    }
+
+    #[test]
+    fn from_vec_line() {
+        let text = Text::from(vec![
+            Line::from("The first line"),
+            Line::from("The second line"),
+        ]);
+        assert_eq!(
+            text.lines,
+            vec![Line::from("The first line"), Line::from("The second line")]
+        );
+    }
+
+    #[test]
+    fn into_iter() {
+        let text = Text::from("The first line\nThe second line");
+        let mut iter = text.into_iter();
+        assert_eq!(iter.next(), Some(Line::from("The first line")));
+        assert_eq!(iter.next(), Some(Line::from("The second line")));
+        assert_eq!(iter.next(), None);
+    }
+
+    #[test]
+    fn extend() {
+        let mut text = Text::from("The first line\nThe second line");
+        text.extend(vec![
+            Line::from("The third line"),
+            Line::from("The fourth line"),
+        ]);
+        assert_eq!(
+            text.lines,
+            vec![
+                Line::from("The first line"),
+                Line::from("The second line"),
+                Line::from("The third line"),
+                Line::from("The fourth line"),
+            ]
+        );
+    }
+
+    #[test]
+    fn extend_from_iter() {
+        let mut text = Text::from("The first line\nThe second line");
+        text.extend(vec![
+            Line::from("The third line"),
+            Line::from("The fourth line"),
+        ]);
+        assert_eq!(
+            text.lines,
+            vec![
+                Line::from("The first line"),
+                Line::from("The second line"),
+                Line::from("The third line"),
+                Line::from("The fourth line"),
+            ]
+        );
+    }
+
+    #[test]
+    fn extend_from_iter_str() {
+        let mut text = Text::from("The first line\nThe second line");
+        text.extend(vec!["The third line", "The fourth line"]);
+        assert_eq!(
+            text.lines,
+            vec![
+                Line::from("The first line"),
+                Line::from("The second line"),
+                Line::from("The third line"),
+                Line::from("The fourth line"),
+            ]
+        );
+    }
+}

src/title.rs

@@ -1,23 +1,93 @@
+//! This module holds the [`Title`] element and its related configuration types.
+//! A title is a piece of [`Block`](crate::widgets::Block) configuration.
+
+use strum::{Display, EnumString};
+
 use crate::{layout::Alignment, text::Line};
 
-#[derive(Debug, Default, Clone, Eq, PartialEq)]
+/// A [`Block`](crate::widgets::Block) title.
+///
+/// It can be aligned (see [`Alignment`]) and positioned (see [`Position`]).
+///
+/// # Example
+///
+/// Title with no style.
+/// ```
+/// use ratatui::widgets::block::Title;
+///
+/// Title::from("Title");
+/// ```
+///
+/// Blue title on a white background (via [`Stylize`](crate::style::Stylize) trait).
+/// ```
+/// use ratatui::{prelude::*, widgets::block::*};
+///
+/// Title::from("Title".blue().on_white());
+/// ```
+///
+/// Title with multiple styles (see [`Line`] and [`Stylize`](crate::style::Stylize)).
+/// ```
+/// use ratatui::{prelude::*, widgets::block::*};
+///
+/// Title::from(
+///     Line::from(vec!["Q".white().underlined(), "uit".gray()])
+/// );
+/// ```
+///
+/// Complete example
+/// ```
+/// use ratatui::{prelude::*, widgets::{*, block::*}};
+///
+/// Title::from("Title")
+///     .position(Position::Top)
+///     .alignment(Alignment::Right);
+/// ```
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct Title<'a> {
+    /// Title content
     pub content: Line<'a>,
-    /// Defaults to Left if unset
+    /// Title alignment
+    ///
+    /// If [`None`], defaults to the alignment defined with
+    /// [`Block::title_alignment`](crate::widgets::Block::title_alignment) in the associated
+    /// [`Block`](crate::widgets::Block).
     pub alignment: Option<Alignment>,
 
-    /// Defaults to Top if unset
+    /// Title position
+    ///
+    /// If [`None`], defaults to the position defined with
+    /// [`Block::title_position`](crate::widgets::Block::title_position) in the associated
+    /// [`Block`](crate::widgets::Block).
     pub position: Option<Position>,
 }
 
-#[derive(Debug, Default, Clone, Copy, PartialEq, Eq, Hash)]
+/// Defines the [title](crate::widgets::block::Title) position.
+///
+/// The title can be positioned on top or at the bottom of the block.
+/// Defaults to [`Position::Top`].
+///
+/// # Example
+///
+/// ```
+/// use ratatui::widgets::{*, block::*};
+///
+/// Block::new().title(
+///     Title::from("title").position(Position::Bottom)
+/// );
+/// ```
+#[derive(Debug, Default, Display, EnumString, Clone, Copy, PartialEq, Eq, Hash)]
 pub enum Position {
+    /// Position the title at the top of the block.
+    ///
+    /// This is the default.
     #[default]
     Top,
+    /// Position the title at the bottom of the block.
     Bottom,
 }
 
 impl<'a> Title<'a> {
+    /// Builder pattern method for setting the title content.
     pub fn content<T>(mut self, content: T) -> Title<'a>
     where
         T: Into<Line<'a>>,
@@ -26,11 +96,13 @@ impl<'a> Title<'a> {
         self
     }
 
+    /// Builder pattern method for setting the title alignment.
     pub fn alignment(mut self, alignment: Alignment) -> Title<'a> {
         self.alignment = Some(alignment);
         self
     }
 
+    /// Builder pattern method for setting the title position.
     pub fn position(mut self, position: Position) -> Title<'a> {
         self.position = Some(position);
         self
@@ -45,3 +117,23 @@ where
         Self::default().content(value.into())
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use strum::ParseError;
+
+    use super::*;
+
+    #[test]
+    fn position_tostring() {
+        assert_eq!(Position::Top.to_string(), "Top");
+        assert_eq!(Position::Bottom.to_string(), "Bottom");
+    }
+
+    #[test]
+    fn position_from_str() {
+        assert_eq!("Top".parse::<Position>(), Ok(Position::Top));
+        assert_eq!("Bottom".parse::<Position>(), Ok(Position::Bottom));
+        assert_eq!("".parse::<Position>(), Err(ParseError::VariantNotFound));
+    }
+}

src/widgets.rs

@@ -4,18 +4,22 @@
 //! meant to be stored but used as *commands* to draw common figures in the UI.
 //!
 //! The available widgets are:
-//! - [`Block`]
-//! - [`Tabs`]
-//! - [`List`]
-//! - [`Table`]
-//! - [`Paragraph`]
-//! - [`Chart`]
-//! - [`BarChart`]
-//! - [`Gauge`]
-//! - [`Sparkline`]
-//! - [`calendar::Monthly`]
-//! - [`Clear`]
-
+//! - [`Block`]: a basic widget that draws a block with optional borders, titles and styles.
+//! - [`BarChart`]: displays multiple datasets as bars with optional grouping.
+//! - [`calendar::Monthly`]: displays a single month.
+//! - [`Canvas`]: draws arbitrary shapes using drawing characters.
+//! - [`Chart`]: displays multiple datasets as a lines or scatter graph.
+//! - [`Clear`]: clears the area it occupies. Useful to render over previously drawn widgets.
+//! - [`Gauge`]: displays progress percentage using block characters.
+//! - [`LineGauge`]: display progress as a line.
+//! - [`List`]: displays a list of items and allows selection.
+//! - [`Paragraph`]: displays a paragraph of optionally styled and wrapped text.
+//! - [`Scrollbar`]: displays a scrollbar.
+//! - [`Sparkline`]: display a single data set as a sparkline.
+//! - [`Table`]: displays multiple rows and columns in a grid and allows selection.
+//! - [`Tabs`]: displays a tab bar and allows selection.
+//!
+//! [`Canvas`]: crate::widgets::canvas::Canvas
 mod barchart;
 pub mod block;
 #[cfg(feature = "widget-calendar")]
@@ -46,14 +50,14 @@ pub use self::{
     paragraph::{Paragraph, Wrap},
     scrollbar::{ScrollDirection, Scrollbar, ScrollbarOrientation, ScrollbarState},
     sparkline::{RenderDirection, Sparkline},
-    table::{Cell, Row, Table, TableState},
+    table::{Cell, HighlightSpacing, Row, Table, TableState},
     tabs::Tabs,
 };
 use crate::{buffer::Buffer, layout::Rect};
 
 bitflags! {
     /// Bitflags that can be composed to set the visible borders essentially on the block widget.
-    #[derive(Default, Clone, Copy, PartialEq, Eq)]
+    #[derive(Default, Clone, Copy, Eq, PartialEq, Hash)]
     pub struct Borders: u8 {
         /// Show no border (default)
         const NONE   = 0b0000;
@@ -125,10 +129,8 @@ pub trait Widget {
 /// ## Examples
 ///
 /// ```rust,no_run
-/// # use std::io;
-/// # use ratatui::Terminal;
-/// # use ratatui::backend::{Backend, TestBackend};
-/// # use ratatui::widgets::{Widget, List, ListItem, ListState};
+/// use std::io;
+/// use ratatui::{backend::TestBackend, prelude::*, widgets::*};
 ///
 /// // Let's say we have some events to display.
 /// struct Events {
@@ -230,9 +232,7 @@ pub trait StatefulWidget {
 /// ## Examples
 ///
 ///```
-/// # use ratatui::widgets::{Block, Borders};
-/// # use ratatui::style::{Style, Color};
-/// # use ratatui::border;
+/// use ratatui::{border, prelude::*, widgets::*};
 ///
 /// Block::default()
 ///     //Construct a `Borders` object and use it in place

src/widgets/barchart.rs

@@ -1,3 +1,4 @@
+#![warn(missing_docs)]
 use crate::prelude::*;
 
 mod bar;
@@ -8,14 +9,41 @@ pub use bar_group::BarGroup;
 
 use super::{Block, Widget};
 
-/// Display multiple bars in a single widgets
+/// A chart showing values as [bars](Bar).
+///
+/// Here is a possible `BarChart` output.
+/// ```plain
+/// ┌─────────────────────────────────┐
+/// │                             ████│
+/// │                        ▅▅▅▅ ████│
+/// │            ▇▇▇▇        ████ ████│
+/// │     ▄▄▄▄   ████ ████   ████ ████│
+/// │▆10▆ █20█   █50█ █40█   █60█ █90█│
+/// │ B1   B2     B1   B2     B1   B2 │
+/// │ Group1      Group2      Group3  │
+/// └─────────────────────────────────┘
+/// ```
+///
+/// A `BarChart` is composed of a set of [`Bar`] which can be set via [`BarChart::data`].
+/// Bars can be styled globally ([`BarChart::bar_style`]) or individually ([`Bar::style`]).
+/// There are other methods available to style even more precisely. See [`Bar`] to find out about
+/// each bar component.
+///
+/// The `BarChart` widget can also show groups of bars via [`BarGroup`].
+/// A [`BarGroup`] is a set of [`Bar`], multiple can be added to a `BarChart` using
+/// [`BarChart::data`] multiple time as demonstrated in the example below.
+///
+/// The chart can have a [`Direction`] (by default the bars are [`Vertical`](Direction::Vertical)).
+/// This is set using [`BarChart::direction`].
 ///
 /// # Examples
-/// The following example creates a BarChart with two groups of bars.
-/// The first group is added by an array slice (&[(&str, u64)]).
-/// The second group is added by a slice of Groups (&[BarGroup]).
+///
+/// The following example creates a `BarChart` with two groups of bars.  
+/// The first group is added by an array slice (`&[(&str, u64)]`).  
+/// The second group is added by a [`BarGroup`] instance.
 /// ```
-/// # use ratatui::{prelude::*, widgets::*};
+/// use ratatui::{prelude::*, widgets::*};
+///
 /// BarChart::default()
 ///     .block(Block::default().title("BarChart").borders(Borders::ALL))
 ///     .bar_width(3)
@@ -28,7 +56,7 @@ use super::{Block, Widget};
 ///     .data(BarGroup::default().bars(&[Bar::default().value(10), Bar::default().value(20)]))
 ///     .max(4);
 /// ```
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Eq, PartialEq, Hash)]
 pub struct BarChart<'a> {
     /// Block to wrap the widget in
     block: Option<Block<'a>>,
@@ -53,6 +81,8 @@ pub struct BarChart<'a> {
     /// Value necessary for a bar to reach the maximum height (if no value is specified,
     /// the maximum value in the data is taken as reference)
     max: Option<u64>,
+    /// direction of the bars
+    direction: Direction,
 }
 
 impl<'a> Default for BarChart<'a> {
@@ -69,22 +99,24 @@ impl<'a> Default for BarChart<'a> {
             group_gap: 0,
             bar_set: symbols::bar::NINE_LEVELS,
             style: Style::default(),
+            direction: Direction::Vertical,
         }
     }
 }
 
 impl<'a> BarChart<'a> {
     /// Add group of bars to the BarChart
+    ///
     /// # Examples
-    /// The following example creates a BarChart with two groups of bars.
-    /// The first group is added by an array slice (&[(&str, u64)]).
-    /// The second group is added by a BarGroup instance.
+    ///
+    /// The following example creates a BarChart with two groups of bars.  
+    /// The first group is added by an array slice (`&[(&str, u64)]`).
+    /// The second group is added by a [`BarGroup`] instance.
     /// ```
     /// # use ratatui::{prelude::*, widgets::*};
-    ///
     /// BarChart::default()
-    ///        .data(&[("B0", 0), ("B1", 2), ("B2", 4), ("B3", 3)])
-    ///        .data(BarGroup::default().bars(&[Bar::default().value(10), Bar::default().value(20)]));
+    ///     .data(&[("B0", 0), ("B1", 2), ("B2", 4), ("B3", 3)])
+    ///     .data(BarGroup::default().bars(&[Bar::default().value(10), Bar::default().value(20)]));
     /// ```
     pub fn data(mut self, data: impl Into<BarGroup<'a>>) -> BarChart<'a> {
         let group: BarGroup = data.into();
@@ -94,55 +126,161 @@ impl<'a> BarChart<'a> {
         self
     }
 
+    /// Surround the [`BarChart`] with a [`Block`].
     pub fn block(mut self, block: Block<'a>) -> BarChart<'a> {
         self.block = Some(block);
         self
     }
 
+    /// Set the value necessary for a [`Bar`] to reach the maximum height.
+    ///
+    /// If not set, the maximum value in the data is taken as reference.
+    ///
+    /// # Examples
+    ///
+    /// This example shows the default behavior when `max` is not set.
+    /// The maximum value in the dataset is taken (here, `100`).
+    /// ```
+    /// # use ratatui::{prelude::*, widgets::*};
+    /// BarChart::default().data(&[("foo", 1), ("bar", 2), ("baz", 100)]);
+    /// // Renders
+    /// //     █
+    /// //     █
+    /// // f b b
+    /// ```
+    ///
+    /// This example shows a custom max value.
+    /// The maximum height being `2`, `bar` & `baz` render as the max.
+    /// ```
+    /// # use ratatui::{prelude::*, widgets::*};
+    /// BarChart::default()
+    ///     .data(&[("foo", 1), ("bar", 2), ("baz", 100)])
+    ///     .max(2);
+    /// // Renders
+    /// //   █ █
+    /// // █ █ █
+    /// // f b b
+    /// ```
     pub fn max(mut self, max: u64) -> BarChart<'a> {
         self.max = Some(max);
         self
     }
 
+    /// Set the default style of the bar.
+    ///
+    /// It is also possible to set individually the style of each [`Bar`].
+    /// In this case the default style will be patched by the individual style
     pub fn bar_style(mut self, style: Style) -> BarChart<'a> {
         self.bar_style = style;
         self
     }
 
+    /// Set the width of the displayed bars.
+    ///
+    /// For [`Horizontal`](crate::layout::Direction::Horizontal) bars this becomes the height of
+    /// the bar.
+    ///
+    /// If not set, this defaults to `1`.  
+    /// The bar label also uses this value as its width.
     pub fn bar_width(mut self, width: u16) -> BarChart<'a> {
         self.bar_width = width;
         self
     }
 
+    /// Set the gap between each bar.
+    ///
+    /// If not set, this defaults to `1`.  
+    /// The bar label will never be larger than the bar itself, even if the gap is sufficient.
+    ///
+    /// # Example
+    ///
+    /// This shows two bars with a gap of `3`. Notice the labels will always stay under the bar.
+    /// ```
+    /// # use ratatui::{prelude::*, widgets::*};
+    /// BarChart::default()
+    ///     .data(&[("foo", 1), ("bar", 2)])
+    ///     .bar_gap(3);
+    /// // Renders
+    /// //     █
+    /// // █   █
+    /// // f   b
+    /// ```
     pub fn bar_gap(mut self, gap: u16) -> BarChart<'a> {
         self.bar_gap = gap;
         self
     }
 
+    /// The [`bar::Set`](crate::symbols::bar::Set) to use for displaying the bars.
+    ///
+    /// If not set, the default is [`bar::NINE_LEVELS`](crate::symbols::bar::NINE_LEVELS).
     pub fn bar_set(mut self, bar_set: symbols::bar::Set) -> BarChart<'a> {
         self.bar_set = bar_set;
         self
     }
 
+    /// Set the default value style of the bar.
+    ///
+    /// It is also possible to set individually the value style of each [`Bar`].
+    /// In this case the default value style will be patched by the individual value style
+    ///
+    /// # See also
+    ///
+    /// [Bar::value_style] to set the value style individually.
     pub fn value_style(mut self, style: Style) -> BarChart<'a> {
         self.value_style = style;
         self
     }
 
+    /// Set the default label style of the groups and bars.
+    ///
+    /// It is also possible to set individually the label style of each [`Bar`] or [`BarGroup`].
+    /// In this case the default label style will be patched by the individual label style
+    ///
+    /// # See also
+    ///
+    /// [Bar::label] to set the label style individually.
     pub fn label_style(mut self, style: Style) -> BarChart<'a> {
         self.label_style = style;
         self
     }
 
+    /// Set the gap between [`BarGroup`].
     pub fn group_gap(mut self, gap: u16) -> BarChart<'a> {
         self.group_gap = gap;
         self
     }
 
+    /// Set the style of the entire chart.
+    ///
+    /// The style will be applied to everything that isn't styled (borders, bars, labels, ...).
     pub fn style(mut self, style: Style) -> BarChart<'a> {
         self.style = style;
         self
     }
+
+    /// Set the direction of the bars.
+    ///
+    /// [`Vertical`](crate::layout::Direction::Vertical) bars are the default.
+    ///
+    /// # Examples
+    ///
+    /// Vertical bars
+    /// ```plain
+    ///   █
+    /// █ █
+    /// f b
+    /// ```
+    ///
+    /// Horizontal bars
+    /// ```plain
+    /// █foo██
+    ///
+    /// █bar██
+    /// ```
+    pub fn direction(mut self, direction: Direction) -> BarChart<'a> {
+        self.direction = direction;
+        self
+    }
 }
 
 impl<'a> BarChart<'a> {
@@ -196,7 +334,98 @@ impl<'a> BarChart<'a> {
         }
     }
 
-    fn render_bars(&self, buf: &mut Buffer, bars_area: Rect, max: u64) {
+    fn render_horizontal_bars(self, buf: &mut Buffer, bars_area: Rect, max: u64) {
+        // get the longest label
+        let label_size = self
+            .data
+            .iter()
+            .flat_map(|group| group.bars.iter().map(|bar| &bar.label))
+            .flatten() // bar.label is an Option<Line>
+            .map(|label| label.width())
+            .max()
+            .unwrap_or(0) as u16;
+
+        let label_x = bars_area.x;
+        let bars_area = {
+            let margin = if label_size == 0 { 0 } else { 1 };
+            Rect {
+                x: bars_area.x + label_size + margin,
+                width: bars_area.width - label_size - margin,
+                ..bars_area
+            }
+        };
+
+        // convert the bar values to ratatui::symbols::bar::Set
+        let groups: Vec<Vec<u16>> = self
+            .data
+            .iter()
+            .map(|group| {
+                group
+                    .bars
+                    .iter()
+                    .map(|bar| (bar.value * u64::from(bars_area.width) / max) as u16)
+                    .collect()
+            })
+            .collect();
+
+        // print all visible bars, label and values
+        let mut bar_y = bars_area.top();
+        for (group_data, mut group) in groups.into_iter().zip(self.data) {
+            let bars = std::mem::take(&mut group.bars);
+
+            for (bar_length, bar) in group_data.into_iter().zip(bars) {
+                let bar_style = self.bar_style.patch(bar.style);
+
+                for y in 0..self.bar_width {
+                    let bar_y = bar_y + y;
+                    for x in 0..bars_area.width {
+                        let symbol = if x < bar_length {
+                            self.bar_set.full
+                        } else {
+                            self.bar_set.empty
+                        };
+                        buf.get_mut(bars_area.left() + x, bar_y)
+                            .set_symbol(symbol)
+                            .set_style(bar_style);
+                    }
+                }
+
+                let bar_value_area = Rect {
+                    y: bar_y + (self.bar_width >> 1),
+                    ..bars_area
+                };
+
+                // label
+                if let Some(label) = &bar.label {
+                    buf.set_line(label_x, bar_value_area.top(), label, label_size);
+                }
+
+                bar.render_value_with_different_styles(
+                    buf,
+                    bar_value_area,
+                    bar_length as usize,
+                    self.value_style,
+                    self.bar_style,
+                );
+
+                bar_y += self.bar_gap + self.bar_width;
+            }
+
+            // if group_gap is zero, then there is no place to print the group label
+            // check also if the group label is still inside the visible area
+            let label_y = bar_y - self.bar_gap;
+            if self.group_gap > 0 && label_y < bars_area.bottom() {
+                let label_rect = Rect {
+                    y: label_y,
+                    ..bars_area
+                };
+                group.render_label(buf, label_rect, self.label_style);
+                bar_y += self.group_gap;
+            }
+        }
+    }
+
+    fn render_vertical_bars(&self, buf: &mut Buffer, bars_area: Rect, max: u64) {
         // convert the bar values to ratatui::symbols::bar::Set
         let mut groups: Vec<Vec<u64>> = self
             .data
@@ -227,7 +456,7 @@ impl<'a> BarChart<'a> {
                         _ => self.bar_set.full,
                     };
 
-                    let bar_style = bar.style.patch(self.bar_style);
+                    let bar_style = self.bar_style.patch(bar.style);
 
                     for x in 0..self.bar_width {
                         buf.get_mut(bar_x + x, bars_area.top() + j)
@@ -264,23 +493,24 @@ impl<'a> BarChart<'a> {
         // print labels and values in one go
         let mut bar_x = area.left();
         let bar_y = area.bottom() - label_height - 1;
-        for group in self.data.into_iter() {
-            // print group labels under the bars or the previous labels
-            if let Some(mut label) = group.label {
-                label.patch_style(self.label_style);
-                let label_max_width = group.bars.len() as u16 * self.bar_width
-                    + (group.bars.len() as u16 - 1) * self.bar_gap;
-
-                buf.set_line(
-                    bar_x + (label_max_width.saturating_sub(label.width() as u16) >> 1),
-                    area.bottom() - 1,
-                    &label,
-                    label_max_width,
-                );
+        for mut group in self.data.into_iter() {
+            if group.bars.is_empty() {
+                continue;
             }
+            let bars = std::mem::take(&mut group.bars);
+            // print group labels under the bars or the previous labels
+            let label_max_width =
+                bars.len() as u16 * (self.bar_width + self.bar_gap) - self.bar_gap;
+            let group_area = Rect {
+                x: bar_x,
+                y: area.bottom() - 1,
+                width: label_max_width,
+                height: 1,
+            };
+            group.render_label(buf, group_area, self.label_style);
 
             // print the bar values and numbers
-            for bar in group.bars.into_iter() {
+            for bar in bars.into_iter() {
                 bar.render_label_and_value(
                     buf,
                     self.bar_width,
@@ -302,10 +532,15 @@ impl<'a> Widget for BarChart<'a> {
         buf.set_style(area, self.style);
 
         self.render_block(&mut area, buf);
-
+        if area.area() == 0 {
+            return;
+        }
         if self.data.is_empty() {
             return;
         }
+        if self.bar_width == 0 {
+            return;
+        }
 
         let label_height = self.label_height();
         if area.height <= label_height {
@@ -314,16 +549,23 @@ impl<'a> Widget for BarChart<'a> {
 
         let max = self.maximum_data_value();
 
-        // remove invisible groups and bars, since we don't need to print them
-        self.remove_invisible_groups_and_bars(area.width);
-
-        let bars_area = Rect {
-            height: area.height - label_height,
-            ..area
-        };
-        self.render_bars(buf, bars_area, max);
-
-        self.render_labels_and_values(area, buf, label_height);
+        match self.direction {
+            Direction::Horizontal => {
+                // remove invisible groups and bars, since we don't need to print them
+                self.remove_invisible_groups_and_bars(area.height);
+                self.render_horizontal_bars(buf, area, max);
+            }
+            Direction::Vertical => {
+                // remove invisible groups and bars, since we don't need to print them
+                self.remove_invisible_groups_and_bars(area.width);
+                let bars_area = Rect {
+                    height: area.height - label_height,
+                    ..area
+                };
+                self.render_vertical_bars(buf, bars_area, max);
+                self.render_labels_and_values(area, buf, label_height);
+            }
+        }
     }
 }
 
@@ -614,7 +856,7 @@ mod tests {
         let expected = Buffer::with_lines(vec![
             "█   █     █       █  ",
             "█ █ █   █ █ █   █ █ █",
-            " G1      G2      G3  ",
+            "G1      G2      G3   ",
         ]);
 
         assert_buffer_eq!(buffer, expected);
@@ -637,7 +879,7 @@ mod tests {
         let expected = Buffer::with_lines(vec![
             "█   █     █      ",
             "█ █ █   █ █ █   █",
-            " G1      G2     G",
+            "G1      G2      G",
         ]);
         assert_buffer_eq!(buffer, expected);
     }
@@ -659,7 +901,7 @@ mod tests {
         let expected = Buffer::with_lines(vec![
             "█   █     █     ",
             "█ █ █   █ █ █   ",
-            " G1      G2     ",
+            "G1      G2      ",
         ]);
         assert_buffer_eq!(buffer, expected);
     }
@@ -753,7 +995,247 @@ mod tests {
 
         let mut buffer = Buffer::empty(Rect::new(0, 0, 3, 3));
         chart.render(buffer.area, &mut buffer);
-        let expected = Buffer::with_lines(vec!["  █", "█ █", " G "]);
+        let expected = Buffer::with_lines(vec!["  █", "█ █", "G  "]);
         assert_buffer_eq!(buffer, expected);
     }
+
+    fn build_test_barchart<'a>() -> BarChart<'a> {
+        BarChart::default()
+            .data(BarGroup::default().label("G1".into()).bars(&[
+                Bar::default().value(2),
+                Bar::default().value(3),
+                Bar::default().value(4),
+            ]))
+            .data(BarGroup::default().label("G2".into()).bars(&[
+                Bar::default().value(3),
+                Bar::default().value(4),
+                Bar::default().value(5),
+            ]))
+            .group_gap(1)
+            .direction(Direction::Horizontal)
+            .bar_gap(0)
+    }
+
+    #[test]
+    fn test_horizontal_bars() {
+        let chart: BarChart<'_> = build_test_barchart();
+
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 5, 8));
+        chart.render(buffer.area, &mut buffer);
+        let expected = Buffer::with_lines(vec![
+            "2█   ",
+            "3██  ",
+            "4███ ",
+            "G1   ",
+            "3██  ",
+            "4███ ",
+            "5████",
+            "G2   ",
+        ]);
+
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn test_horizontal_bars_no_space_for_group_label() {
+        let chart: BarChart<'_> = build_test_barchart();
+
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 5, 7));
+        chart.render(buffer.area, &mut buffer);
+        let expected = Buffer::with_lines(vec![
+            "2█   ",
+            "3██  ",
+            "4███ ",
+            "G1   ",
+            "3██  ",
+            "4███ ",
+            "5████",
+        ]);
+
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn test_horizontal_bars_no_space_for_all_bars() {
+        let chart: BarChart<'_> = build_test_barchart();
+
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 5, 5));
+        chart.render(buffer.area, &mut buffer);
+        let expected = Buffer::with_lines(vec!["2█   ", "3██  ", "4███ ", "G1   ", "3██  "]);
+
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    fn test_horizontal_bars_label_width_greater_than_bar(bar_color: Option<Color>) {
+        let mut bar = Bar::default()
+            .value(2)
+            .text_value("label".into())
+            .value_style(Style::default().red());
+
+        if let Some(color) = bar_color {
+            bar = bar.style(Style::default().fg(color));
+        }
+
+        let chart: BarChart<'_> = BarChart::default()
+            .data(BarGroup::default().bars(&[bar, Bar::default().value(5)]))
+            .direction(Direction::Horizontal)
+            .bar_style(Style::default().yellow())
+            .value_style(Style::default().italic())
+            .bar_gap(0);
+
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 5, 2));
+        chart.render(buffer.area, &mut buffer);
+
+        let mut expected = Buffer::with_lines(vec!["label", "5████"]);
+
+        // first line has a yellow foreground. first cell contains italic "5"
+        expected.get_mut(0, 1).modifier.insert(Modifier::ITALIC);
+        for x in 0..5 {
+            expected.get_mut(x, 1).set_fg(Color::Yellow);
+        }
+
+        let expected_color = if let Some(color) = bar_color {
+            color
+        } else {
+            Color::Yellow
+        };
+
+        // second line contains the word "label". Since the bar value is 2,
+        // then the first 2 characters of "label" are italic red.
+        // the rest is white (using the Bar's style).
+        let cell = expected.get_mut(0, 0).set_fg(Color::Red);
+        cell.modifier.insert(Modifier::ITALIC);
+        let cell = expected.get_mut(1, 0).set_fg(Color::Red);
+        cell.modifier.insert(Modifier::ITALIC);
+        expected.get_mut(2, 0).set_fg(expected_color);
+        expected.get_mut(3, 0).set_fg(expected_color);
+        expected.get_mut(4, 0).set_fg(expected_color);
+
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn test_horizontal_bars_label_width_greater_than_bar_without_style() {
+        test_horizontal_bars_label_width_greater_than_bar(None);
+    }
+
+    #[test]
+    fn test_horizontal_bars_label_width_greater_than_bar_with_style() {
+        test_horizontal_bars_label_width_greater_than_bar(Some(Color::White))
+    }
+
+    /// Tests horizontal bars label are presents
+    #[test]
+    fn test_horizontal_label() {
+        let chart = BarChart::default()
+            .direction(Direction::Horizontal)
+            .bar_gap(0)
+            .data(&[("Jan", 10), ("Feb", 20), ("Mar", 5)]);
+
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 10, 3));
+        chart.render(buffer.area, &mut buffer);
+        let expected = Buffer::with_lines(vec!["Jan 10█   ", "Feb 20████", "Mar 5     "]);
+
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn test_group_label_style() {
+        let chart: BarChart<'_> = BarChart::default()
+            .data(
+                BarGroup::default()
+                    .label(Span::from("G1").red().into())
+                    .bars(&[Bar::default().value(2)]),
+            )
+            .group_gap(1)
+            .direction(Direction::Horizontal)
+            .label_style(Style::default().bold().yellow());
+
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 5, 2));
+        chart.render(buffer.area, &mut buffer);
+
+        // G1 should have the bold red style
+        // bold: because of BarChart::label_style
+        // red: is included with the label itself
+        let mut expected = Buffer::with_lines(vec!["2████", "G1   "]);
+        let cell = expected.get_mut(0, 1).set_fg(Color::Red);
+        cell.modifier.insert(Modifier::BOLD);
+        let cell = expected.get_mut(1, 1).set_fg(Color::Red);
+        cell.modifier.insert(Modifier::BOLD);
+
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn test_group_label_center() {
+        let chart: BarChart<'_> = BarChart::default().data(
+            BarGroup::default()
+                .label(Line::from(Span::from("G")).alignment(Alignment::Center))
+                .bars(&[Bar::default().value(2), Bar::default().value(5)]),
+        );
+
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 3, 3));
+        chart.render(buffer.area, &mut buffer);
+
+        let expected = Buffer::with_lines(vec!["  █", "▆ █", " G "]);
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn test_group_label_right() {
+        let chart: BarChart<'_> = BarChart::default().data(
+            BarGroup::default()
+                .label(Line::from(Span::from("G")).alignment(Alignment::Right))
+                .bars(&[Bar::default().value(2), Bar::default().value(5)]),
+        );
+
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 3, 3));
+        chart.render(buffer.area, &mut buffer);
+
+        let expected = Buffer::with_lines(vec!["  █", "▆ █", "  G"]);
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn test_unicode_as_value() {
+        let group = BarGroup::default().bars(&[
+            Bar::default()
+                .value(123)
+                .label("B1".into())
+                .text_value("写".into()),
+            Bar::default()
+                .value(321)
+                .label("B2".into())
+                .text_value("写".into()),
+            Bar::default()
+                .value(333)
+                .label("B2".into())
+                .text_value("写".into()),
+        ]);
+        let chart = BarChart::default().data(group).bar_width(3).bar_gap(1);
+
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 11, 5));
+        chart.render(buffer.area, &mut buffer);
+
+        let expected = Buffer::with_lines(vec![
+            "    ▆▆▆ ███",
+            "    ███ ███",
+            "▃▃▃ ███ ███",
+            "写█ 写█ 写█",
+            "B1  B2  B2 ",
+        ]);
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn handles_zero_width() {
+        // this test is to ensure that a BarChart with zero bar / gap width does not panic
+        let chart = BarChart::default()
+            .data(&[("A", 1)])
+            .bar_width(0)
+            .bar_gap(0);
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 0, 10));
+        chart.render(buffer.area, &mut buffer);
+        assert_buffer_eq!(buffer, Buffer::empty(Rect::new(0, 0, 0, 10)));
+    }
 }

src/widgets/barchart/bar.rs

@@ -1,13 +1,24 @@
-use crate::{buffer::Buffer, style::Style, text::Line};
+use unicode_width::UnicodeWidthStr;
 
-/// represent a bar to be shown by the Barchart
-///
-/// # Examples
-/// the following example creates a bar with the label "Bar 1", a value "10",
-/// red background and a white value foreground
+use crate::{buffer::Buffer, prelude::Rect, style::Style, text::Line};
+
+/// A bar to be shown by the [`BarChart`](crate::widgets::BarChart) widget.
 ///
+/// Here is an explanation of a `Bar`'s components.
+/// ```plain
+/// ███                          ┐
+/// █2█  <- text_value or value  │ bar
+/// foo  <- label                ┘
 /// ```
-/// # use ratatui::{prelude::*, widgets::*};
+/// Note that every element can be styled individually.
+///
+/// # Example
+///
+/// The following example creates a bar with the label "Bar 1", a value "10",
+/// red background and a white value foreground.
+/// ```
+/// use ratatui::{prelude::*, widgets::*};
+///
 /// Bar::default()
 ///     .label("Bar 1".into())
 ///     .value(10)
@@ -15,7 +26,7 @@ use crate::{buffer::Buffer, style::Style, text::Line};
 ///     .value_style(Style::default().bg(Color::Red).fg(Color::White))
 ///     .text_value("10°C".to_string());
 /// ```
-#[derive(Debug, Default, Clone)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct Bar<'a> {
     /// Value to display on the bar (computed when the data is passed to the widget)
     pub(super) value: u64,
@@ -30,32 +41,104 @@ pub struct Bar<'a> {
 }
 
 impl<'a> Bar<'a> {
+    /// Set the value of this bar.
+    ///
+    /// The value will be displayed inside the bar.
+    ///
+    /// # See also
+    ///
+    /// [`Bar::value_style`] to style the value.  
+    /// [`Bar::text_value`] to set the displayed value.
     pub fn value(mut self, value: u64) -> Bar<'a> {
         self.value = value;
         self
     }
 
+    /// Set the label of the bar.
+    ///
+    /// For [`Vertical`](crate::layout::Direction::Vertical) bars,
+    /// display the label **under** the bar.  
+    /// For [`Horizontal`](crate::layout::Direction::Horizontal) bars,
+    /// display the label **in** the bar.  
+    /// See [`BarChart::direction`](crate::widgets::BarChart::direction) to set the direction.
     pub fn label(mut self, label: Line<'a>) -> Bar<'a> {
         self.label = Some(label);
         self
     }
 
+    /// Set the style of the bar.
+    ///
+    /// This will apply to every non-styled element.
+    /// It can be seen and used as a default value.
     pub fn style(mut self, style: Style) -> Bar<'a> {
         self.style = style;
         self
     }
 
+    /// Set the style of the value.
+    ///
+    /// # See also
+    ///
+    /// [`Bar::value`] to set the value.
     pub fn value_style(mut self, style: Style) -> Bar<'a> {
         self.value_style = style;
         self
     }
 
-    /// set the text value printed in the bar. (By default self.value is printed)
+    /// Set the text value printed in the bar.
+    ///
+    /// If `text_value` is not set, then the [ToString] representation of `value` will be shown on
+    /// the bar.
+    ///
+    /// # See also
+    ///
+    /// [`Bar::value`] to set the value.
     pub fn text_value(mut self, text_value: String) -> Bar<'a> {
         self.text_value = Some(text_value);
         self
     }
 
+    /// Render the value of the bar.
+    ///
+    /// [`text_value`](Bar::text_value) is used if set, otherwise the value is converted to string.
+    /// The value is rendered using value_style. If the value width is greater than the
+    /// bar width, then the value is split into 2 parts. the first part is rendered in the bar
+    /// using value_style. The second part is rendered outside the bar using bar_style
+    pub(super) fn render_value_with_different_styles(
+        self,
+        buf: &mut Buffer,
+        area: Rect,
+        bar_length: usize,
+        default_value_style: Style,
+        bar_style: Style,
+    ) {
+        let text = if let Some(text) = self.text_value {
+            text
+        } else {
+            self.value.to_string()
+        };
+
+        if !text.is_empty() {
+            let style = default_value_style.patch(self.value_style);
+            // Since the value may be longer than the bar itself, we need to use 2 different styles
+            // while rendering. Render the first part with the default value style
+            buf.set_stringn(area.x, area.y, &text, bar_length, style);
+            // render the second part with the bar_style
+            if text.len() > bar_length {
+                let (first, second) = text.split_at(bar_length);
+
+                let style = bar_style.patch(self.style);
+                buf.set_stringn(
+                    area.x + first.len() as u16,
+                    area.y,
+                    second,
+                    area.width as usize - first.len(),
+                    style,
+                );
+            }
+        }
+    }
+
     pub(super) fn render_label_and_value(
         self,
         buf: &mut Buffer,
@@ -73,20 +156,24 @@ impl<'a> Bar<'a> {
                 self.value.to_string()
             };
 
-            let width = value_label.len() as u16;
+            let width = value_label.width() as u16;
             if width < max_width {
                 buf.set_string(
                     x + (max_width.saturating_sub(value_label.len() as u16) >> 1),
                     y,
                     value_label,
-                    self.value_style.patch(default_value_style),
+                    default_value_style.patch(self.value_style),
                 );
             }
         }
 
         // render the label
         if let Some(mut label) = self.label {
-            label.patch_style(default_label_style);
+            // patch label styles
+            for span in &mut label.spans {
+                span.style = default_label_style.patch(span.style);
+            }
+
             buf.set_line(
                 x + (max_width.saturating_sub(label.width() as u16) >> 1),
                 y + 1,

src/widgets/barchart/bar_group.rs

@@ -1,16 +1,22 @@
 use super::Bar;
-use crate::text::Line;
+use crate::{
+    prelude::{Alignment, Buffer, Rect},
+    style::Style,
+    text::Line,
+};
 
-/// represent a group of bars to be shown by the Barchart
+/// A group of bars to be shown by the Barchart.
 ///
 /// # Examples
+///
 /// ```
-/// # use ratatui::{prelude::*, widgets::*};
+/// use ratatui::{prelude::*, widgets::*};
+///
 /// BarGroup::default()
 ///     .label("Group 1".into())
 ///     .bars(&[Bar::default().value(200), Bar::default().value(150)]);
 /// ```
-#[derive(Debug, Default, Clone)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct BarGroup<'a> {
     /// label of the group. It will be printed centered under this group of bars
     pub(super) label: Option<Line<'a>>,
@@ -31,10 +37,27 @@ impl<'a> BarGroup<'a> {
         self
     }
 
-    /// return the maximum bar value of this group
+    /// The maximum bar value of this group
     pub(super) fn max(&self) -> Option<u64> {
         self.bars.iter().max_by_key(|v| v.value).map(|v| v.value)
     }
+
+    pub(super) fn render_label(self, buf: &mut Buffer, area: Rect, default_label_style: Style) {
+        if let Some(mut label) = self.label {
+            // patch label styles
+            for span in &mut label.spans {
+                span.style = default_label_style.patch(span.style);
+            }
+
+            let x_offset = match label.alignment {
+                Some(Alignment::Center) => area.width.saturating_sub(label.width() as u16) >> 1,
+                Some(Alignment::Right) => area.width.saturating_sub(label.width() as u16),
+                _ => 0,
+            };
+
+            buf.set_line(area.x + x_offset, area.y, &label, area.width);
+        }
+    }
 }
 
 impl<'a> From<&[(&'a str, u64)]> for BarGroup<'a> {

src/widgets/calendar.rs

@@ -21,7 +21,7 @@ use crate::{
 };
 
 /// Display a month calendar for the month containing `display_date`
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Eq, PartialEq, Hash)]
 pub struct Monthly<'a, S: DateStyler> {
     display_date: Date,
     events: S,
@@ -72,7 +72,7 @@ impl<'a, S: DateStyler> Monthly<'a, S> {
         self
     }
 
-    /// Render the calendar within a [Block](crate::widgets::Block)
+    /// Render the calendar within a [Block]
     pub fn block(mut self, b: Block<'a>) -> Self {
         self.block = Some(b);
         self

src/widgets/canvas.rs

@@ -29,14 +29,14 @@ pub trait Shape {
 }
 
 /// Label to draw some text on the canvas
-#[derive(Debug, Default, Clone)]
+#[derive(Debug, Default, Clone, PartialEq)]
 pub struct Label<'a> {
     x: f64,
     y: f64,
     line: TextLine<'a>,
 }
 
-#[derive(Debug, Default, Clone)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 struct Layer {
     string: String,
     colors: Vec<Color>,
@@ -51,7 +51,7 @@ trait Grid: Debug {
     fn reset(&mut self);
 }
 
-#[derive(Debug, Default, Clone)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 struct BrailleGrid {
     width: u16,
     height: u16,
@@ -114,7 +114,7 @@ impl Grid for BrailleGrid {
     }
 }
 
-#[derive(Debug, Default, Clone)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 struct CharGrid {
     width: u16,
     height: u16,
@@ -187,7 +187,7 @@ impl<'a, 'b> Painter<'a, 'b> {
     ///
     /// # Examples:
     /// ```
-    /// use ratatui::{symbols, widgets::canvas::{Painter, Context}};
+    /// use ratatui::{prelude::*, widgets::canvas::*};
     ///
     /// let mut ctx = Context::new(2, 2, [1.0, 2.0], [0.0, 2.0], symbols::Marker::Braille);
     /// let mut painter = Painter::from(&mut ctx);
@@ -224,7 +224,7 @@ impl<'a, 'b> Painter<'a, 'b> {
     ///
     /// # Examples:
     /// ```
-    /// use ratatui::{style::Color, symbols, widgets::canvas::{Painter, Context}};
+    /// use ratatui::{prelude::*, widgets::canvas::*};
     ///
     /// let mut ctx = Context::new(1, 1, [0.0, 2.0], [0.0, 2.0], symbols::Marker::Braille);
     /// let mut painter = Painter::from(&mut ctx);
@@ -320,15 +320,21 @@ impl<'a> Context<'a> {
     }
 }
 
-/// The Canvas widget may be used to draw more detailed figures using braille patterns (each
-/// cell can have a braille character in 8 different positions).
+/// The Canvas widget provides a means to draw shapes (Lines, Rectangles, Circles, etc.) on a grid.
+///
+/// By default the grid is made of Braille patterns but you may change the marker to use a different
+/// set of symbols. If your terminal or font does not support this unicode block, you will see
+/// unicode replacement characters (<28>) instead of braille dots. The Braille patterns provide a more
+/// fine grained result (2x4 dots) but you might want to use a simple dot, block, or bar instead by
+/// calling the [`marker`] method if your target environment does not support those symbols,
+///
+/// See [Unicode Braille Patterns](https://en.wikipedia.org/wiki/Braille_Patterns) for more info.
+///
 /// # Examples
 ///
 /// ```
-/// # use ratatui::widgets::{Block, Borders};
-/// # use ratatui::layout::Rect;
-/// # use ratatui::widgets::canvas::{Canvas, Shape, Line, Rectangle, Map, MapResolution};
-/// # use ratatui::style::Color;
+/// use ratatui::{style::Color, widgets::{*, canvas::*}};
+///
 /// Canvas::default()
 ///     .block(Block::default().title("Canvas").borders(Borders::ALL))
 ///     .x_bounds([-180.0, 180.0])
@@ -355,7 +361,9 @@ impl<'a> Context<'a> {
 ///         });
 ///     });
 /// ```
-#[derive(Debug, Clone)]
+///
+/// [`marker`]: #method.marker
+#[derive(Debug, Clone, PartialEq)]
 pub struct Canvas<'a, F>
 where
     F: Fn(&mut Context),
@@ -428,12 +436,10 @@ where
     /// # Examples
     ///
     /// ```
-    /// # use ratatui::widgets::canvas::Canvas;
-    /// # use ratatui::symbols;
+    /// use ratatui::{prelude::*, widgets::canvas::*};
+    ///
     /// Canvas::default().marker(symbols::Marker::Braille).paint(|ctx| {});
-    ///
     /// Canvas::default().marker(symbols::Marker::Dot).paint(|ctx| {});
-    ///
     /// Canvas::default().marker(symbols::Marker::Block).paint(|ctx| {});
     /// ```
     pub fn marker(mut self, marker: symbols::Marker) -> Canvas<'a, F> {

src/widgets/canvas/circle.rs

@@ -4,7 +4,7 @@ use crate::{
 };
 
 /// Shape to draw a circle with a given center and radius and with the given color
-#[derive(Debug, Default, Clone)]
+#[derive(Debug, Default, Clone, PartialEq)]
 pub struct Circle {
     pub x: f64,
     pub y: f64,

src/widgets/canvas/line.rs

@@ -4,7 +4,7 @@ use crate::{
 };
 
 /// Shape to draw a line from (x1, y1) to (x2, y2) with the given color
-#[derive(Debug, Default, Clone)]
+#[derive(Debug, Default, Clone, PartialEq)]
 pub struct Line {
     pub x1: f64,
     pub y1: f64,
@@ -13,6 +13,19 @@ pub struct Line {
     pub color: Color,
 }
 
+impl Line {
+    /// Create a new line from (x1, y1) to (x2, y2) with the given color
+    pub fn new(x1: f64, y1: f64, x2: f64, y2: f64, color: Color) -> Self {
+        Self {
+            x1,
+            y1,
+            x2,
+            y2,
+            color,
+        }
+    }
+}
+
 impl Shape for Line {
     fn draw(&self, painter: &mut Painter) {
         let Some((x1, y1)) = painter.get_point(self.x1, self.y1) else {
@@ -91,3 +104,160 @@ fn draw_line_high(painter: &mut Painter, x1: usize, y1: usize, x2: usize, y2: us
         d += 2 * dx;
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::Line;
+    use crate::{
+        assert_buffer_eq,
+        prelude::*,
+        widgets::{canvas::Canvas, Widget},
+    };
+
+    #[track_caller]
+    fn test(line: Line, expected_lines: Vec<&str>) {
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 10, 10));
+        let canvas = Canvas::default()
+            .marker(Marker::Dot)
+            .x_bounds([0.0, 10.0])
+            .y_bounds([0.0, 10.0])
+            .paint(|context| {
+                context.draw(&line);
+            });
+        canvas.render(buffer.area, &mut buffer);
+
+        let mut expected = Buffer::with_lines(expected_lines);
+        for cell in expected.content.iter_mut() {
+            if cell.symbol == "•" {
+                cell.set_style(Style::new().red());
+            }
+        }
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn off_grid() {
+        test(
+            Line::new(-1.0, -1.0, 10.0, 10.0, Color::Red),
+            vec!["          "; 10],
+        );
+        test(
+            Line::new(0.0, 0.0, 11.0, 11.0, Color::Red),
+            vec!["          "; 10],
+        );
+    }
+
+    #[test]
+    fn horizontal() {
+        test(
+            Line::new(0.0, 0.0, 10.0, 0.0, Color::Red),
+            vec![
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "••••••••••",
+            ],
+        );
+        test(
+            Line::new(10.0, 10.0, 0.0, 10.0, Color::Red),
+            vec![
+                "••••••••••",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+            ],
+        );
+    }
+
+    #[test]
+    fn vertical() {
+        test(
+            Line::new(0.0, 0.0, 0.0, 10.0, Color::Red),
+            vec!["•         "; 10],
+        );
+        test(
+            Line::new(10.0, 10.0, 10.0, 0.0, Color::Red),
+            vec!["         •"; 10],
+        );
+    }
+
+    #[test]
+    fn diagonal() {
+        // dy < dx, x1 < x2
+        test(
+            Line::new(0.0, 0.0, 10.0, 5.0, Color::Red),
+            vec![
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "         •",
+                "       •• ",
+                "     ••   ",
+                "   ••     ",
+                " ••       ",
+                "•         ",
+            ],
+        );
+        // dy < dx, x1 > x2
+        test(
+            Line::new(10.0, 0.0, 0.0, 5.0, Color::Red),
+            vec![
+                "          ",
+                "          ",
+                "          ",
+                "          ",
+                "•         ",
+                " ••       ",
+                "   ••     ",
+                "     ••   ",
+                "       •• ",
+                "         •",
+            ],
+        );
+        // dy > dx, y1 < y2
+        test(
+            Line::new(0.0, 0.0, 5.0, 10.0, Color::Red),
+            vec![
+                "    •     ",
+                "    •     ",
+                "   •      ",
+                "   •      ",
+                "  •       ",
+                "  •       ",
+                " •        ",
+                " •        ",
+                "•         ",
+                "•         ",
+            ],
+        );
+        // dy > dx, y1 > y2
+        test(
+            Line::new(0.0, 10.0, 5.0, 0.0, Color::Red),
+            vec![
+                "•         ",
+                "•         ",
+                " •        ",
+                " •        ",
+                "  •       ",
+                "  •       ",
+                "   •      ",
+                "   •      ",
+                "    •     ",
+                "    •     ",
+            ],
+        );
+    }
+}

src/widgets/canvas/map.rs

@@ -1,3 +1,5 @@
+use strum::{Display, EnumString};
+
 use crate::{
     style::Color,
     widgets::canvas::{
@@ -6,7 +8,7 @@ use crate::{
     },
 };
 
-#[derive(Debug, Default, Clone, Copy)]
+#[derive(Debug, Default, Display, EnumString, Clone, Copy, Eq, PartialEq, Hash)]
 pub enum MapResolution {
     #[default]
     Low,
@@ -23,7 +25,7 @@ impl MapResolution {
 }
 
 /// Shape to draw a world map with the given resolution and color
-#[derive(Debug, Default, Clone)]
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
 pub struct Map {
     pub resolution: MapResolution,
     pub color: Color,
@@ -38,3 +40,153 @@ impl Shape for Map {
         }
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use strum::ParseError;
+
+    use super::*;
+    use crate::{
+        assert_buffer_eq,
+        prelude::*,
+        widgets::{canvas::Canvas, Widget},
+    };
+
+    #[test]
+    fn map_resolution_to_string() {
+        assert_eq!(MapResolution::Low.to_string(), "Low");
+        assert_eq!(MapResolution::High.to_string(), "High");
+    }
+
+    #[test]
+    fn map_resolution_from_str() {
+        assert_eq!("Low".parse(), Ok(MapResolution::Low));
+        assert_eq!("High".parse(), Ok(MapResolution::High));
+        assert_eq!(
+            "".parse::<MapResolution>(),
+            Err(ParseError::VariantNotFound)
+        );
+    }
+
+    #[test]
+    fn default() {
+        let map = Map::default();
+        assert_eq!(map.resolution, MapResolution::Low);
+        assert_eq!(map.color, Color::Reset);
+    }
+
+    #[test]
+    fn draw_low() {
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 80, 40));
+        let canvas = Canvas::default()
+            .marker(Marker::Dot)
+            .x_bounds([-180.0, 180.0])
+            .y_bounds([-90.0, 90.0])
+            .paint(|context| {
+                context.draw(&Map::default());
+            });
+        canvas.render(buffer.area, &mut buffer);
+        let expected = Buffer::with_lines(vec![
+            "                                                                                ",
+            "                   ••••••• •• •• •• •                                           ",
+            "            ••••••••••••••       •••      ••••  •••  ••    ••••                 ",
+            "            ••••••••••••••••     ••                ••• ••••••• •• •• •••        ",
+            "• • •• •••••• •••••••••••• ••   •••  •    •••••  •••••••••          ••  • • • • ",
+            "•••••       ••••  •••••••• •• ••  •••    •••• ••••    •• •                    • ",
+            "   ••••••••  ••••••• •••••  •••       ••••••••                        • •••••   ",
+            "  •• ••   ••    •••••••  ••          ••• ••••                        ••    •    ",
+            "•••       •••    •••••• ••••         ••••                             •• •   •• ",
+            "            •      •••••••••          ••  •   ••• • •• ••            ••         ",
+            "            • •     ••••             •• ••••••••• •••   •         • • ••        ",
+            "            •         •               ••••• ••••  ••             ••••••         ",
+            "             •      ••               •   • •• •                  •••••          ",
+            "              ••  •• •              •         ••  ••              •             ",
+            "    ••        •••   •••            •           •  •••••    •   •••              ",
+            "     •           •••• •••                       •   •  •    •  • ••             ",
+            "                  •••• •           •            •• •     •  ••   ••             ",
+            "                     ••• ••         •           • •     ••   ••• •••            ",
+            "                      •    •        • •• •              •   •   •  •            ",
+            "                   •  •     •            •    • •            ••• •  •           ",
+            "                     •        •           •   •              •• •   • •         ",
+            "                               •                •              ••   ••• •       ",
+            " •                    •       •           •     • •                • •          ",
+            "                        •                 •    • ••               •  • •   •  • ",
+            "                              •                •                •       •       ",
+            "                       •    •                 •  •              •        •      ",
+            "                       •   ••              • •                  • • ••       •  ",
+            "                       •  •                •                         ••••    •• ",
+            "                       • •                                             ••   ••• ",
+            "                       ••                                                   •   ",
+            "                       •• •                                                     ",
+            "                       ••                                                       ",
+            "                                                                                ",
+            "                        •••                        •      •••• • • •• •         ",
+            "                       ••••           •••••• •••••• ••••••             • •••    ",
+            "         •• •••••• ••••• ••      • ••• •                                   ••   ",
+            "•  •••••             ••  •• ••••••                                         • •• ",
+            "•    •                 •   •  •                                             • • ",
+            "       •                                                                        ",
+            "                                                                                ",
+        ]);
+        assert_buffer_eq!(buffer, expected);
+    }
+
+    #[test]
+    fn draw_high() {
+        let mut buffer = Buffer::empty(Rect::new(0, 0, 80, 40));
+        let canvas = Canvas::default()
+            .marker(Marker::Braille)
+            .x_bounds([-180.0, 180.0])
+            .y_bounds([-90.0, 90.0])
+            .paint(|context| {
+                context.draw(&Map {
+                    resolution: MapResolution::High,
+                    ..Default::default()
+                });
+            });
+        canvas.render(buffer.area, &mut buffer);
+        let expected = Buffer::with_lines(vec![
+            "                                                                                ",
+            "                  ⢀⣠⠤⠤⠤⠔⢤⣤⡄⠤⡠⣄⠢⠂⢢⠰⣠⡄⣀⡀                      ⣀                   ",
+            "            ⢀⣀⡤⣦⠲⢶⣿⣮⣿⡉⣰⢶⢏⡂        ⢀⣟⠁     ⢺⣻⢿⠏   ⠈⠉⠁ ⢀⣀    ⠈⠓⢳⣢⣂⡀               ",
+            "            ⡞⣳⣿⣻⡧⣷⣿⣿⢿⢿⣧⡀⠉⠉⠙⢆      ⣰⠇               ⣠⠞⠃⢉⣄⣀⣠⠴⠊⠉⠁ ⠐⠾⠤⢤⠤⡄⠐⣻⠜⢓⠂      ",
+            "⢍ ⢀⡴⠊⠙⠓⠒⠒⠤⠖⠺⠿⠽⣷⣬⢬⣾⣷⢻⣷⢲⢲⣍⠱⡀ ⠹⡗   ⢀⢐⠟        ⡔⠒⠉⠲⠤⢀⢄⡀⢩⣣⠦⢷⢼⡏⠈          ⠉⠉⠉ ⠈⠈⠉⠖⠤⠆⠒⠭",
+            "⠶⢽⡲⣽⡆             ⠈⣠⣽⣯⡼⢯⣘⡯⠃⠘⡆ ⢰⠒⠁ ⢾⣚⠟    ⢀⠆ ⣔⠆ ⢷⠾⠋⠁    ⠙⠁                     ⠠⡤",
+            "  ⠠⢧⣄⣀⡶⠦⠤⡀        ⢰⡁ ⠉⡻⠙⣎⡥  ⠘⠲⠇       ⢀⡀⠨⣁⡄⣸⢫⡤⠄                        ⣀⢠⣤⠊⣼⠅⠖⠋⠁",
+            "   ⣠⠾⠛⠁  ⠈⣱        ⠋⠦⢤⡼ ⠈⠈⠦⡀         ⢀⣿⣇ ⢹⣷⣂⡞⠃                       ⢀⣂⡀  ⠏⣜    ",
+            "          ⠙⣷⡄        ⠘⠆ ⢀⣀⡠⣗         ⠘⣻⣽⡟⠉⠈                           ⢹⡇  ⠟⠁    ",
+            "           ⠈⡟           ⢎⣻⡿⠾⠇         ⠘⠇  ⣀⡀  ⣤⣤⡆ ⡠⡦                 ⢀⠎⡏        ",
+            "            ⡇          ⣀⠏⠋           ⢸⠒⢃⡖⢻⢟⣷⣄⣰⣡⠥⣱ ⢏⣧              ⣀ ⡴⠚⢰⠟        ",
+            "            ⢳         ⢸⠃             ⠸⣄⣼⣠⢼⡴⡟⢿⢿⣀⣄  ⠸⡹             ⠘⡯⢿⡇⡠⢼⠁        ",
+            "             ⢳⣀      ⢀⠞⠁             ⢠⠋⠁ ⠐⠧⡄⣬⣉⣈⡽                  ⢧⠘⢽⠟⠉         ",
+            "              ⣿⣄  ⡴⠚⠛⣿⣀             ⢠⠖     ⠈⠁ ⠹⣧  ⢾⣄⡀             ⡼ ⠈           ",
+            "    ⣀         ⠘⣿⡄ ⡇  ⣘⣻             ⡏          ⢻⡄ ⠘⠿⢿⠒⠲⡀   ⢀⡀   ⢀⡰⣗             ",
+            "    ⠉⠷          ⢫⡀⢧⡼⡟⠉⣛⣳⣦⡀         ⠈⡇          ⠸⣱  ⢀⡼  ⢺  ⡸⠉⢇  ⣾⡏ ⣁             ",
+            "                 ⠉⠒⢆⡓⡆             ⠠⡃           ⢳⣇⡠⠏   ⠐⡄⡞  ⠘⣇⡀⢱  ⣾⡀            ",
+            "                    ⢹⣇⣀⣾⡷⠤⡆         ⢣            ⠯⢺⠇    ⢣⣅   ⣽⢱⡔ ⢠⢿⣗            ",
+            "                     ⠙⢱   ⠘⠦⡄       ⠈⢦⡠⣠⢶⣀        ⡜     ⠈⠿  ⢠⣽⢆ ⢀⣼⡜⠿            ",
+            "                     ⢀⡞     ⢱⡀           ⢸       ⡔⠁          ⢻⢿⢰⠏⢸⣤⣴⣆           ",
+            "                     ⢘⠆      ⠙⠢⢄         ⠸⡀     ⡸⠁           ⠈⣞⡎⠥⡟⣿⠠⠿⣷⠒⢤⢀⣆      ",
+            "                     ⠘⠆        ⢈⠂         ⢳     ⡇             ⠈⠳⠶⣤⣭⣠ ⠋⢧⡬⣟⠉⠷⡄    ",
+            "                      ⢨        ⡜          ⢸     ⠸ ⣠               ⠁⢁⣰⢶ ⡇⠉⠁ ⠛    ",
+            "⠆                     ⠈⢱⡀      ⡆          ⡇    ⢀⡜⡴⢹               ⢰⠏⠁⠘⢶⠹⡀   ⠸ ⢠⡶",
+            "                        ⠅     ⣸           ⢸    ⢫ ⡞⡊             ⢠⠔⠋     ⢳⡀ ⠐⣦   ",
+            "                        ⡅    ⡏            ⠈⡆  ⢠⠎ ⠳⠃             ⢸        ⢳      ",
+            "                       ⠨    ⡸⠁             ⢱  ⡸                 ⠈⡇ ⢀⣀⡀   ⢸      ",
+            "                       ⠸  ⠐⡶⠁              ⠘⠖⠚                   ⠣⠒⠋ ⠱⣇ ⢀⠇   ⠰⡄ ",
+            "                       ⠽ ⣰⡖⠁                                          ⠘⢚⡊    ⢀⣿⠇",
+            "                       ⡯⢀⡟                                             ⠘⠏   ⢠⢾⠃ ",
+            "                       ⠇⢨⠆                            ⢠⡄                    ⠈⠁  ",
+            "                       ⢧⣷⡀⠚                                                     ",
+            "                        ⠉⠁                                                      ",
+            "                          ⢀⡀                                                    ",
+            "                        ⢠⡾⠋                      ⣀⡠⠖⢦⣀⣀  ⣀⠤⠦⢤⠤⠶⠤⠖⠦⠤⠤⠤⠴⠤⢤⣄       ",
+            "                ⢀⣤⣀ ⡀  ⣼⣻⠙⡆         ⢀⡤⠤⠤⠴⠒⠖⠒⠒⠒⠚⠉⠋⠁    ⢰⡳⠊⠁              ⠈⠉⠉⠒⠤⣤  ",
+            "    ⢀⣀⣀⡴⠖⠒⠒⠚⠛⠛⠛⠒⠚⠳⠉⠉⠉⠉⢉⣉⡥⠔⠃     ⢀⣠⠤⠴⠃                                      ⢠⠞⠁  ",
+            "   ⠘⠛⣓⣒⠆              ⠸⠥⣀⣤⡦⠠⣞⣭⣇⣘⠿⠆                                         ⣖⠛   ",
+            "⠶⠔⠲⠤⠠⠜⢗⠤⠄                 ⠘⠉  ⠁                                            ⠈⠉⠒⠔⠤",
+            "                                                                                ",
+        ]);
+        assert_buffer_eq!(buffer, expected);
+    }
+}