diff --git a/src/demo/counter/button-counter.test.html b/src/demo/counter/button-counter.test.html
new file mode 100644
index 0000000..20c6226
--- /dev/null
+++ b/src/demo/counter/button-counter.test.html
@@ -0,0 +1,8 @@
+
+
+
+ `button-counter` tests
+
+
+
+
diff --git a/src/demo/counter/button-counter.test.ts b/src/demo/counter/button-counter.test.ts
new file mode 100644
index 0000000..f07bd66
--- /dev/null
+++ b/src/demo/counter/button-counter.test.ts
@@ -0,0 +1,51 @@
+import { parseHtml } from 'hydroactive/testing.js';
+import { ButtonCounter } from './button-counter.js';
+
+describe('button-counter', () => {
+ afterEach(() => {
+ for (const node of document.body.childNodes) node.remove();
+ });
+
+ function render({ count }: { count: number }) {
+ return parseHtml(ButtonCounter, `
+
+ The current count is: ${count}.
+
+
+
+ `);
+ }
+
+ describe('ButtonCounter', () => {
+ it('does not re-render on hydration', async () => {
+ const el = render({ count: 5 });
+ document.body.appendChild(el);
+
+ await el.stable();
+
+ expect(el.querySelector('span')!.textContent).toBe('5');
+ });
+
+ it('decrements on click', async () => {
+ const el = render({ count: 5 });
+ document.body.appendChild(el);
+
+ (el.querySelector('#decrement')! as HTMLElement).click();
+
+ await el.stable();
+
+ expect(el.querySelector('span')!.textContent).toBe('4');
+ });
+
+ it('increments on click', async () => {
+ const el = render({ count: 5 });
+ document.body.appendChild(el);
+
+ (el.querySelector('#increment')! as HTMLElement).click();
+
+ await el.stable();
+
+ expect(el.querySelector('span')!.textContent).toBe('6');
+ });
+ });
+});
diff --git a/src/demo/counter/button-counter.ts b/src/demo/counter/button-counter.ts
new file mode 100644
index 0000000..2daa049
--- /dev/null
+++ b/src/demo/counter/button-counter.ts
@@ -0,0 +1,17 @@
+import { defineComponent } from 'hydroactive';
+
+/**
+ * A counter which increments and decrements the count based on button clicks.
+ */
+export const ButtonCounter = defineComponent('button-counter', (comp) => {
+ const count = comp.live('span', Number);
+
+ comp.listen('#decrement', 'click', () => { count.set(count() - 1); });
+ comp.listen('#increment', 'click', () => { count.set(count() + 1); });
+});
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'button-counter': InstanceType;
+ }
+}
diff --git a/src/demo/counter/index.html b/src/demo/counter/index.html
index bbbe640..a9e0d42 100644
--- a/src/demo/counter/index.html
+++ b/src/demo/counter/index.html
@@ -25,5 +25,15 @@ Auto Counter
+
+
+ Button Counter
+
+ The current count is: 10.
+
+
+
+
+