diff --git a/example/components/todo/item/index.js b/example/components/todo/item/index.js
index d563978e..2633d0e2 100644
--- a/example/components/todo/item/index.js
+++ b/example/components/todo/item/index.js
@@ -5,15 +5,37 @@ const TodoItem = {
   template: html`
     <li>
       <span o-text="text"></span>
-      <button>Remove</button>
+      <span id="done">Done</span>
+      <div>
+        <button id="toggle">Toggle</button>
+        <button id="remove">Remove</button>
+      </div>
     </li>
   `,
   setup({ query, state, parent }) {
-    const remove = query('button')
+    const remove = query('#remove')
+    const toggle = query('#toggle')
+    const done = query('#done')
+
+    const {show, hide} = done.if({ initial: state.done })
+
+    function toggleDone() {
+      if (state.done) {
+        show()
+      } else {
+        hide()
+      }
+    }
 
     remove.on('click', function () {
       parent.events.delete(state.id)
     })
+
+    toggle.on('click', function () {
+      state.done = !state.done
+
+      toggleDone()
+    })
   }
 }
 
diff --git a/example/components/todo/list/index.js b/example/components/todo/list/index.js
index 53d0435c..9eb0c0ea 100644
--- a/example/components/todo/list/index.js
+++ b/example/components/todo/list/index.js
@@ -5,9 +5,9 @@ const TodoList = {
   name: 'todo-list',
   state: {
     items: [
-      { id: 1, text: 'Item #1' },
-      { id: 2, text: 'Item #2' },
-      { id: 3, text: 'Item #3' },
+      { id: 1, text: 'Item #1', done: false },
+      { id: 2, text: 'Item #2', done: false },
+      { id: 3, text: 'Item #3', done: false },
     ]
   },
   components: [TodoItem],