diff --git a/README.md b/README.md
index 4165c970b..ad4d44605 100644
--- a/README.md
+++ b/README.md
@@ -82,9 +82,10 @@ var art = new Artplayer({
 
 ## Ecosystem
 
-| Project                                                                                                       | Description                |
-| ------------------------------------------------------------------------------------------------------------- | -------------------------- |
-| [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu) | Danmu plugin for ArtPlayer |
+| Project                                                                                                           | Description                  | Demo   |
+| ----------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------ |
+| [artplayer-plugin-danmu](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu)     | Danmu plugin for ArtPlayer   | `None` |
+| [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | Thumbnail tool for ArtPlayer | `None` |
 
 ## QQ Group
 
diff --git a/docs/thumbnail/index.html b/docs/thumbnail/index.html
index a3655a7a1..05e5b2baa 100644
--- a/docs/thumbnail/index.html
+++ b/docs/thumbnail/index.html
@@ -2,12 +2,12 @@
 <html>
 
 <head>
-    <title>ArtPlayer.js thumbnail maker</title>
+    <title>Thumbnail tool for ArtPlayer</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta name="keywords" content="artplayer,html5,video,player">
-    <meta name="description" content="ArtPlayer is a modern HTML5 video player">
+    <meta name="keywords" content="artplayer,html5,video,player,thumbnail">
+    <meta name="description" content="Thumbnail tool for ArtPlayer">
     <link rel="shortcut icon" href="./img/favicon.ico">
     <link rel="stylesheet" href="./css/normalize.css">
     <link rel="stylesheet" href="./css/common.css">
@@ -17,7 +17,7 @@
 
 <body>
     <div class="container">
-        artplayer-tool-thumbnail
+        <div class="artplayer-tool-thumbnail"></div>
     </div>
     <script src="../uncompiled/artplayer.js"></script>
     <script src="../uncompiled/artplayer-tool-thumbnail.js"></script>
diff --git a/docs/uncompiled/artplayer-tool-thumbnail.css b/docs/uncompiled/artplayer-tool-thumbnail.css
new file mode 100644
index 000000000..e0aef7441
--- /dev/null
+++ b/docs/uncompiled/artplayer-tool-thumbnail.css
@@ -0,0 +1 @@
+.artplayer-tool-thumbnail{display:flex}
\ No newline at end of file
diff --git a/docs/uncompiled/artplayer-tool-thumbnail.js b/docs/uncompiled/artplayer-tool-thumbnail.js
new file mode 100644
index 000000000..5feb3b860
--- /dev/null
+++ b/docs/uncompiled/artplayer-tool-thumbnail.js
@@ -0,0 +1,26 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (factory((global['artplayer-tool-thumbnail'] = {})));
+}(this, (function (exports) { 'use strict';
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  var classCallCheck = _classCallCheck;
+
+  var ArtplayerToolThumbnail = function ArtplayerToolThumbnail(el) {
+    classCallCheck(this, ArtplayerToolThumbnail);
+
+    this.el = el;
+    console.log(this);
+  };
+
+  exports.default = ArtplayerToolThumbnail;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
diff --git a/packages/artplayer-tool-thumbnail/src/index.js b/packages/artplayer-tool-thumbnail/src/index.js
index 67aac616f..3e3d18cec 100644
--- a/packages/artplayer-tool-thumbnail/src/index.js
+++ b/packages/artplayer-tool-thumbnail/src/index.js
@@ -1 +1,8 @@
 import './index.scss';
+
+export default class ArtplayerToolThumbnail {
+    constructor(el) {
+        this.el = el;
+        console.log(this);
+    }
+}
\ No newline at end of file
diff --git a/packages/artplayer-tool-thumbnail/src/index.scss b/packages/artplayer-tool-thumbnail/src/index.scss
index 41b95f21c..1af817395 100644
--- a/packages/artplayer-tool-thumbnail/src/index.scss
+++ b/packages/artplayer-tool-thumbnail/src/index.scss
@@ -1,3 +1,3 @@
-.artplayerPluginDanmu {
+.artplayer-tool-thumbnail {
     display: flex;
 }
\ No newline at end of file