diff --git a/example/app.js b/example/app.js
index 8aedcba8..af74dfec 100644
--- a/example/app.js
+++ b/example/app.js
@@ -1,5 +1,5 @@
 import { one, createStore, html } from '../dist/one'
-import { TodoList } from './components'
+import { TodoList, Counter } from './components'
 
 createStore(function () {
   return {
@@ -9,10 +9,11 @@ createStore(function () {
 
 one({
   name: 'app',
-  components: [TodoList],
+  components: [TodoList, Counter],
   template: html`
     <div>
       <todo-list></todo-list>
+      <counter></counter>
     </div>
   `,
 })
diff --git a/example/components/counter/Counter.js b/example/components/counter/Counter.js
new file mode 100644
index 00000000..d28dbf7d
--- /dev/null
+++ b/example/components/counter/Counter.js
@@ -0,0 +1,21 @@
+import { html } from '../../../lib/one'
+
+const Counter = {
+  name: 'counter',
+  template: html`
+    <div>
+      <button id="dec">-</button>
+      <span o-text="count"></span>
+      <button id="inc">+</button>
+    </div>
+  `,
+  state: {
+    count: 0,
+  },
+  setup({ query }) {
+    query('#dec').on('click', ({ state }) => state.count--)
+    query('#inc').on('click', ({ state }) => state.count++)
+  }
+}
+
+export { Counter }
diff --git a/example/components/counter/index.js b/example/components/counter/index.js
new file mode 100644
index 00000000..f6f407e4
--- /dev/null
+++ b/example/components/counter/index.js
@@ -0,0 +1,3 @@
+import { Counter } from './Counter';
+
+export { Counter }
diff --git a/example/components/index.js b/example/components/index.js
index ecc5fa86..9218e2ff 100644
--- a/example/components/index.js
+++ b/example/components/index.js
@@ -1,5 +1,7 @@
+import { Counter } from './counter'
 import { TodoList } from './todo'
 
 export {
+  Counter,
   TodoList,
-}
\ No newline at end of file
+}