diff --git a/index.html b/index.html
index d361c2f..00cdd51 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,9 @@
     <script type="importmap">
       {
         "imports": {
+          "@std/assert/": "https://esm.sh/jsr/@std/assert/",
           "@f-stack/functorial": "./build/packages/functorial/src/reactive.js",
-          "@f-stack/reflow": "./packages/reflow/src/html.js"
+          "@f-stack/reflow": "./build/packages/reflow/src/mod.js"
         }
       }
     </script>
diff --git a/playground/pages/sinks/Attach.ts b/playground/pages/sinks/Attach.ts
index e96f705..412ffb1 100644
--- a/playground/pages/sinks/Attach.ts
+++ b/playground/pages/sinks/Attach.ts
@@ -1,65 +1,48 @@
-import { listen, reactive } from "@f-stack/functorial";
-import { attach, attr, html, on, show } from "@f-stack/reflow";
+import { reactive } from "@f-stack/functorial";
+import { attach, attr, component, html, on, show } from "@f-stack/reflow";
 
 export const AttachPage = () => {
-  const form = reactive({ value: "Bob" });
-  const color = reactive({ value: "#40E0D0" });
-  const display = reactive({ value: true });
+  const state = reactive({ color: "#40E0D0", show: true });
 
   return html`
-    <form>
-      <label>username:
-        <input type="text" ${attach((i: HTMLInputElement) => {
-          i.defaultValue = form.value;
-        })} ${on<HTMLInputElement>({
-          input: function () {
-            form.value = this.value;
-          },
-        })}>
-      </label>
-      <button type="reset">Reset</button>
-    </form>
-
     <div>
       <input type="color" ${attr({
-        get value() {
-          return color.value;
-        },
+        value: state.color,
       })} ${on<HTMLInputElement>({
         input: function () {
-          color.value = this.value;
+          state.color = this.value;
         },
       })}>
-      <button ${on({
-        click: () => {
-          display.value = !display.value;
-        },
-      })}>Show</button>
+      <button ${on({ click: () => state.show = !state.show })}>Toggle</button>
     </div>
 
-    ${show(() => display.value, () =>
-      html`
-        <canvas width="300" height="300" ${attach(
-          (canvas: HTMLCanvasElement) => {
-            const context = canvas.getContext("2d");
+    ${show(
+      () => state.show,
+      component(function () {
+        return html`
+          <canvas width="300" height="300" ${attach(
+            (canvas: HTMLCanvasElement) => {
+              const context = canvas.getContext("2d");
 
-            if (context) {
-              const draw = (color: string) => {
-                context.fillStyle = color;
-                context.fillRect(0, 0, 200, 200);
-              };
+              if (context) {
+                const draw = (color: string) => {
+                  context.fillStyle = color;
+                  context.fillRect(0, 0, 200, 200);
+                };
 
-              draw(color.value);
+                draw(state.color);
 
-              listen(color, (e) => {
-                console.log(e);
-                if (e.type !== "update") return;
-                draw(e.newValue);
-              });
-            }
-          },
-        )}>Enable JS</canvas>
-      `)}
+                this.listen(state, (e) => {
+                  console.log(e);
+                  if (e.type !== "update") return;
+                  draw(e.newValue);
+                });
+              }
+            },
+          )}>Enable JS</canvas>
+        `;
+      }),
+    )}
 
     <style>
     html { scrollbar-gutter: stable; }
diff --git a/playground/pages/sinks/Attr.ts b/playground/pages/sinks/Attr.ts
index 7fd2464..f630ef7 100644
--- a/playground/pages/sinks/Attr.ts
+++ b/playground/pages/sinks/Attr.ts
@@ -11,7 +11,7 @@ export const Attr = () => {
       return disabled.value;
     },
   });
-  const input = reactive({ text: "hello", number: 10 });
+  const user = reactive({ name: "Bob" });
 
   return html`
     <p>
@@ -48,26 +48,18 @@ export const Attr = () => {
         },
       })}>Remove disabled attribute</button>
     </p>
-    <h2>Two-way bindings</h2>
-    <div>
-      <input type="text" ${attr({
-        get value() {
-          return input.text;
-        },
-      })} ${on<HTMLInputElement>({
-        input: function () {
-          input.text = this.value;
-        },
-      })}>
-      <input type="number" ${attr({
-        get value() {
-          return input.number;
-        },
-      })} ${on<HTMLInputElement>({
-        input: function () {
-          input.number = this.valueAsNumber;
-        },
-      })}>
-    </div>
+    <h2>Reset values</h2>
+    <form>
+      <label>username:
+        <input type="text" ${attr({
+          value: user.name,
+        })} ${on<HTMLInputElement>({
+          input: function () {
+            user.name = this.value;
+          },
+        })}>
+      </label>
+      <button type="reset">Reset</button>
+    </form>
   `;
 };