diff --git a/templates/basic/src/components/vanilla-hello-world.js b/templates/basic/src/components/vanilla-hello-world.js
new file mode 100644
index 0000000..0301bb4
--- /dev/null
+++ b/templates/basic/src/components/vanilla-hello-world.js
@@ -0,0 +1,18 @@
+class HelloWorld extends HTMLElement {
+    static get observedAttributes() {
+      return ["data-name"];
+    }
+  
+    connectedCallback() {
+      let count = 0;
+      this.onclick = () => {
+        this.setAttribute("data-name", `Clicked ${++count}x`);
+      };
+    }
+  
+    attributeChangedCallback(property, previousValue, currentValue) {
+      if (property === "data-name" && previousValue !== currentValue) {
+        this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
+      }
+    }
+  }
\ No newline at end of file
diff --git a/templates/basic/src/pages/index.html b/templates/basic/src/pages/index.html
index a316af5..14132c0 100644
--- a/templates/basic/src/pages/index.html
+++ b/templates/basic/src/pages/index.html
@@ -22,7 +22,7 @@
       <h2>Welcome to {{ name }}</h2>
       <p>
         Here's a vanilla custom element:
-        <my-hello-world data-name="{{name}}" />
+        <vanilla-hello-world data-name="{{name}}" />
       </p>
       <code-block language="js">
 class HelloWorld extends HTMLElement {