diff --git a/ghost/signup-form/README.md b/ghost/signup-form/README.md
index 3accb04260..93a8c8a244 100644
--- a/ghost/signup-form/README.md
+++ b/ghost/signup-form/README.md
@@ -11,7 +11,15 @@ Embed a Ghost signup form on any site.
 
 ### Running the development version
 
-Run `yarn dev` to start the development server to test/develop the form standalone. This will generate a demo site from the `index.html` file which renders the app and makes it available on http://localhost:5137
+Run `yarn dev` to start the development server to test/develop the form standalone. 
+- This will generate a demo site on http://localhost:6173
+- This will build and watch the production build and host it on http://localhost:6174/signup-form.min.js (different port!)
+
+### Using the UMD build during development
+
+Vite by default only supports HRM with an ESM output. But when loading a script on a site as a ESM module (`<script type="module" src="...">`), you don't have access to `document.currentScript` inside the script, which is required to determine the location to inject the iframe. In development mode we use a workaround for this to make the ESM HMR work. But this workaroudn is not suitable for production.
+
+To test the real production behaviour without this hack, you can use http://localhost:6173/preview.html. This HTML page will use `http://localhost:6174/signup-form.min.js` directly. 
 
 ## Develop
 
diff --git a/ghost/signup-form/index.html b/ghost/signup-form/index.html
index db6d7045d7..84b523a2aa 100644
--- a/ghost/signup-form/index.html
+++ b/ghost/signup-form/index.html
@@ -8,10 +8,13 @@
   </head>
   <body>
     <div id="demo-container">
+        <nav class="mode">
+            <a href="/" class="selected">Development build</a>
+            <a href="/preview.html">Production build</a>
+        </nav>
         <h1>Full signup form</h1>
         <p>
-            This is a live preview of the embeddable signup form<br>
-            It is currently connected to Ghost running at <code>%VITE_SITE_URL%</code>. Please duplicate <code>.env.development</code> as <code>.env.development.local</code> and modify it to change the site url locally (when you get an error when submitting the forms).
+            Currently connected to Ghost running at <code>%VITE_SITE_URL%</code>. Please duplicate <code>.env.development</code> as <code>.env.development.local</code> and modify it to change the site url locally (when you get an error when submitting the forms).
         </p>
 
         <!-- Because we need to use ESM modules during develoment, the src should be different to force reexecution of each script -->
diff --git a/ghost/signup-form/package.json b/ghost/signup-form/package.json
index e53ae013a6..38eafb42c2 100644
--- a/ghost/signup-form/package.json
+++ b/ghost/signup-form/package.json
@@ -17,8 +17,7 @@
       "registry": "https://registry.npmjs.org/"
     },
     "scripts": {
-      "dev": "vite",
-      "dev:preview": "concurrently \"vite preview\" \"vite build --watch\"",
+      "dev": "concurrently \"vite --port 6173\" \"vite preview -l silent\" \"vite build --watch\"",
       "build": "tsc && vite build",
       "lint": "yarn run lint:js",
       "lint:js": "eslint --ext .js,.ts,.cjs,.tsx --cache src test",
diff --git a/ghost/signup-form/preview.html b/ghost/signup-form/preview.html
new file mode 100644
index 0000000000..4613b28888
--- /dev/null
+++ b/ghost/signup-form/preview.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Signup Form</title>
+    <link rel="stylesheet" href="/src/styles/demo.css" />
+  </head>
+  <body>
+    <div id="demo-container">
+        <nav class="mode">
+            <a href="/">Development build</a>
+            <a href="/preview.html" class="selected">Production build</a>
+        </nav>
+        <h1>Full signup form</h1>
+        <p>
+            Currently connected to Ghost running at <code>%VITE_SITE_URL%</code>. Please duplicate <code>.env.development</code> as <code>.env.development.local</code> and modify it to change the site url locally (when you get an error when submitting the forms).
+        </p>
+
+        <!-- Because we need to use ESM modules during develoment, the src should be different to force reexecution of each script -->
+        <script
+            src="http://localhost:6174/signup-form.min.js"
+            data-title="My site name"
+            data-description="An independent publication about embeddable signup forms."
+            data-logo="https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png"
+            data-color="#4664dd"
+            data-site="%VITE_SITE_URL%"
+            data-labels="signup-form,with-logo"
+        ></script>
+
+        <hr>
+        <h1>Without logo</h1>
+        <script
+            src="http://localhost:6174/signup-form.min.js"
+            data-title="Site without logo"
+            data-description="An independent publication about embeddable signup forms."
+            data-color="#4664dd"
+            data-site="%VITE_SITE_URL%"
+            data-labels="signup-form,without-logo"
+        ></script>
+
+        <hr>
+        <h1>Minimal</h1>
+
+        <script
+            src="http://localhost:6174/signup-form.min.js"
+            data-color="#ff0095"
+            data-site="%VITE_SITE_URL%"
+            data-labels="signup-form,minimal"
+        ></script>
+
+        <hr>
+        <h1>With invalid configuration</h1>
+        <p>When you submit this one, it will throw an error.</p>
+
+        <script
+            src="http://localhost:6174/signup-form.min.js"
+            data-color="#ff0095"
+            data-site="https://invalid/"
+        ></script>
+    </div>
+  </body>
+</html>
diff --git a/ghost/signup-form/src/styles/demo.css b/ghost/signup-form/src/styles/demo.css
index 8eb6c8a52f..ad6d69d8f5 100644
--- a/ghost/signup-form/src/styles/demo.css
+++ b/ghost/signup-form/src/styles/demo.css
@@ -30,3 +30,17 @@ code {
     background: #eee;
     padding: 2px 4px;
 }
+
+nav.mode > a {
+    text-decoration: none;
+    color: black;
+    background: #eee;
+    padding: 5px 12px;
+    display: inline-block;
+    border-radius: 3px;
+}
+nav.mode > a.selected {
+    background: #ff0095;
+    color: white;
+    font-weight: bold;
+}
