diff --git a/paybutton/dev/demo/index.html b/paybutton/dev/demo/index.html
index 0cad42fe..320dc031 100644
--- a/paybutton/dev/demo/index.html
+++ b/paybutton/dev/demo/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html [object Object]>
+<html>
 
 <head>
   <meta charset="utf-8" />
@@ -7,73 +7,19 @@
   <style>
     body {
       padding: auto;
-    }
-
-    .buttons-section {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-      gap: 20px;
-      width: 100%;
-      padding: 5px;
-      align-items: center;
-    }
-
-    .buttons-section div {
-      width: 100%;
-    }
-
-    .widgets-section {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-      gap: 20px;
-      width: 100%;
-      padding: 10px;
-      align-items: center;
-    }
-
-    .btn {
-      display: flex;
-      margin: 10px;
-    }
-
-    .btn button {
-      text-transform: none;
-      color: #fff;
-      /* Bright white text color for better contrast */
-      border: 1px solid rgb(58, 48, 166);
-      /* Vibrant purple border */
-      margin: auto !important;
-      padding: 0.618em 1.618em !important;
-      font-size: 1em !important;
-      min-width: 14em !important;
-      background: #518efe;
-      transition: background-position 0.8s ease 0s, color 0.15s ease 0s,
-        border-color 0.4s ease 0s;
-      /* Smooth transition for background and border color */
-      border-radius: 10px !important;
-    }
-
-    .btn button:hover {
-      cursor: pointer !important;
-      background: #518efeb7;
-      color: #101563;
-      /* Change text color on hover for a cool effect */
-    }
-
-    .btn.purple button {
-      border: 2px solid #7a33ff;
-      /* Vibrant purple border */
-      background: #9a55ff;
-    }
-
-    .btn.purple button:hover {
-      background: #ebe0fb;
-      color: #5805f3;/
+      font-family: Arial, sans-serif;
     }
   </style>
+  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
 <body>
+  <div class="navbar">
+    <a href="./index.html#buttons-section">Buttons</a>
+    <a href="./index.html#widgets-section">Widgets</a>
+    <a href="./paybutton-generator.html">Generator</a>
+  </div>
+
   <script src="./paybutton.js"></script>
 
   <div class="buttons-section">
@@ -131,7 +77,7 @@
     </div>
   </div>
   <br />
-  <div class="widgets-section">
+  <div class="widgets-section" id="widgets-section">
     <div>
       <div id="the_widget" class="paybutton-widget" to="ecash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7quss2vxek"
         goal-amount="500000" hover-text="BLARG" amount="1000.69" success-text="WOW!" text="Purchase"
@@ -160,14 +106,15 @@
       <br />
     </div>
   </div>
+
   <script>
     function mySuccessFunction(tx) {
-      console.log(tx)
+      console.log({ tx })
       console.log('Success')
     }
 
     function myTransactionFunction(tx) {
-      console.log(tx)
+      console.log({ tx })
       console.log('Transaction')
     }
 
