From f93e90fc3fd9a64077f13b0741c61a6e958e4b9d Mon Sep 17 00:00:00 2001
From: rhysd <lin90162@yahoo.co.jp>
Date: Sun, 19 Jun 2022 20:39:47 +0900
Subject: [PATCH] add screenshot of examples to README

---
 README.md | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index edb84a8..7f8ee70 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,24 @@ text editor can be easily put as part of your TUI application.
 
 [Documentation][doc]
 
-TODO: Screenshot
+## Examples
+
+- [`minimal`](./examples/minimal.rs): Minimal usage with [crossterm][] support
+  <img src="https://raw.githubusercontent.com/rhysd/ss/master/tui-textarea/minimal.gif" width=539 height=172 alt="minimal example">
+- [`editor`](./examples/editor.rs): Simple text editor to edit multiple files
+  <img src="https://raw.githubusercontent.com/rhysd/ss/master/tui-textarea/editor.gif" width=539 height=172 alt="editor example">
+- [`single_line`](./examples/single_line.rs): Single-line input form with float number validation
+  <img src="https://raw.githubusercontent.com/rhysd/ss/master/tui-textarea/single_line.gif" width=539 height=92 alt="single line example">
+- [`multi`](./examples/multi.rs): Two split textareas in a screen and switch them
+  <img src="https://raw.githubusercontent.com/rhysd/ss/master/tui-textarea/split.gif" width=539 height=124 alt="multiple textareas example">
+- [`termion`](./examples/termion.rs): Minimal usage with [termion][] support
+- [`variable`](./examples/variable.rs): Simple textarea with variable height following the number of lines
+
+Running `cargo run` in this repository can demonstrate usage of tui-textarea.
+
+```sh
+cargo run --example minimal
+```
 
 ## Installation
 
@@ -37,23 +54,6 @@ tui = { version = "*", default-features = false, features = ["termion"] }
 tui-textarea = { version = "*", default-features = false, features = ["termion"] }
 ```
 
-## Examples
-
-Running `cargo run` in this repository can demonstrate usage of tui-textarea.
-
-```sh
-cargo run --example minimal
-```
-
-**Examples:**
-
-- [minimal](./examples/minimal.rs): Minimal usage with [crossterm][] support
-- [termion](./examples/termion.rs): Minimal usage with [termion][] support
-- [multi](./examples/multi.rs): Two split textareas in a screen and switch them
-- [single_line](./examples/single_line.rs): Single line input form with float number validation
-- [variable](./examples/variable.rs): Simple textarea with variable height following the number of lines
-- [editor](./examples/editor.rs): Simple text editor to edit multiple files
-
 ## Minimal Usage
 
 ```rust
@@ -256,9 +256,9 @@ textarea.set_max_histories(0);
 
 ## Advanced Usage
 
-### Single line input like `<input>` in HTML
+### Single-line input like `<input>` in HTML
 
-To use `TextArea` for single line input widget like `<input>` in HTML, ignore all key mappings which inserts newline.
+To use `TextArea` for single-line input widget like `<input>` in HTML, ignore all key mappings which inserts newline.
 
 ```rust
 use crossterm::event::{Event, read};