diff --git a/site/src/components/vanilla-hello-world.js b/site/src/components/vanilla-hello-world.js
index 12a1564..66ccfb8 100644
--- a/site/src/components/vanilla-hello-world.js
+++ b/site/src/components/vanilla-hello-world.js
@@ -5,9 +5,12 @@ class HelloWorld extends HTMLElement {
 
   connectedCallback() {
     let count = 0;
-    this.onclick = () => {
-      this.setAttribute("data-name", `Clicked ${++count}x`);
-    };
+
+    if (!('name' in this.dataset)) {
+      this.dataset.name = 'World'
+    }
+
+    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
   }
 
   attributeChangedCallback(property, previousValue, currentValue) {
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 572e0a1..f95dea7 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -34,7 +34,7 @@
         <code-block>npm create <strong style="color: var(--color-blue)">mcfly</strong>@latest</code-block>
         <p>
           Here's a sample interactive custom element:
-          <vanilla-hello-world data-name="McFly"></vanilla-hello-world>
+          <vanilla-hello-world></vanilla-hello-world>
         </p>
         <p>
           Start at the very basic of writing HTML files and enhance with
diff --git a/templates/basic/src/components/vanilla-hello-world.js b/templates/basic/src/components/vanilla-hello-world.js
index 0301bb4..66ccfb8 100644
--- a/templates/basic/src/components/vanilla-hello-world.js
+++ b/templates/basic/src/components/vanilla-hello-world.js
@@ -1,18 +1,21 @@
 class HelloWorld extends HTMLElement {
-    static get observedAttributes() {
-      return ["data-name"];
+  static get observedAttributes() {
+    return ["data-name"];
+  }
+
+  connectedCallback() {
+    let count = 0;
+
+    if (!('name' in this.dataset)) {
+      this.dataset.name = 'World'
     }
-  
-    connectedCallback() {
-      let count = 0;
-      this.onclick = () => {
-        this.setAttribute("data-name", `Clicked ${++count}x`);
-      };
+
+    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
+  }
+
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (property === "data-name" && previousValue !== currentValue) {
+      this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
     }
-  
-    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 553c430..a7ca67d 100644
--- a/templates/basic/src/pages/index.html
+++ b/templates/basic/src/pages/index.html
@@ -25,8 +25,7 @@
     <main>
       <h2>Welcome to {{ project.name }}</h2>
       <p>
-        Here's a vanilla custom element:
-        <vanilla-hello-world data-name="{{project.name}}" />
+        Here's a vanilla custom element: <vanilla-hello-world/>
       </p>
       <code-block language="js">
 class HelloWorld extends HTMLElement {