diff --git a/build-scripts/build-web-examples.pl b/build-scripts/build-web-examples.pl
index 4b9b5fed6f5a2..51c23c6064368 100755
--- a/build-scripts/build-web-examples.pl
+++ b/build-scripts/build-web-examples.pl
@@ -71,17 +71,41 @@ sub build_latest {
     }
 }
 
+sub get_category_description {
+    my $category = shift;
+    my $retval = ucfirst($category);
+
+    if (open(my $fh, '<', "$examples_dir/$category/description.txt")) {
+        $retval = <$fh>;
+        chomp($retval);
+        close($fh);
+    }
+
+    return $retval;
+}
+
 sub get_categories {
     my @categories = ();
 
-    opendir(my $dh, $examples_dir) or die("Couldn't opendir '$examples_dir': $!\n");
-    foreach my $dir (sort readdir $dh) {
-        next if ($dir eq '.') || ($dir eq '..');  # obviously skip current and parent entries.
-        next if not -d "$examples_dir/$dir";   # only care about subdirectories.
-
-        push @categories, $dir;
+    if (open(my $fh, '<', "$examples_dir/categories.txt")) {
+        while (<$fh>) {
+            chomp;
+            s/\A\s+//;
+            s/\s+\Z//;
+            next if $_ eq '';
+            next if /\A\#/;
+            push @categories, $_;
+        }
+        close($fh);
+    } else {
+        opendir(my $dh, $examples_dir) or die("Couldn't opendir '$examples_dir': $!\n");
+        foreach my $dir (sort readdir $dh) {
+            next if ($dir eq '.') || ($dir eq '..');  # obviously skip current and parent entries.
+            next if not -d "$examples_dir/$dir";   # only care about subdirectories.
+            push @categories, $dir;
+        }
+        closedir($dh);
     }
-    closedir($dh);
 
     return @categories;
 }
@@ -131,10 +155,16 @@ sub handle_example_dir {
     $basefname = "$category-$basefname";
     my $jsfname = "$basefname.js";
     my $wasmfname = "$basefname.wasm";
+    my $thumbnailfname = 'thumbnail.png';
+    my $onmouseoverfname = 'onmouseover.webp';
     my $jssrc = "$compile_dir/examples/$jsfname";
     my $wasmsrc = "$compile_dir/examples/$wasmfname";
+    my $thumbnailsrc = "$examples_dir/$category/$example/$thumbnailfname";
+    my $onmouseoversrc = "$examples_dir/$category/$example/$onmouseoverfname";
     my $jsdst = "$dst/$jsfname";
     my $wasmdst = "$dst/$wasmfname";
+    my $thumbnaildst = "$dst/$thumbnailfname";
+    my $onmouseoverdst = "$dst/$onmouseoverfname";
 
     my $description = '';
     if (open(my $readmetxth, '<', "$examples_dir/$category/$example/README.txt")) {
@@ -150,6 +180,8 @@ sub handle_example_dir {
     do_mkdir($dst);
     do_copy($jssrc, $jsdst);
     do_copy($wasmsrc, $wasmdst);
+    do_copy($thumbnailsrc, $thumbnaildst) if ( -f $thumbnailsrc );
+    do_copy($onmouseoversrc, $onmouseoverdst) if ( -f $onmouseoversrc );
 
     my $highlight_cmd = "highlight '--outdir=$dst' --style-outfile=highlight.css --fragment --enclose-pre --stdout --syntax=c '--plug-in=$examples_dir/highlight-plugin.lua'";
     print("$highlight_cmd\n");
@@ -184,11 +216,14 @@ sub handle_example_dir {
     }
     $other_examples_html .= "</ul>";
 
+    my $category_description = get_category_description($category);
+
     my $html = '';
     open my $htmltemplate, '<', "$examples_dir/template.html" or die("Couldn't open '$examples_dir/template.html': $!\n");
     while (<$htmltemplate>) {
         s/\@project_name\@/$project/g;
         s/\@category_name\@/$category/g;
+        s/\@category_description\@/$category_description/g;
         s/\@example_name\@/$example/g;
         s/\@javascript_file\@/$jsfname/g;
         s/\@htmlified_source_code\@/$htmlified_source_code/g;
@@ -203,6 +238,51 @@ sub handle_example_dir {
     close($htmloutput);
 }
 
+sub generate_example_thumbnail {
+    my $project = shift;
+    my $category = shift;
+    my $example = shift;
+
+    my $example_no_num = "$example";
+    $example_no_num =~ s/\A\d+\-//;
+
+    my $example_image_url;
+    if ( -f "$examples_dir/$category/$example/thumbnail.png" ) {
+        $example_image_url = "/$project/$category/$example/thumbnail.png";
+    } elsif ( -f "$examples_dir/$category/thumbnail.png" ) {
+        $example_image_url = "/$project/$category/thumbnail.png";
+    } else {
+        $example_image_url = "/$project/thumbnail.png";
+    }
+
+    my $example_mouseover_html = '';
+    if ( -f "$examples_dir/$category/$example/onmouseover.webp" ) {
+        $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/$example/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url'\";";
+    } elsif ( -f "$examples_dir/$category/onmouseover.webp" ) {
+        $example_mouseover_html = "onmouseover=\"this.src='/$project/$category/onmouseover.webp'\" onmouseout=\"this.src='$example_image_url'\";";
+    }
+
+    return "
+        <a href='/$project/$category/$example'>
+          <div>
+            <img src='$example_image_url' $example_mouseover_html />
+            <div>$example_no_num</div>
+          </div>
+        </a>"
+    ;
+}
+
+sub generate_example_thumbnails_for_category {
+    my $project = shift;
+    my $category = shift;
+    my @examples = get_examples_for_category($category);
+    my $retval = '';
+    foreach my $example (@examples) {
+        $retval .= generate_example_thumbnail($project, $category, $example);
+    }
+    return $retval;
+}
+
 sub handle_category_dir {
     my $category = shift;
 
@@ -220,26 +300,22 @@ sub handle_category_dir {
 
     closedir($dh);
 
-    my $examples_list_html = "";
-    foreach my $example (get_examples_for_category($category)) {
-        # !!! FIXME: image
-        my $example_image_url = "/$project/placeholder.png";
-        $examples_list_html .= "
-        <a href='/$project/$category/$example'>
-          <div>
-            <img src='$example_image_url' />
-            <div>$category/$example</div>
-          </div>
-        </a>";
-    }
+    my $examples_list_html = generate_example_thumbnails_for_category($project, $category);
 
-    # write category page
     my $dst = "$output_dir/$category";
+
+    do_copy("$examples_dir/$category/thumbnail.png", "$dst/thumbnail.png") if ( -f "$examples_dir/$category/thumbnail.png" );
+    do_copy("$examples_dir/$category/onmouseover.webp", "$dst/onmouseover.webp") if ( -f "$examples_dir/$category/onmouseover.webp" );
+
+    my $category_description = get_category_description($category);
+
+    # write category page
     my $html = '';
     open my $htmltemplate, '<', "$examples_dir/template-category.html" or die("Couldn't open '$examples_dir/template-category.html': $!\n");
     while (<$htmltemplate>) {
         s/\@project_name\@/$project/g;
         s/\@category_name\@/$category/g;
+        s/\@category_description\@/$category_description/g;
         s/\@examples_list_html\@/$examples_list_html/g;
         $html .= $_;
     }
@@ -276,7 +352,7 @@ sub handle_category_dir {
 build_latest();
 
 do_copy("$examples_dir/template.css", "$output_dir/examples.css");
-do_copy("$examples_dir/template-placeholder.png", "$output_dir/placeholder.png");
+do_copy("$examples_dir/template-placeholder.png", "$output_dir/thumbnail.png");
 
 opendir(my $dh, $examples_dir) or die("Couldn't opendir '$examples_dir': $!\n");
 
@@ -292,19 +368,10 @@ sub handle_category_dir {
 # write homepage
 my $homepage_list_html = "";
 foreach my $category (get_categories()) {
-    $homepage_list_html .= "<h2>$category</h2>";
+    my $category_description = get_category_description($category);
+    $homepage_list_html .= "<h2>$category_description</h2>";
     $homepage_list_html .= "<div class='list'>";
-    foreach my $example (get_examples_for_category($category)) {
-        # !!! FIXME: image
-        my $example_image_url = "/$project/placeholder.png";
-        $homepage_list_html .= "
-            <a href='/$project/$category/$example'>
-            <div>
-                <img src='$example_image_url' />
-                <div>$category/$example</div>
-            </div>
-            </a>";
-    }
+    $homepage_list_html .= generate_example_thumbnails_for_category($project, $category);
     $homepage_list_html .= "</div>";
 }
 
diff --git a/examples/asyncio/01-load-bitmaps/thumbnail.png b/examples/asyncio/01-load-bitmaps/thumbnail.png
new file mode 100644
index 0000000000000..4f8be2a82c65b
Binary files /dev/null and b/examples/asyncio/01-load-bitmaps/thumbnail.png differ
diff --git a/examples/asyncio/description.txt b/examples/asyncio/description.txt
new file mode 100644
index 0000000000000..c3aafe13e1cba
--- /dev/null
+++ b/examples/asyncio/description.txt
@@ -0,0 +1 @@
+Asynchronous I/O
\ No newline at end of file
diff --git a/examples/audio/onmouseover.webp b/examples/audio/onmouseover.webp
new file mode 100644
index 0000000000000..1f3ba4b208056
Binary files /dev/null and b/examples/audio/onmouseover.webp differ
diff --git a/examples/audio/thumbnail.png b/examples/audio/thumbnail.png
new file mode 100644
index 0000000000000..10bc6c830f2a4
Binary files /dev/null and b/examples/audio/thumbnail.png differ
diff --git a/examples/camera/01-read-and-draw/onmouseover.webp b/examples/camera/01-read-and-draw/onmouseover.webp
new file mode 100644
index 0000000000000..1d414e6671477
Binary files /dev/null and b/examples/camera/01-read-and-draw/onmouseover.webp differ
diff --git a/examples/camera/01-read-and-draw/thumbnail.png b/examples/camera/01-read-and-draw/thumbnail.png
new file mode 100644
index 0000000000000..98fe4e0754fd4
Binary files /dev/null and b/examples/camera/01-read-and-draw/thumbnail.png differ
diff --git a/examples/categories.txt b/examples/categories.txt
new file mode 100644
index 0000000000000..8a9b5ecb375c9
--- /dev/null
+++ b/examples/categories.txt
@@ -0,0 +1,13 @@
+# Blank lines and lines that start with '#' in this file are ignored.
+
+# Categories, by directory name, go in here, in the order they should be
+# listed on the main page. If this file is missing, it'll assume any
+# subdirectory is a category and sort them alphabetically.
+
+renderer
+input
+audio
+camera
+asyncio
+pen
+demo
diff --git a/examples/demo/01-snake/onmouseover.webp b/examples/demo/01-snake/onmouseover.webp
new file mode 100644
index 0000000000000..1757202c375d5
Binary files /dev/null and b/examples/demo/01-snake/onmouseover.webp differ
diff --git a/examples/demo/01-snake/thumbnail.png b/examples/demo/01-snake/thumbnail.png
new file mode 100644
index 0000000000000..f0e27c5675168
Binary files /dev/null and b/examples/demo/01-snake/thumbnail.png differ
diff --git a/examples/demo/02-woodeneye-008/onmouseover.webp b/examples/demo/02-woodeneye-008/onmouseover.webp
new file mode 100644
index 0000000000000..2e7f44f924317
Binary files /dev/null and b/examples/demo/02-woodeneye-008/onmouseover.webp differ
diff --git a/examples/demo/02-woodeneye-008/thumbnail.png b/examples/demo/02-woodeneye-008/thumbnail.png
new file mode 100644
index 0000000000000..c8d1eface6900
Binary files /dev/null and b/examples/demo/02-woodeneye-008/thumbnail.png differ
diff --git a/examples/demo/03-infinite-monkeys/onmouseover.webp b/examples/demo/03-infinite-monkeys/onmouseover.webp
new file mode 100644
index 0000000000000..f522974770d54
Binary files /dev/null and b/examples/demo/03-infinite-monkeys/onmouseover.webp differ
diff --git a/examples/demo/03-infinite-monkeys/thumbnail.png b/examples/demo/03-infinite-monkeys/thumbnail.png
new file mode 100644
index 0000000000000..418390be9064f
Binary files /dev/null and b/examples/demo/03-infinite-monkeys/thumbnail.png differ
diff --git a/examples/demo/04-bytepusher/onmouseover.webp b/examples/demo/04-bytepusher/onmouseover.webp
new file mode 100644
index 0000000000000..b99e7ddc46ff2
Binary files /dev/null and b/examples/demo/04-bytepusher/onmouseover.webp differ
diff --git a/examples/demo/04-bytepusher/thumbnail.png b/examples/demo/04-bytepusher/thumbnail.png
new file mode 100644
index 0000000000000..891aa8f53223e
Binary files /dev/null and b/examples/demo/04-bytepusher/thumbnail.png differ
diff --git a/examples/demo/description.txt b/examples/demo/description.txt
new file mode 100644
index 0000000000000..77bcbb7c2b7c7
--- /dev/null
+++ b/examples/demo/description.txt
@@ -0,0 +1 @@
+Full game and app demos
\ No newline at end of file
diff --git a/examples/input/01-joystick-polling/onmouseover.webp b/examples/input/01-joystick-polling/onmouseover.webp
new file mode 100644
index 0000000000000..484539c32ce1c
Binary files /dev/null and b/examples/input/01-joystick-polling/onmouseover.webp differ
diff --git a/examples/input/01-joystick-polling/thumbnail.png b/examples/input/01-joystick-polling/thumbnail.png
new file mode 100644
index 0000000000000..4faebbad26b0d
Binary files /dev/null and b/examples/input/01-joystick-polling/thumbnail.png differ
diff --git a/examples/input/02-joystick-events/onmouseover.webp b/examples/input/02-joystick-events/onmouseover.webp
new file mode 100644
index 0000000000000..05a9b4267140d
Binary files /dev/null and b/examples/input/02-joystick-events/onmouseover.webp differ
diff --git a/examples/input/02-joystick-events/thumbnail.png b/examples/input/02-joystick-events/thumbnail.png
new file mode 100644
index 0000000000000..07f3ff153d9d1
Binary files /dev/null and b/examples/input/02-joystick-events/thumbnail.png differ
diff --git a/examples/pen/01-drawing-lines/onmouseover.webp b/examples/pen/01-drawing-lines/onmouseover.webp
new file mode 100644
index 0000000000000..f9c4d3dc98c9a
Binary files /dev/null and b/examples/pen/01-drawing-lines/onmouseover.webp differ
diff --git a/examples/pen/01-drawing-lines/thumbnail.png b/examples/pen/01-drawing-lines/thumbnail.png
new file mode 100644
index 0000000000000..3403d3577f70b
Binary files /dev/null and b/examples/pen/01-drawing-lines/thumbnail.png differ
diff --git a/examples/renderer/01-clear/onmouseover.webp b/examples/renderer/01-clear/onmouseover.webp
new file mode 100644
index 0000000000000..a0062fe0d9b98
Binary files /dev/null and b/examples/renderer/01-clear/onmouseover.webp differ
diff --git a/examples/renderer/01-clear/thumbnail.png b/examples/renderer/01-clear/thumbnail.png
new file mode 100644
index 0000000000000..b255675da9db8
Binary files /dev/null and b/examples/renderer/01-clear/thumbnail.png differ
diff --git a/examples/renderer/02-primitives/thumbnail.png b/examples/renderer/02-primitives/thumbnail.png
new file mode 100644
index 0000000000000..4ddf2ab86a172
Binary files /dev/null and b/examples/renderer/02-primitives/thumbnail.png differ
diff --git a/examples/renderer/03-lines/onmouseover.webp b/examples/renderer/03-lines/onmouseover.webp
new file mode 100644
index 0000000000000..5d3b3fce51f2c
Binary files /dev/null and b/examples/renderer/03-lines/onmouseover.webp differ
diff --git a/examples/renderer/03-lines/thumbnail.png b/examples/renderer/03-lines/thumbnail.png
new file mode 100644
index 0000000000000..9d0ff10b9c5a1
Binary files /dev/null and b/examples/renderer/03-lines/thumbnail.png differ
diff --git a/examples/renderer/04-points/onmouseover.webp b/examples/renderer/04-points/onmouseover.webp
new file mode 100644
index 0000000000000..04582da55adf3
Binary files /dev/null and b/examples/renderer/04-points/onmouseover.webp differ
diff --git a/examples/renderer/04-points/thumbnail.png b/examples/renderer/04-points/thumbnail.png
new file mode 100644
index 0000000000000..56271136c991d
Binary files /dev/null and b/examples/renderer/04-points/thumbnail.png differ
diff --git a/examples/renderer/05-rectangles/onmouseover.webp b/examples/renderer/05-rectangles/onmouseover.webp
new file mode 100644
index 0000000000000..cdfd376ee0e76
Binary files /dev/null and b/examples/renderer/05-rectangles/onmouseover.webp differ
diff --git a/examples/renderer/05-rectangles/thumbnail.png b/examples/renderer/05-rectangles/thumbnail.png
new file mode 100644
index 0000000000000..64e66882f96a9
Binary files /dev/null and b/examples/renderer/05-rectangles/thumbnail.png differ
diff --git a/examples/renderer/06-textures/onmouseover.webp b/examples/renderer/06-textures/onmouseover.webp
new file mode 100644
index 0000000000000..467afd85a4138
Binary files /dev/null and b/examples/renderer/06-textures/onmouseover.webp differ
diff --git a/examples/renderer/06-textures/thumbnail.png b/examples/renderer/06-textures/thumbnail.png
new file mode 100644
index 0000000000000..b33ba317db52e
Binary files /dev/null and b/examples/renderer/06-textures/thumbnail.png differ
diff --git a/examples/renderer/07-streaming-textures/onmouseover.webp b/examples/renderer/07-streaming-textures/onmouseover.webp
new file mode 100644
index 0000000000000..7c2969368e818
Binary files /dev/null and b/examples/renderer/07-streaming-textures/onmouseover.webp differ
diff --git a/examples/renderer/07-streaming-textures/thumbnail.png b/examples/renderer/07-streaming-textures/thumbnail.png
new file mode 100644
index 0000000000000..60c2a9f2acd01
Binary files /dev/null and b/examples/renderer/07-streaming-textures/thumbnail.png differ
diff --git a/examples/renderer/08-rotating-textures/onmouseover.webp b/examples/renderer/08-rotating-textures/onmouseover.webp
new file mode 100644
index 0000000000000..69735cee84620
Binary files /dev/null and b/examples/renderer/08-rotating-textures/onmouseover.webp differ
diff --git a/examples/renderer/08-rotating-textures/thumbnail.png b/examples/renderer/08-rotating-textures/thumbnail.png
new file mode 100644
index 0000000000000..12c51e17f5133
Binary files /dev/null and b/examples/renderer/08-rotating-textures/thumbnail.png differ
diff --git a/examples/renderer/09-scaling-textures/onmouseover.webp b/examples/renderer/09-scaling-textures/onmouseover.webp
new file mode 100644
index 0000000000000..bcc967c93fb2a
Binary files /dev/null and b/examples/renderer/09-scaling-textures/onmouseover.webp differ
diff --git a/examples/renderer/09-scaling-textures/thumbnail.png b/examples/renderer/09-scaling-textures/thumbnail.png
new file mode 100644
index 0000000000000..c0a24c20efcce
Binary files /dev/null and b/examples/renderer/09-scaling-textures/thumbnail.png differ
diff --git a/examples/renderer/10-geometry/onmouseover.webp b/examples/renderer/10-geometry/onmouseover.webp
new file mode 100644
index 0000000000000..37a518c316144
Binary files /dev/null and b/examples/renderer/10-geometry/onmouseover.webp differ
diff --git a/examples/renderer/10-geometry/thumbnail.png b/examples/renderer/10-geometry/thumbnail.png
new file mode 100644
index 0000000000000..89195fba89af7
Binary files /dev/null and b/examples/renderer/10-geometry/thumbnail.png differ
diff --git a/examples/renderer/11-color-mods/onmouseover.webp b/examples/renderer/11-color-mods/onmouseover.webp
new file mode 100644
index 0000000000000..2157063bc16ed
Binary files /dev/null and b/examples/renderer/11-color-mods/onmouseover.webp differ
diff --git a/examples/renderer/11-color-mods/thumbnail.png b/examples/renderer/11-color-mods/thumbnail.png
new file mode 100644
index 0000000000000..d471112868ea4
Binary files /dev/null and b/examples/renderer/11-color-mods/thumbnail.png differ
diff --git a/examples/renderer/14-viewport/thumbnail.png b/examples/renderer/14-viewport/thumbnail.png
new file mode 100644
index 0000000000000..bad552148684e
Binary files /dev/null and b/examples/renderer/14-viewport/thumbnail.png differ
diff --git a/examples/renderer/15-cliprect/onmouseover.webp b/examples/renderer/15-cliprect/onmouseover.webp
new file mode 100644
index 0000000000000..943eeef7a4f8f
Binary files /dev/null and b/examples/renderer/15-cliprect/onmouseover.webp differ
diff --git a/examples/renderer/15-cliprect/thumbnail.png b/examples/renderer/15-cliprect/thumbnail.png
new file mode 100644
index 0000000000000..127e6fa0954d1
Binary files /dev/null and b/examples/renderer/15-cliprect/thumbnail.png differ
diff --git a/examples/renderer/17-read-pixels/onmouseover.webp b/examples/renderer/17-read-pixels/onmouseover.webp
new file mode 100644
index 0000000000000..bb4e5c4aebb9d
Binary files /dev/null and b/examples/renderer/17-read-pixels/onmouseover.webp differ
diff --git a/examples/renderer/17-read-pixels/thumbnail.png b/examples/renderer/17-read-pixels/thumbnail.png
new file mode 100644
index 0000000000000..8da02ac7687be
Binary files /dev/null and b/examples/renderer/17-read-pixels/thumbnail.png differ
diff --git a/examples/renderer/18-debug-text/thumbnail.png b/examples/renderer/18-debug-text/thumbnail.png
new file mode 100644
index 0000000000000..f08e469187f41
Binary files /dev/null and b/examples/renderer/18-debug-text/thumbnail.png differ
diff --git a/examples/template-category.html b/examples/template-category.html
index 9872e9ad8e058..3ff57b8ae9878 100644
--- a/examples/template-category.html
+++ b/examples/template-category.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>@project_name@ Examples: @category_name@</title>
+    <title>@project_name@ Examples: @category_description@</title>
     <link
       rel="stylesheet"
       type="text/css"
@@ -18,7 +18,7 @@
   </head>
   <body>
     <header>
-      <a href="/">SDL Examples</a>
+      <a href="/">@project_name@ Examples</a>
     </header>
     <main>
       <nav class="breadcrumb">
@@ -27,7 +27,7 @@
           <li><a href="/@project_name@/@category_name@">@category_name@</a></li>
         </ul>
       </nav>
-      <h1>@project_name@ examples: @category_name@</h1>
+      <h1>@project_name@ examples: @category_description@</h1>
       <div class="list">@examples_list_html@</div>
     </main>
   </body>
diff --git a/examples/template-homepage.html b/examples/template-homepage.html
index 3dfbc9ef521e8..1c3620c3ca7ce 100644
--- a/examples/template-homepage.html
+++ b/examples/template-homepage.html
@@ -28,8 +28,6 @@
       </nav>
       <h1>@project_name@ examples</h1>
 
-      <p>Check out the @project_name@ examples here!</p>
-
       @homepage_list_html@
     </main>
   </body>
diff --git a/examples/template-placeholder.png b/examples/template-placeholder.png
index 04ce3ef601e27..202df9590186a 100644
Binary files a/examples/template-placeholder.png and b/examples/template-placeholder.png differ