diff --git a/apps/docs/src/content/examples/counter.html b/apps/docs/src/content/examples/counter.html
index 74198db..a877776 100644
--- a/apps/docs/src/content/examples/counter.html
+++ b/apps/docs/src/content/examples/counter.html
@@ -16,7 +16,7 @@
 
 <body>
   <div data-type="html">
-    <x-counter initial="1" step="5">
+    <x-counter value="1" step="5">
       <div>
         <input data-ref="stepInput" type="range" min="1" max="50" value="5">
         <span>Step: <span data-ref="step">5</span></span>
@@ -31,7 +31,6 @@
 
   <script type="module" data-type="javascript">
     import { define } from 'nanotags';
-    import { atom } from 'nanostores';
 
     define('x-counter')
       .withRefs(({ one }) => ({
@@ -41,14 +40,12 @@
         increment: one('button'),
         count: one('span')
       }))
-      .withProps((p) => ({ initial: p.number(), step: p.number(5) }))
+      .withProps((p) => ({ value: p.number(), step: p.number(5) }))
       .setup((ctx) => {
-        const $count = atom(ctx.props.$initial.get());
-
         ctx.bind(ctx.props.$step, ctx.refs.stepInput);
-        ctx.on(ctx.refs.increment, 'click', () => $count.set($count.get() + ctx.props.$step.get()));
-        ctx.on(ctx.refs.decrement, 'click', () => $count.set($count.get() - ctx.props.$step.get()));
-        ctx.effect($count, (val) => {
+        ctx.on(ctx.refs.increment, 'click', () => ctx.props.$value.set(ctx.props.$value.get() + ctx.props.$step.get()));
+        ctx.on(ctx.refs.decrement, 'click', () => ctx.props.$value.set(ctx.props.$value.get() - ctx.props.$step.get()));
+        ctx.effect(ctx.props.$value, (val) => {
           ctx.refs.count.textContent = String(val);
           console.log('Count changed:', val);
         });
diff --git a/apps/docs/src/content/examples/tabs.html b/apps/docs/src/content/examples/tabs.html
index 4bf8d52..c76e70e 100644
--- a/apps/docs/src/content/examples/tabs.html
+++ b/apps/docs/src/content/examples/tabs.html
@@ -48,7 +48,6 @@ <h3>Setup</h3>
   <script type="module" data-type="javascript">
     import { define } from "nanotags";
     import { createContext } from "nanotags/context";
-    import { atom } from "nanostores";
     import { attachRovingFocus } from "attachRovingFocus.js";
 
     const tabsContext = createContext("tabs");
@@ -60,14 +59,13 @@ <h3>Setup</h3>
         tabs: r.many("[role=tab]")
       }))
       .setup((ctx) => {
-        const $active = atom(ctx.props.$active.get());
-
+        // ctx.props.$active is already a WritableAtom, so use it directly as state.
         attachRovingFocus(ctx, ctx.refs.tablist, ctx.refs.tabs, {
-          onFocus: (el) => $active.set(el.dataset.value),
+          onFocus: (el) => ctx.props.$active.set(el.dataset.value),
         });
 
-        ctx.on(ctx.refs.tabs, "click", (e) => $active.set(e.target.dataset.value));
-        ctx.effect($active, (active) => {
+        ctx.on(ctx.refs.tabs, "click", (e) => ctx.props.$active.set(e.target.dataset.value));
+        ctx.effect(ctx.props.$active, (active) => {
           ctx.refs.tabs.forEach((tab) => {
             const selected = tab.dataset.value === active;
             tab.setAttribute("aria-selected", String(selected));
@@ -75,7 +73,7 @@ <h3>Setup</h3>
           });
         });
 
-        tabsContext.provide(ctx, { $active });
+        tabsContext.provide(ctx, { $active: ctx.props.$active });
       });
 
     define("x-tab-panel")