diff --git a/paybutton/dev/demo/paybutton-generator.html b/paybutton/dev/demo/paybutton-generator.html
new file mode 100644
index 00000000..551b57fa
--- /dev/null
+++ b/paybutton/dev/demo/paybutton-generator.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Paybutton Generator Test</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <style>
+       body {
+        padding: auto;
+        font-family: Arial, sans-serif;
+      }
+      input,
+      button {
+        padding: 8px;
+        border-radius: 6px !important;
+        border: 1px solid #ccc;
+        color: #767676;
+      }
+
+      button {
+        background-color: #2186fa;
+        color: white;
+        border: none;
+        cursor: pointer;
+        margin-top: 35px;
+        float: right;
+      }
+
+      button:hover {
+        background-color: #767676;
+      }
+
+      #playground {
+        display: flex;
+        flex-grow: 1;
+        justify-content: space-around;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="navbar">
+      <a href="./index.html#buttons-section">Buttons</a>
+      <a href="./index.html#widgets-section">Widgets</a>
+      <a href="./paybutton-generator.html#playground">Generator</a>
+    </div>
+    <script src="https://unpkg.com/vue@3"></script>
+
+    <script src="./paybutton.js"></script>
+
+    <div id="playground">
+      <form @submit.prevent="updateProps" class="card">
+        <div>
+          <div class="form-input">
+            <label for="to">To:</label>
+            <input id="to" v-model="paybuttonProps.to" type="text">
+          </div>
+          <div style="display: flex; justify-content: space-between; gap:10px">
+            <div class="form-input">
+              <label for="amount">Amount:</label>
+              <input id="amount" v-model.number="paybuttonProps.amount" type="number" step="0.01">
+            </div>
+            <div class="form-input">
+              <label for="goalAmount">Goal Amount:</label>
+              <input id="goalAmount" v-model.number="paybuttonProps.goalAmount" type="number">
+            </div>
+            <div class="form-input">
+              <label for="currency">Currency:</label>
+              <input id="currency" v-model.number="paybuttonProps.currency" type="text">
+            </div>
+          </div>
+          <div style="display: flex; justify-content: space-between; gap:10px">
+            <div class="form-input" style="flex-basis: 80%;">
+              <label for="text">Text:</label>
+              <input id="text" v-model="paybuttonProps.text" type="text">
+            </div>
+            <div class="form-input">
+              <label for="successText">Success Text:</label>
+              <input id="successText" v-model="paybuttonProps.successText" type="text">
+            </div>
+          </div>
+          <div class="form-input">
+            <label for="hoverText">Hover Text:</label>
+            <input id="hoverText" v-model="paybuttonProps.hoverText" type="text">
+          </div>
+          <div class="form-input">
+            <label for="theme">Theme:</label>
+            <input id="theme" style="height: 100px;" v-model="paybuttonProps.theme" type="text">
+          </div>
+          <div class="form-input">
+            <label for="animation">Animation:</label>
+            <input id="animation" v-model="paybuttonProps.animation" type="text">
+          </div>
+        </div>
+        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+          <div>
+            <div class="form-input toggle">
+              <input type="checkbox" id="editable" v-model="paybuttonProps.editable" true-value="true"
+                false-value="false">
+              <label for="editable">Editable</label>
+            </div>
+            <div class="form-input toggle">
+              <input type="checkbox" id="disable-payment-id" v-model="paybuttonProps.disablePaymentId" true-value="true"
+                false-value="false">
+              <label for="disable-payment-id">Disable PaymentId</label>
+            </div>
+            <div class="form-input toggle">
+              <input type="checkbox" id="random-satoshis" v-model="paybuttonProps.randomSatoshis" true-value="true"
+                false-value="false">
+              <label for="random-satoshis">Random Satoshis</label>
+            </div>
+          </div>
+          <div>
+            <div class="form-input toggle">
+              <input type="checkbox" id="hide-toasts" v-model="paybuttonProps.hideToasts" true-value="true"
+                false-value="false">
+              <label for="hide-toasts">Hide Toasts</label>
+            </div>
+            <div class="form-input toggle">
+              <input type="checkbox" id="disable-enforce-focus" v-model="paybuttonProps.disableEnforceFocus"
+                true-value="true" false-value="false">
+              <label for="disable-enforce-focus">Disable enforce focus</label>
+            </div>
+            <div class="form-input toggle">
+              <input type="checkbox" id="disabled" v-model="paybuttonProps.disabled" true-value="1" false-value="0">
+              <label for="disabled">Disabled</label>
+            </div>
+          </div>
+        </div>
+        <div style="display: flex;
+        justify-content: right;">
+          <button type="submit">Generate</button>
+        </div>
+          
+      </form>
+      <div class="card" style="display: flex; flex-basis: 70%; justify-content: center; align-items: center;">
+        <div id="paybutton-generator" class="paybutton"
+          :to="paybuttonProps.to"
+          :amount="paybuttonProps.amount"
+          :goal-amount="paybuttonProps.goalAmount"
+          :currency="paybuttonProps.currency"
+          :text="paybuttonProps.text"
+          :hover-text="paybuttonProps.hoverText"
+          :success-text="paybuttonProps.successText"
+          :theme="paybuttonProps.theme"
+          :animation="paybuttonProps.animation"
+          :editable="paybuttonProps.editable"
+          :disable-payment-id="paybuttonProps.disablePaymentId"
+          :random-satoshis="paybuttonProps.randomSatoshis"
+          :hide-toasts="paybuttonProps.hideToasts"
+          :disable-enforce-focus="paybuttonProps.disableEnforceFocus"
+          :on-success="mySuccessFuction"
+          :on-transaction="myTransactionFuction">
+        </div>
+      </div>
+    </div>
+
+    <script>
+      const { createApp, reactive } = Vue;
+      const mySuccessFuction = (tx) => (console.log("Success", {tx}))
+      const myTransactionFuction = (tx) => (console.log("Transaction", {tx}))
+      createApp({
+        setup() {
+          //todo - add the missing props once it is fixed
+          const paybuttonProps = reactive({
+            to: "ecash:qrmm7edwuj4jf7tnvygjyztyy0a0qxvl7quss2vxek",
+            amount: undefined,
+            goalAmount: undefined,
+            currency: undefined,
+            text: "Donate",
+            hoverText: undefined,
+            successText: "Payment Successful!",
+            theme: `{"palette":{"primary": "#9d00ff","secondary": "#FFF", "tertiary": "#000"}}`,
+            animation: "slide",
+            editable: true,
+            disablePaymentId: false,
+            randomSatoshis: false,
+            hideToasts: false,
+            disableEnforceFocus: false,
+            onSuccess: mySuccessFuction,
+            onTransaction: myTransactionFuction
+          });
+
+          const updateProps = () => {
+            PayButton.render(document.getElementById("paybutton-generator"), { ...paybuttonProps });
+          };
+
+          return { paybuttonProps, updateProps };
+        }
+      }).mount('#playground');
+    </script>
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/paybutton/dev/demo/style.css b/paybutton/dev/demo/style.css
new file mode 100644
index 00000000..8a3d022a
--- /dev/null
+++ b/paybutton/dev/demo/style.css
@@ -0,0 +1,130 @@
+.navbar {
+  color: #333333;
+  display: flex;
+  justify-content: center;
+  padding: 10px 20px;
+}
+.navbar a {
+  color: #333333;
+  text-decoration: none;
+  padding: 10px;
+}
+.buttons-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 20px;
+  padding: 50px;
+  align-items: center;
+}
+.widgets-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: 40px;
+  padding: 50px;
+  align-items: center;
+}
+.btn {
+  padding: 20px;
+  display: flex;
+}
+.btn button {
+  text-transform: none;
+  color: #fff;
+  border: 1px solid rgb(58, 48, 166);
+  margin: auto !important;
+  padding: 0.618em 1.618em !important;
+  min-width: 14em !important;
+  background: #518efe;
+  transition: background-position 0.8s ease 0s, color 0.15s ease 0s,
+    border-color 0.4s ease 0s;
+  border-radius: 10px !important;
+}
+.btn button:hover {
+  cursor: pointer !important;
+  background: #518efeb7;
+  color: #101563;
+}
+.btn.purple button {
+  border: 2px solid #7a33ff;
+  background: #9a55ff;
+}
+.btn.purple button:hover {
+  background: #ebe0fb;
+  color: #5805f3;
+}
+
+.toggle {
+    margin-bottom: 0 !important;
+}
+.toggle input[type="checkbox"] {
+    visibility: hidden;
+}
+
+.toggle label {
+    display: block;
+    cursor: pointer;
+    position: relative;
+    padding-left: 40px;
+    font-size: 12px;
+}
+
+.toggle label::before, .toggle label::after {
+    content: "";
+    position: absolute;
+    transition: all 0.3s ease;
+}
+
+.toggle label::before {
+    width: 34px;
+    height: 20px;
+    background-color: #e7e5e5;
+    border-radius: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+}
+
+.toggle label::after {
+    width: 20px;
+    height: 20px;
+    background-color: #c3c2c2;
+    border-radius: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 2px;
+    box-shadow: 0 0 2px rgba(0,0,0,0.4);
+}
+
+.toggle input[type="checkbox"]:checked + label::before {
+    background-color: #ccc;
+}
+
+.toggle input[type="checkbox"]:checked + label::after {
+    left: 12px;
+    background-color: #2186fa ;
+}
+
+form {
+    width: 300px;
+}
+.card { 
+    border: 1px solid #ccc;
+    padding: 20px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.169);
+    border-radius: 10px;
+    min-height: 650px;
+    min-width: 310px;
+    height: 100%;
+    align-self: center;
+    margin: 10px;
+}
+.form-input {
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    min-width: 25px;
+    font-size: 12px;
+}
+label {
+    padding-bottom: 6px;
+}
\ No newline at end of file
