diff --git a/index.json b/index.json
index f9679b5..2351001 100644
--- a/index.json
+++ b/index.json
@@ -233,6 +233,15 @@
     "react": false,
     "dependencies": []
   },
+  "painter": {
+    "version": "0.1.0",
+    "style": true,
+    "icon": false,
+    "test": true,
+    "install": false,
+    "react": false,
+    "dependencies": []
+  },
   "performance-monitor": {
     "react": true,
     "version": "0.4.1",
diff --git a/src/painter/README.md b/src/painter/README.md
new file mode 100644
index 0000000..5cd4bae
--- /dev/null
+++ b/src/painter/README.md
@@ -0,0 +1,34 @@
+# Luna Painter
+
+Simple drawing tool.
+
+## Demo
+
+https://luna.liriliri.io/?path=/story/painter
+
+## Install
+
+Add the following script and style to your page.
+
+```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-painter/luna-painter.css" />
+<script src="//cdn.jsdelivr.net/npm/luna-painter/luna-painter.js"></script>
+```
+
+You can also get it on npm.
+
+```bash
+npm install luna-painter --save
+```
+
+```javascript
+import 'luna-painter/luna-painter.css'
+import LunaPainter from 'luna-painter'
+```
+
+## Usage
+
+```javascript
+const container = document.getElementById('container')
+const painer = new LunaPainter(container)
+```
diff --git a/src/painter/index.ts b/src/painter/index.ts
new file mode 100644
index 0000000..f183e18
--- /dev/null
+++ b/src/painter/index.ts
@@ -0,0 +1,21 @@
+import Component, { IComponentOptions } from '../share/Component'
+
+export interface IOptions extends IComponentOptions {
+  width?: number
+  height?: number
+}
+
+/**
+ * Simple drawing tool.
+ *
+ * @example
+ * const container = document.getElementById('container')
+ * const painer = new LunaPainter(container)
+ */
+export default class Painter extends Component<IOptions> {
+  constructor(container: HTMLElement, options: IOptions) {
+    super(container, { compName: 'painer' }, options)
+
+    this.initOptions(options, {})
+  }
+}
diff --git a/src/painter/package.json b/src/painter/package.json
new file mode 100644
index 0000000..58f6bff
--- /dev/null
+++ b/src/painter/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "painter",
+  "version": "0.1.0",
+  "description": "Simple drawing tool"
+}
diff --git a/src/painter/story.js b/src/painter/story.js
new file mode 100644
index 0000000..6b12546
--- /dev/null
+++ b/src/painter/story.js
@@ -0,0 +1,21 @@
+import 'luna-painter'
+import Painter from 'luna-painter.js'
+import story from '../share/story'
+import readme from './README.md'
+
+const def = story(
+  'painter',
+  (container) => {
+    const painter = new Painter(container)
+
+    return painter
+  },
+  {
+    readme,
+    source: __STORY__,
+  }
+)
+
+export default def
+
+export const { painter } = def
diff --git a/src/painter/style.scss b/src/painter/style.scss
new file mode 100644
index 0000000..e69de29
diff --git a/tsconfig.json b/tsconfig.json
index fe0994f..ce13884 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -54,7 +54,8 @@
       "luna-tag-input": ["src/tag-input/index"],
       "luna-qrcode-generator": ["src/qrcode-generator/index"],
       "luna-toolbar": ["src/toolbar/index"],
-      "luna-image-viewer": ["src/image-viewer/index"]
+      "luna-image-viewer": ["src/image-viewer/index"],
+      "luna-painter": ["src/painter/index"]
     }
   }
 }