diff --git a/docs/examples/dom/index.js b/docs/examples/dom/index.js
new file mode 100644
index 0000000..6686b44
--- /dev/null
+++ b/docs/examples/dom/index.js
@@ -0,0 +1,15 @@
+Object.assign(globalThis.document.body, {innerHTML: `
+  Index:
+  <input type='number' id='i'>
+  <br>
+  Fibonacci number:
+  <span id='result'></span>
+`})
+
+const fib = (i) => {
+  return i*10
+}
+
+globalThis.document.getElementById('i').addEventListener('change', e => {
+  Object.assign(globalThis.result, {innerText: fib(e.target.value)})
+})
\ No newline at end of file
diff --git a/docs/examples/preact/index.js b/docs/examples/preact/index.js
index 5a9ec7d..dce894d 100644
--- a/docs/examples/preact/index.js
+++ b/docs/examples/preact/index.js
@@ -1,3 +1,13 @@
+const fib = n => {
+  if(n == 0) {
+    return 0
+  }
+  if(n == 1) {
+    return 1
+  }
+  return fib(n - 1) + fib(n - 2)
+}
+    
 /* external */
 import {h, render} from 'https://unpkg.com/preact?module';
 
@@ -5,18 +15,23 @@ import {h, render} from 'https://unpkg.com/preact?module';
 import {Stateful} from './stateful.js'
 
 const Counter = Stateful({
-  getInitialState: () => ({counter: 0}),
+  getInitialState: () => ({index: 0}),
 
   handlers: {
-    inc: ({counter}) => ({counter: counter + 1}),
-    dec: ({counter}) => ({counter: counter - 1}),
+    prev: ({index}) => ({index: index - 1}),
+    next: ({index}) => ({index: index + 1}),
   },
   
   render: (props, state, handlers) => 
     h('div', null,
-      h('span', null, state.counter),
-      h('button', {onClick: handlers.inc}, 'Increment'),
-      h('button', {onClick: handlers.dec}, 'Decrement'),
+      h('h1', null, 
+        'nth Fibonacci number is ', 
+        fib(state.index),
+        ' for n = ', 
+        state.index
+      ),
+      h('button', {onClick: handlers.prev}, 'Previous'), ' ',
+      h('button', {onClick: handlers.next}, 'Next'), ' ',
     )
 })