diff --git a/assets/first-element.jpg b/assets/first-element.jpg
new file mode 100644
index 000000000..e1fffa09c
Binary files /dev/null and b/assets/first-element.jpg differ
diff --git a/docs/docs.md b/docs/docs.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/docs/main-concepts.cn.md b/docs/main-concepts.cn.md
new file mode 100644
index 000000000..fe157e850
--- /dev/null
+++ b/docs/main-concepts.cn.md
@@ -0,0 +1,128 @@
+## Omi Docs
+
+- [My First Element](#my-first-element)
+- [Props](#props)
+- [Event](#event)
+- [Custom Event](#custom-event)
+- [Ref](#ref)
+
+### My First Element
+
+```js
+import { WeElement, tag, render } from 'omi'
+
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    render() {
+        return (
+            <h1>Hello, world!</h1>
+        )
+    }
+}
+
+render(<my-first-element></my-first-element>, 'body')
+```
+
+在 HTML 开发者工具里看看渲染得到的结构:
+
+![fe](../assets/first-element.jpg)
+
+除了渲染到 body，你可以在其他任意自定义元素中使用 `my-first-element`。
+
+
+### Props
+
+```js
+import { WeElement, tag, render } from 'omi'
+
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    render(props) {
+        return (
+            <h1>Hello, {props.name}!</h1>
+        )
+    }
+}
+
+render(<my-first-element name="world"></my-first-element>, 'body')
+```
+
+你也可以传任意类型的数据给 props:
+
+```js
+import { WeElement, tag, render } from 'omi'
+
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    render(props) {
+        return (
+            <h1>Hello, {props.myObj.name}!</h1>
+        )
+    }
+}
+
+render(<my-first-element my-obj={{ name: 'world' }}></my-first-element>, 'body')
+```
+
+`my-obj` 将映射到 myObj，驼峰的方式。
+
+
+### Event
+
+```js
+class MyFirstElement extends WeElement {
+    onClick = (evt) => {
+        alert('Hello Omi!')
+    }
+
+    render() {
+        return (
+            <h1 onClick={this.onClick}>Hello, wrold!</h1>
+        )
+    }
+}
+```
+
+### Custom Event
+
+```js
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    onClick = (evt) => {
+        this.fire('myevent', { name: 'abc' })
+    }
+
+    render(props) {
+        return (
+            <h1 onClick={this.onClick}>Hello, world!</h1>
+        )
+    }
+}
+
+render(<my-first-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-first-element>, 'body')
+```
+
+Tirgger custom event by `this.fire` and get the data by  `evt.detail`. 
+
+### Ref
+
+```js
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    onClick = (evt) => {
+        console.log(this.h1)
+    }
+
+    render(props) {
+        return (
+            <div>
+                <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>
+            </div>
+        )
+    }
+}
+
+render(<my-first-element></my-first-element>, 'body')
+```
+
+Get the element by `ref={e => { this.anyNameYouWant = e }}`
\ No newline at end of file
diff --git a/docs/main-concepts.md b/docs/main-concepts.md
new file mode 100644
index 000000000..5f6b85502
--- /dev/null
+++ b/docs/main-concepts.md
@@ -0,0 +1,142 @@
+## Omi Docs
+
+- [My First Element](#my-first-element)
+- [Props](#props)
+- [Event](#event)
+- [Custom Event](#custom-event)
+- [Ref](#ref)
+
+### My First Element
+
+```js
+import { WeElement, tag, render } from 'omi'
+
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    render() {
+        return (
+            <h1>Hello, world!</h1>
+        )
+    }
+}
+
+render(<my-first-element></my-first-element>, 'body')
+```
+
+Look at the rendering structure in the HTML developer tool:
+
+![fe](../assets/first-element.jpg)
+
+You can also use `my-first-element` in any other custom element. Such as:
+
+```js
+import { WeElement, tag, render } from 'omi'
+import './my-first-element'
+
+@tag('other-element')
+class OtherElement extends WeElement {
+    render() {
+        return (
+            <div>
+                <my-first-element></my-first-element>
+            </div>
+        )
+    }
+}
+```
+
+### Props
+
+```js
+import { WeElement, tag, render } from 'omi'
+
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    render(props) {
+        return (
+            <h1>Hello, {props.name}!</h1>
+        )
+    }
+}
+
+render(<my-first-element name="world"></my-first-element>, 'body')
+```
+
+You can also transmit any type of data to props:
+
+```js
+import { WeElement, tag, render } from 'omi'
+
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    render(props) {
+        return (
+            <h1>Hello, {props.myObj.name}!</h1>
+        )
+    }
+}
+
+render(<my-first-element my-obj={{ name: 'world' }}></my-first-element>, 'body')
+```
+
+The `my-obj` will map to myObj with camel-case.
+
+### Event
+
+```js
+class MyFirstElement extends WeElement {
+    onClick = (evt) => {
+        alert('Hello Omi!')
+    }
+
+    render() {
+        return (
+            <h1 onClick={this.onClick}>Hello, wrold!</h1>
+        )
+    }
+}
+```
+
+### Custom Event
+
+```js
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    onClick = (evt) => {
+        this.fire('myevent', { name: 'abc' })
+    }
+
+    render(props) {
+        return (
+            <h1 onClick={this.onClick}>Hello, world!</h1>
+        )
+    }
+}
+
+render(<my-first-element onMyEvent={(evt) => { alert(evt.detail.name) }}></my-first-element>, 'body')
+```
+
+Tirgger custom event by `this.fire` and get the data by  `evt.detail`. 
+
+### Ref
+
+```js
+@tag('my-first-element')
+class MyFirstElement extends WeElement {
+    onClick = (evt) => {
+        console.log(this.h1)
+    }
+
+    render(props) {
+        return (
+            <div>
+                <h1 ref={e => { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>
+            </div>
+        )
+    }
+}
+
+render(<my-first-element></my-first-element>, 'body')
+```
+
+Get the element by `ref={e => { this.anyNameYouWant = e }}`
\ No newline at end of file