diff --git a/v3/internal/runtime/desktop/@wailsio/runtime/package.json b/v3/internal/runtime/desktop/@wailsio/runtime/package.json
index 9ca0163ce..06cc351e4 100644
--- a/v3/internal/runtime/desktop/@wailsio/runtime/package.json
+++ b/v3/internal/runtime/desktop/@wailsio/runtime/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wailsio/runtime",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.12",
   "description": "Wails Runtime",
   "main": "src/index.js",
   "types": "types/index.d.ts",
diff --git a/v3/internal/runtime/desktop/@wailsio/runtime/src/index.js b/v3/internal/runtime/desktop/@wailsio/runtime/src/index.js
index 1058d68d0..a6e4910fe 100644
--- a/v3/internal/runtime/desktop/@wailsio/runtime/src/index.js
+++ b/v3/internal/runtime/desktop/@wailsio/runtime/src/index.js
@@ -10,7 +10,6 @@ The electron alternative for Go
 
 import {setupContextMenus} from "./contextmenu";
 import {setupDrag} from "./drag";
-import {reloadWML} from "./wml";
 import {Emit, Off, OffAll, On, Once, OnMultiple, WailsEvent} from './events';
 import {ByID, ByName, Plugin} from "./calls";
 import {Error, Info, OpenFile, Question, SaveFile, Warning} from "./dialogs";
@@ -24,8 +23,9 @@ import * as Runtime from "./runtime";
 import * as Screens from "./screens";
 import * as System from "./system";
 import * as Window from "./window";
+import * as WML from './wml';
 
-export { Application, Browser, Clipboard, ContextMenu, Flags, Runtime, Screens, System, Window };
+export { Application, Browser, Clipboard, ContextMenu, Flags, Runtime, Screens, System, Window, WML };
 
 export const Events = {
     On,
@@ -50,9 +50,52 @@ export const Dialogs = {
     OpenFile, Question, Warning, SaveFile
 }
 
-setupContextMenus();
-setupDrag();
+/***
+ This technique for proper load detection is taken from HTMX:
 
-document.addEventListener("DOMContentLoaded", function () {
-    reloadWML();
+ BSD 2-Clause License
+
+ Copyright (c) 2020, Big Sky Software
+ All rights reserved.
+
+ Redistribution and use in source and binary forms, with or without
+ modification, are permitted provided that the following conditions are met:
+
+ 1. Redistributions of source code must retain the above copyright notice, this
+ list of conditions and the following disclaimer.
+
+ 2. Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+ ***/
+
+let isReady = false
+document.addEventListener('DOMContentLoaded', function() {
+    isReady = true
+})
+
+function whenReady(fn) {
+    if (isReady || document.readyState === 'complete') {
+        fn();
+    } else {
+        document.addEventListener('DOMContentLoaded', fn);
+    }
+}
+
+whenReady(() => {
+    setupContextMenus();
+    setupDrag();
+    WML.Reload();
 });
diff --git a/v3/internal/runtime/desktop/@wailsio/runtime/src/wml.js b/v3/internal/runtime/desktop/@wailsio/runtime/src/wml.js
index d62b55f81..7d33548fe 100644
--- a/v3/internal/runtime/desktop/@wailsio/runtime/src/wml.js
+++ b/v3/internal/runtime/desktop/@wailsio/runtime/src/wml.js
@@ -143,7 +143,7 @@ function addWMLOpenBrowserListener() {
  *
  * @return {void}
  */
-export function reloadWML() {
+export function Reload() {
     console.log("Reloading WML");
     addWMLEventListeners();
     addWMLWindowListeners();
diff --git a/v3/internal/runtime/desktop/@wailsio/runtime/types/index.d.ts b/v3/internal/runtime/desktop/@wailsio/runtime/types/index.d.ts
index 486fd7f50..b6e9e7293 100644
--- a/v3/internal/runtime/desktop/@wailsio/runtime/types/index.d.ts
+++ b/v3/internal/runtime/desktop/@wailsio/runtime/types/index.d.ts
@@ -29,6 +29,7 @@ import * as Runtime from "./runtime";
 import * as Screens from "./screens";
 import * as System from "./system";
 import * as Window from "./window";
+import * as WML from "./wml";
 import { On } from './events';
 import { Off } from './events';
 import { OnMultiple } from './events';
@@ -45,4 +46,4 @@ import { OpenFile } from "./dialogs";
 import { Question } from "./dialogs";
 import { Warning } from "./dialogs";
 import { SaveFile } from "./dialogs";
-export { Application, Browser, Clipboard, ContextMenu, Flags, Runtime, Screens, System, Window };
+export { Application, Browser, Clipboard, ContextMenu, Flags, Runtime, Screens, System, Window, WML };
diff --git a/v3/internal/runtime/desktop/@wailsio/runtime/types/wml.d.ts b/v3/internal/runtime/desktop/@wailsio/runtime/types/wml.d.ts
index 8e16fa80b..1bf165124 100644
--- a/v3/internal/runtime/desktop/@wailsio/runtime/types/wml.d.ts
+++ b/v3/internal/runtime/desktop/@wailsio/runtime/types/wml.d.ts
@@ -1,6 +1,6 @@
 /**
- * Reloads the WML page by adding necessary event listeners and browser listeners.
+ * Reloads the WML system by adding necessary event listeners and browser listeners.
  *
  * @return {void}
  */
-export function reloadWML(): void;
+export function Reload(): void;
diff --git a/v3/internal/templates/_common/Inter Font License.txt b/v3/internal/templates/_common/Inter Font License.txt
new file mode 100644
index 000000000..b525cbf3a
--- /dev/null
+++ b/v3/internal/templates/_common/Inter Font License.txt	
@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/v3/internal/templates/_common/Taskfile.tmpl.yml b/v3/internal/templates/_common/Taskfile.tmpl.yml
index 4ad78b1f6..5d427d88b 100644
--- a/v3/internal/templates/_common/Taskfile.tmpl.yml
+++ b/v3/internal/templates/_common/Taskfile.tmpl.yml
@@ -387,7 +387,12 @@ tasks:
     generates:
       - "frontend/bindings/**/*"
     cmds:
-      - wails3 generate bindings
+      {{- if .UseTypescript }}
+      # For a complete list of options, run `wails3 generate bindings -help`
+      - wails3 generate bindings -silent -ts
+        {{- else }}
+      - wails3 generate bindings -silent
+      {{- end }}
       # - wails3 generate bindings -silent
 
   go:mod:tidy:
diff --git a/v3/internal/templates/_common/main.go.tmpl b/v3/internal/templates/_common/main.go.tmpl
index 1d710c243..b45568336 100644
--- a/v3/internal/templates/_common/main.go.tmpl
+++ b/v3/internal/templates/_common/main.go.tmpl
@@ -4,20 +4,35 @@ import (
 	"embed"
 	_ "embed"
 	"log"
+	"time"
 
 	"github.com/wailsapp/wails/v3/pkg/application"
 )
 
+// Wails uses Go's `embed` package to embed the frontend files into the binary.
+// Any files in the frontend/dist folder will be embedded into the binary and
+// made available to the frontend.
+// See https://pkg.go.dev/embed for more information.
+
 //go:embed frontend/dist
 var assets embed.FS
 
+// main function serves as the application's entry point. It initializes the application, creates a window,
+// and starts a goroutine that emits a time-based event every second. It subsequently runs the application and
+// logs any error that might occur.
 func main() {
+
+	// Create a new Wails application by providing the necessary options.
+	// Variables 'Name' and 'Description' are for application metadata.
+	// 'Assets' configures the asset server with the 'FS' variable pointing to the frontend files.
+	// 'Bind' is a list of Go struct instances. The frontend has access to the methods of these instances.
+	// 'Mac' options tailor the application when running an macOS.
 	app := application.New(application.Options{
 		Name:        "{{.ProjectName}}",
 		Description: "A demo of using raw HTML & CSS",
-        Bind: []any{
-            &GreetService{},
-        },
+		Bind: []any{
+			&GreetService{},
+		},
 		Assets: application.AssetOptions{
 			FS: assets,
 		},
@@ -25,7 +40,12 @@ func main() {
 			ApplicationShouldTerminateAfterLastWindowClosed: true,
 		},
 	})
-	// Create window
+
+	// Create a new window with the necessary options.
+	// 'Title' is the title of the window.
+	// 'Mac' options tailor the window when running on macOS.
+	// 'BackgroundColour' is the background colour of the window.
+	// 'URL' is the URL that will be loaded into the webview.
 	app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
 		Title: "Window 1",
 		Mac: application.MacWindow{
@@ -33,23 +53,27 @@ func main() {
 			Backdrop:                application.MacBackdropTranslucent,
 			TitleBar:                application.MacTitleBarHiddenInset,
 		},
-        BackgroundColour: application.NewRGB(36, 36, 36),
-		URL: "/",
+		BackgroundColour: application.NewRGB(27, 38, 54),
+		URL:              "/",
 	})
 
-    go func() {
-        for {
-            now := time.Now().Format(time.RFC1123)
-            app.Events.Emit(&application.WailsEvent{
-                Name: "time",
-                Data: now,
-            })
-            time.Sleep(time.Second)
-        }
-    }()
+	// Create a goroutine that emits an event containing the current time every second.
+	// The frontend can listen to this event and update the UI accordingly.
+	go func() {
+		for {
+			now := time.Now().Format(time.RFC1123)
+			app.Events.Emit(&application.WailsEvent{
+				Name: "time",
+				Data: now,
+			})
+			time.Sleep(time.Second)
+		}
+	}()
 
+	// Run the application. This blocks until the application has been exited.
 	err := app.Run()
 
+	// If an error occurred while running the application, log it and exit.
 	if err != nil {
 		log.Fatal(err)
 	}
diff --git a/v3/internal/templates/lit-ts/frontend/index.html b/v3/internal/templates/lit-ts/frontend/index.html
index ca539730d..d01a04294 100644
--- a/v3/internal/templates/lit-ts/frontend/index.html
+++ b/v3/internal/templates/lit-ts/frontend/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wails + Lit + TS</title>
-    <link rel="stylesheet" href="./src/index.css" />
+    <link rel="stylesheet" href="/style.css" />
     <script type="module" src="/src/my-element.ts"></script>
   </head>
   <body>
diff --git a/v3/internal/templates/lit-ts/frontend/package.json b/v3/internal/templates/lit-ts/frontend/package.json
index 42a86bd4b..cb84bbf58 100644
--- a/v3/internal/templates/lit-ts/frontend/package.json
+++ b/v3/internal/templates/lit-ts/frontend/package.json
@@ -3,24 +3,16 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "main": "dist/my-element.es.js",
-  "exports": {
-    ".": "./dist/my-element.es.js"
-  },
-  "types": "types/my-element.d.ts",
-  "files": [
-    "dist",
-    "types"
-  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "lit": "^2.4.1"
+    "lit": "^3.1.0"
   },
   "devDependencies": {
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/lit-ts/frontend/public/Inter-Medium.ttf b/v3/internal/templates/lit-ts/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/lit-ts/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/lit-ts/frontend/src/assets/lit.svg b/v3/internal/templates/lit-ts/frontend/public/lit.svg
similarity index 100%
rename from v3/internal/templates/lit-ts/frontend/src/assets/lit.svg
rename to v3/internal/templates/lit-ts/frontend/public/lit.svg
diff --git a/v3/internal/templates/lit-ts/frontend/public/style.css b/v3/internal/templates/lit-ts/frontend/public/style.css
new file mode 100644
index 000000000..7ce1046b8
--- /dev/null
+++ b/v3/internal/templates/lit-ts/frontend/public/style.css
@@ -0,0 +1,54 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
\ No newline at end of file
diff --git a/v3/internal/templates/lit-ts/frontend/src/index.css b/v3/internal/templates/lit-ts/frontend/src/index.css
deleted file mode 100644
index d39ac2e34..000000000
--- a/v3/internal/templates/lit-ts/frontend/src/index.css
+++ /dev/null
@@ -1,40 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-}
diff --git a/v3/internal/templates/lit-ts/frontend/src/my-element.ts b/v3/internal/templates/lit-ts/frontend/src/my-element.ts
index 9f1c76e89..6d0afdc1e 100644
--- a/v3/internal/templates/lit-ts/frontend/src/my-element.ts
+++ b/v3/internal/templates/lit-ts/frontend/src/my-element.ts
@@ -1,6 +1,7 @@
-import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import litLogo from './assets/lit.svg'
+import {css, html, LitElement} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import {Greet} from '../bindings/main/GreetService';
+import {Events} from "@wailsio/runtime";
 
 /**
  * An example element.
@@ -10,116 +11,164 @@ import litLogo from './assets/lit.svg'
  */
 @customElement('my-element')
 export class MyElement extends LitElement {
-  /**
-   * Copy for the read the docs hint.
-   */
-  @property()
-  docsHint = 'Click on the Wails and Lit logos to learn more'
 
-  /**
-   * The number of times the button has been clicked.
-   */
-  @property({ type: Number })
-  count = 0
+    @property()
+    result: string = 'Please enter your name below 👇'
 
-  render() {
-    return html`
-      <div>
-        <a href="https://wails.io" target="_blank">
-          <img src="/wails.png" class="logo" alt="Wails logo" />
-        </a>
-        <a href="https://lit.dev" target="_blank">
-          <img src=${litLogo} class="logo lit" alt="Lit logo" />
-        </a>
-      </div>
-      <slot></slot>
-      <div class="card">
-        <button @click=${this._onClick} part="button">
-          count is ${this.count}
-        </button>
-      </div>
-      <p class="read-the-docs">${this.docsHint}</p>
-    `
-  }
+    @property()
+    time: string = 'Listening for Time event...'
 
-  private _onClick() {
-    this.count++
-  }
+    @property()
+    name: string = '';
 
-  static styles = css`
-    :host {
-      max-width: 1280px;
-      margin: 0 auto;
-      padding: 2rem;
-      text-align: center;
+    constructor() {
+        super();
+        Events.On('time', (timeValue: { data: string }) => {
+            this.time = timeValue.data;
+        });
     }
 
-    .logo {
-      height: 6em;
-      padding: 1.5em;
-      will-change: filter;
-    }
-    .logo:hover {
-      filter: drop-shadow(0 0 2em #646cffaa);
-    }
-    .logo.lit:hover {
-      filter: drop-shadow(0 0 2em #325cffaa);
+
+    doGreet() {
+        if (!this.name) {
+            this.name = 'from Go';
+        }
+        Greet(this.name).then((resultValue: string) => {
+            this.result = resultValue;
+        }).catch((err: Error) => {
+            console.log(err);
+        });
     }
 
-    .card {
-      padding: 2em;
+    render() {
+        return html`
+            <div class="container">
+                <div>
+                    <a wml-openURL="https://wails.io">
+                        <img src="/wails.png" class="logo" alt="Wails logo"/>
+                    </a>
+                    <a wml-openURL="https://lit.dev">
+                        <img src="/lit.svg" class="logo lit" alt="Lit logo"/>
+                    </a>
+                </div>
+                <slot></slot>
+                <div class="card">
+                    <div class="result">${this.result}</div>
+                    <div class="input-box">
+                        <input class="input" .value=${this.name} @input=${(e: InputEvent) => this.name = (e.target as HTMLInputElement).value} type="text"
+                               autocomplete="off"/>
+                        <button class="btn" @click=${this.doGreet}>Greet</button>
+                    </div>
+                </div>
+                <div class="footer">
+                    <div><p>Click on the Wails logo to learn more</p></div>
+                    <div><p>${this.time}</p></div>
+                </div>
+            </div>
+        `
     }
 
-    .read-the-docs {
-      color: #888;
-    }
 
-    h1 {
-      font-size: 3.2em;
-      line-height: 1.1;
-    }
+    static styles = css`
+        :host {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 2rem;
+            text-align: center;
+        }
+    
+        h3 {
+            font-size: 3em;
+            line-height: 1.1;
+        }
+        
+        a {
+            font-weight: 500;
+            color: #646cff;
+            text-decoration: inherit;
+        }
+        
+        a:hover {
+            color: #535bf2;
+        }
+        
+        button {
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+            border-radius: 3px;
+            border: none;
+            margin: 0 0 0 20px;
+            padding: 0 8px;
+            cursor: pointer;
+        }
 
-    a {
-      font-weight: 500;
-      color: #646cff;
-      text-decoration: inherit;
-    }
-    a:hover {
-      color: #535bf2;
-    }
-
-    button {
-      border-radius: 8px;
-      border: 1px solid transparent;
-      padding: 0.6em 1.2em;
-      font-size: 1em;
-      font-weight: 500;
-      font-family: inherit;
-      background-color: #1a1a1a;
-      cursor: pointer;
-      transition: border-color 0.25s;
-    }
-    button:hover {
-      border-color: #646cff;
-    }
-    button:focus,
-    button:focus-visible {
-      outline: 4px auto -webkit-focus-ring-color;
-    }
-
-    @media (prefers-color-scheme: light) {
-      a:hover {
-        color: #747bff;
-      }
-      button {
-        background-color: #f9f9f9;
-      }
-    }
-  `
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .logo {
+            height: 6em;
+            padding: 1.5em;
+            will-change: filter;
+        }
+        
+        .logo:hover {
+            filter: drop-shadow(0 0 2em #e80000aa);
+        }
+        
+        .logo.lit:hover {
+            filter: drop-shadow(0 0 2em #325cffaa);
+        }
+        
+        .result {
+            height: 20px;
+            line-height: 20px;
+            margin: 1.5rem auto;
+            text-align: center;
+        }
+        
+        .footer {
+            margin-top: 1rem;
+            align-content: center;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.67);
+        }
+        
+        .input-box .btn:hover {
+            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+            color: #333333;
+        }
+        
+        .input-box .input {
+            border: none;
+            border-radius: 3px;
+            outline: none;
+            height: 30px;
+            line-height: 30px;
+            padding: 0 10px;
+            color: black;
+            background-color: rgba(240, 240, 240, 1);
+            -webkit-font-smoothing: antialiased;
+        }
+        
+        .input-box .input:hover {
+            border: none;
+            background-color: rgba(255, 255, 255, 1);
+        }
+        
+        .input-box .input:focus {
+            border: none;
+            background-color: rgba(255, 255, 255, 1);
+        }
+  `;
 }
 
 declare global {
-  interface HTMLElementTagNameMap {
-    'my-element': MyElement
-  }
+    interface HTMLElementTagNameMap {
+        'my-element': MyElement
+    }
 }
diff --git a/v3/internal/templates/lit-ts/frontend/tsconfig.json b/v3/internal/templates/lit-ts/frontend/tsconfig.json
index b080b2b2c..69e31ac92 100644
--- a/v3/internal/templates/lit-ts/frontend/tsconfig.json
+++ b/v3/internal/templates/lit-ts/frontend/tsconfig.json
@@ -1,23 +1,24 @@
 {
   "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": "./types",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "Node",
-    "isolatedModules": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "forceConsistentCasingInFileNames": true,
-    "useDefineForClassFields": false,
-    "skipLibCheck": true
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }
diff --git a/v3/internal/templates/lit-ts/frontend/vite.config.ts b/v3/internal/templates/lit-ts/frontend/vite.config.ts
deleted file mode 100644
index fe69491e3..000000000
--- a/v3/internal/templates/lit-ts/frontend/vite.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineConfig } from 'vite'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  build: {
-    lib: {
-      entry: 'src/my-element.ts',
-      formats: ['es'],
-    },
-    rollupOptions: {
-      external: /^lit/,
-    },
-  },
-})
diff --git a/v3/internal/templates/lit/frontend/index.html b/v3/internal/templates/lit/frontend/index.html
index 9da997ad7..7993cbcef 100644
--- a/v3/internal/templates/lit/frontend/index.html
+++ b/v3/internal/templates/lit/frontend/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wails + Lit</title>
-    <link rel="stylesheet" href="./src/index.css" />
+    <link rel="stylesheet" href="/style.css" />
     <script type="module" src="/src/my-element.js"></script>
   </head>
   <body>
diff --git a/v3/internal/templates/lit/frontend/package.json b/v3/internal/templates/lit/frontend/package.json
index 1c4979def..b3eac288d 100644
--- a/v3/internal/templates/lit/frontend/package.json
+++ b/v3/internal/templates/lit/frontend/package.json
@@ -3,21 +3,16 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "main": "dist/my-element.es.js",
-  "exports": {
-    ".": "./dist/my-element.es.js"
-  },
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "lit": "^2.4.1"
+    "lit": "^3.1.0"
   },
   "devDependencies": {
-    "vite": "^4.0.0"
+    "vite": "^5.0.0",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/lit/frontend/public/Inter-Medium.ttf b/v3/internal/templates/lit/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/lit/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/lit/frontend/src/assets/lit.svg b/v3/internal/templates/lit/frontend/public/lit.svg
similarity index 100%
rename from v3/internal/templates/lit/frontend/src/assets/lit.svg
rename to v3/internal/templates/lit/frontend/public/lit.svg
diff --git a/v3/internal/templates/lit/frontend/public/style.css b/v3/internal/templates/lit/frontend/public/style.css
new file mode 100644
index 000000000..7ce1046b8
--- /dev/null
+++ b/v3/internal/templates/lit/frontend/public/style.css
@@ -0,0 +1,54 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
\ No newline at end of file
diff --git a/v3/internal/templates/lit/frontend/src/index.css b/v3/internal/templates/lit/frontend/src/index.css
deleted file mode 100644
index b52d4c639..000000000
--- a/v3/internal/templates/lit/frontend/src/index.css
+++ /dev/null
@@ -1,31 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-}
diff --git a/v3/internal/templates/lit/frontend/src/my-element.js b/v3/internal/templates/lit/frontend/src/my-element.js
index 515f8fa58..b5843922f 100644
--- a/v3/internal/templates/lit/frontend/src/my-element.js
+++ b/v3/internal/templates/lit/frontend/src/my-element.js
@@ -1,129 +1,159 @@
-import { LitElement, css, html } from 'lit'
-import litLogo from './assets/lit.svg'
+import {css, html, LitElement} from 'lit'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events} from "@wailsio/runtime";
 
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
 export class MyElement extends LitElement {
-  static get properties() {
-    return {
-      /**
-       * Copy for the read the docs hint.
-       */
-      docsHint: { type: String },
+    static properties = {
+        name: {type: String},
+        result: {type: String},
+        time: {type: String},
+    };
 
-      /**
-       * The number of times the button has been clicked.
-       */
-      count: { type: Number },
+    constructor() {
+        super();
+        this.name = '';
+        this.result = 'Please enter your name below 👇';
+        this.time = 'Listening for Time event...';
+        Events.On('time', (timeValue) => {
+            this.time = timeValue.data;
+        });
     }
-  }
 
-  constructor() {
-    super()
-    this.docsHint = 'Click on the Wails and Lit logos to learn more'
-    this.count = 0
-  }
+    doGreet() {
+        if (!this.name) {
+            this.name = 'from Go';
+        }
+        Greet(this.name).then((resultValue) => {
+            this.result = resultValue;
+        }).catch((err) => {
+            console.log(err);
+        });
+    }
 
-  render() {
-    return html`
-      <div>
-        <a href="https://wails.io" target="_blank">
-          <img src="/wails.png" class="logo" alt="Wails logo" />
-        </a>
-        <a href="https://lit.dev" target="_blank">
-          <img src=${litLogo} class="logo lit" alt="Lit logo" />
-        </a>
-      </div>
-      <slot></slot>
-      <div class="card">
-        <button @click=${this._onClick} part="button">
-          count is ${this.count}
-        </button>
-      </div>
-      <p class="read-the-docs">${this.docsHint}</p>
-    `
-  }
+    render() {
+        return html`
+            <div class="container">
+                <div>
+                    <a wml-openURL="https://wails.io">
+                        <img src="/wails.png" class="logo" alt="Wails logo"/>
+                    </a>
+                    <a wml-openURL="https://lit.dev">
+                        <img src="/lit.svg" class="logo lit" alt="Lit logo"/>
+                    </a>
+                </div>
+                <slot></slot>
+                <div class="card">
+                    <div class="result">${this.result}</div>
+                    <div class="input-box">
+                        <input class="input" .value=${this.name} @input=${e => this.name = e.target.value} type="text"
+                               autocomplete="off"/>
+                        <button class="btn" @click=${this.doGreet}>Greet</button>
+                    </div>
+                </div>
+                <div class="footer">
+                    <div><p>Click on the Wails logo to learn more</p></div>
+                    <div><p>${this.time}</p></div>
+                </div>
+            </div>
+        `;
+    }
 
-  _onClick() {
-    this.count++
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        max-width: 1280px;
-        margin: 0 auto;
-        padding: 2rem;
-        text-align: center;
-      }
-
-      .logo {
-        height: 6em;
-        padding: 1.5em;
-        will-change: filter;
-      }
-      .logo:hover {
-        filter: drop-shadow(0 0 2em #646cffaa);
-      }
-      .logo.lit:hover {
-        filter: drop-shadow(0 0 2em #325cffaa);
-      }
-
-      .card {
-        padding: 2em;
-      }
-
-      .read-the-docs {
-        color: #888;
-      }
-
-      a {
-        font-weight: 500;
-        color: #646cff;
-        text-decoration: inherit;
-      }
-      a:hover {
-        color: #535bf2;
-      }
-
-      h1 {
-        font-size: 3.2em;
-        line-height: 1.1;
-      }
-
-      button {
-        border-radius: 8px;
-        border: 1px solid transparent;
-        padding: 0.6em 1.2em;
-        font-size: 1em;
-        font-weight: 500;
-        font-family: inherit;
-        background-color: #1a1a1a;
-        cursor: pointer;
-        transition: border-color 0.25s;
-      }
-      button:hover {
-        border-color: #646cff;
-      }
-      button:focus,
-      button:focus-visible {
-        outline: 4px auto -webkit-focus-ring-color;
-      }
-
-      @media (prefers-color-scheme: light) {
+    static styles = css`
+        :host {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 2rem;
+            text-align: center;
+        }
+    
+        h3 {
+            font-size: 3em;
+            line-height: 1.1;
+        }
+        
+        a {
+            font-weight: 500;
+            color: #646cff;
+            text-decoration: inherit;
+        }
+        
         a:hover {
-          color: #747bff;
+            color: #535bf2;
         }
+        
         button {
-          background-color: #f9f9f9;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+            border-radius: 3px;
+            border: none;
+            margin: 0 0 0 20px;
+            padding: 0 8px;
+            cursor: pointer;
         }
-      }
-    `
-  }
+
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .logo {
+            height: 6em;
+            padding: 1.5em;
+            will-change: filter;
+        }
+        
+        .logo:hover {
+            filter: drop-shadow(0 0 2em #e80000aa);
+        }
+        
+        .logo.lit:hover {
+            filter: drop-shadow(0 0 2em #325cffaa);
+        }
+        
+        .result {
+            height: 20px;
+            line-height: 20px;
+            margin: 1.5rem auto;
+            text-align: center;
+        }
+        
+        .footer {
+            margin-top: 1rem;
+            align-content: center;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.67);
+        }
+        
+        .input-box .btn:hover {
+            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+            color: #333333;
+        }
+        
+        .input-box .input {
+            border: none;
+            border-radius: 3px;
+            outline: none;
+            height: 30px;
+            line-height: 30px;
+            padding: 0 10px;
+            color: black;
+            background-color: rgba(240, 240, 240, 1);
+            -webkit-font-smoothing: antialiased;
+        }
+        
+        .input-box .input:hover {
+            border: none;
+            background-color: rgba(255, 255, 255, 1);
+        }
+        
+        .input-box .input:focus {
+            border: none;
+            background-color: rgba(255, 255, 255, 1);
+        }
+  `;
 }
 
-window.customElements.define('my-element', MyElement)
+window.customElements.define('my-element', MyElement);
\ No newline at end of file
diff --git a/v3/internal/templates/lit/frontend/vite.config.js b/v3/internal/templates/lit/frontend/vite.config.js
deleted file mode 100644
index 3847c1f38..000000000
--- a/v3/internal/templates/lit/frontend/vite.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineConfig } from 'vite'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  build: {
-    lib: {
-      entry: 'src/my-element.js',
-      formats: ['es'],
-    },
-    rollupOptions: {
-      external: /^lit/,
-    },
-  },
-})
diff --git a/v3/internal/templates/preact-ts/frontend/index.html b/v3/internal/templates/preact-ts/frontend/index.html
index 9270ebd4e..f4addcc25 100644
--- a/v3/internal/templates/preact-ts/frontend/index.html
+++ b/v3/internal/templates/preact-ts/frontend/index.html
@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/wails.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wails + Preact + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/wails.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="/style.css"/>
+  <title>Wails + Preact</title>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
 </html>
diff --git a/v3/internal/templates/preact-ts/frontend/package.json b/v3/internal/templates/preact-ts/frontend/package.json
index cab9db654..8eda9bc1f 100644
--- a/v3/internal/templates/preact-ts/frontend/package.json
+++ b/v3/internal/templates/preact-ts/frontend/package.json
@@ -9,11 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "preact": "^10.11.3"
+    "preact": "^10.19.3"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.4.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "@preact/preset-vite": "^2.7.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/preact-ts/frontend/public/Inter-Medium.ttf b/v3/internal/templates/preact-ts/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/preact-ts/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/preact-ts/frontend/src/assets/preact.svg b/v3/internal/templates/preact-ts/frontend/public/preact.svg
similarity index 100%
rename from v3/internal/templates/preact-ts/frontend/src/assets/preact.svg
rename to v3/internal/templates/preact-ts/frontend/public/preact.svg
diff --git a/v3/internal/templates/preact-ts/frontend/public/style.css b/v3/internal/templates/preact-ts/frontend/public/style.css
new file mode 100644
index 000000000..e048efdfd
--- /dev/null
+++ b/v3/internal/templates/preact-ts/frontend/public/style.css
@@ -0,0 +1,155 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.preact:hover {
+    filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/preact-ts/frontend/src/app.css b/v3/internal/templates/preact-ts/frontend/src/app.css
deleted file mode 100644
index 088ed3ace..000000000
--- a/v3/internal/templates/preact-ts/frontend/src/app.css
+++ /dev/null
@@ -1,25 +0,0 @@
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.preact:hover {
-  filter: drop-shadow(0 0 2em #673ab8aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/v3/internal/templates/preact-ts/frontend/src/app.tsx b/v3/internal/templates/preact-ts/frontend/src/app.tsx
index ccde5b9f3..e832fc660 100644
--- a/v3/internal/templates/preact-ts/frontend/src/app.tsx
+++ b/v3/internal/templates/preact-ts/frontend/src/app.tsx
@@ -1,32 +1,54 @@
-import { useState } from 'preact/hooks'
-import preactLogo from './assets/preact.svg'
-import './app.css'
+import {useEffect, useState} from 'preact/hooks'
+import {Greet} from "../bindings/main/GreetService";
+import {Events} from "@wailsio/runtime";
 
 export function App() {
-  const [count, setCount] = useState(0)
+    const [name, setName] = useState<string>('');
+    const [result, setResult] = useState<string>('Please enter your name below 👇');
+    const [time, setTime] = useState<string>('Listening for Time event...');
 
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
-        </a>
-        <a href="https://preactjs.com" target="_blank">
-          <img src={preactLogo} class="logo preact" alt="Preact logo" />
-        </a>
-      </div>
-      <h1>Vite + Preact</h1>
-      <div class="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/app.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p class="read-the-docs">
-        Click on the Vite and Preact logos to learn more
-      </p>
-    </>
-  )
-}
+    const doGreet = (): void => {
+        if (!name) {
+            setName('from Go');
+        }
+        Greet(name).then((resultValue: string) => {
+            setResult(resultValue);
+        }).catch((err: any) => {
+            console.log(err);
+        });
+    }
+
+    useEffect(() => {
+        Events.On('time', (timeValue: any) => {
+            setTime(timeValue.data);
+        });
+    }, []);
+
+    return (
+        <>
+            <div className="container">
+                <div>
+                    <a wml-openURL="https://wails.io">
+                        <img src="/wails.png" className="logo" alt="Wails logo"/>
+                    </a>
+                    <a wml-openURL="https://preactjs.com">
+                        <img src="/preact.svg" className="logo preact" alt="Preact logo"/>
+                    </a>
+                </div>
+                <h1>Wails + Preact</h1>
+                <div className="card">
+                    <div className="result">{result}</div>
+                    <div className="input-box">
+                        <input className="input" value={name} onInput={(e) => setName(e.currentTarget.value)}
+                               type="text" autocomplete="off"/>
+                        <button className="btn" onClick={doGreet}>Greet</button>
+                    </div>
+                </div>
+                <div className="footer">
+                    <div><p>Click on the Wails logo to learn more</p></div>
+                    <div><p>{time}</p></div>
+                </div>
+            </div>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/v3/internal/templates/preact-ts/frontend/src/index.css b/v3/internal/templates/preact-ts/frontend/src/index.css
deleted file mode 100644
index 917888c1d..000000000
--- a/v3/internal/templates/preact-ts/frontend/src/index.css
+++ /dev/null
@@ -1,70 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/preact-ts/frontend/src/main.tsx b/v3/internal/templates/preact-ts/frontend/src/main.tsx
index e0ce3e998..2af1859fe 100644
--- a/v3/internal/templates/preact-ts/frontend/src/main.tsx
+++ b/v3/internal/templates/preact-ts/frontend/src/main.tsx
@@ -1,5 +1,4 @@
 import { render } from 'preact'
 import { App } from './app'
-import './index.css'
 
 render(<App />, document.getElementById('app') as HTMLElement)
diff --git a/v3/internal/templates/preact-ts/frontend/tsconfig.json b/v3/internal/templates/preact-ts/frontend/tsconfig.json
index 9c1b1e0aa..d13245791 100644
--- a/v3/internal/templates/preact-ts/frontend/tsconfig.json
+++ b/v3/internal/templates/preact-ts/frontend/tsconfig.json
@@ -1,21 +1,29 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "preact"
+    "jsxImportSource": "preact",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
diff --git a/v3/internal/templates/preact-ts/frontend/tsconfig.node.json b/v3/internal/templates/preact-ts/frontend/tsconfig.node.json
index 9d31e2aed..42872c59f 100644
--- a/v3/internal/templates/preact-ts/frontend/tsconfig.node.json
+++ b/v3/internal/templates/preact-ts/frontend/tsconfig.node.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "composite": true,
+    "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]
diff --git a/v3/internal/templates/preact/frontend/index.html b/v3/internal/templates/preact/frontend/index.html
index 139931e70..3657fd5ef 100644
--- a/v3/internal/templates/preact/frontend/index.html
+++ b/v3/internal/templates/preact/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css"/>
     <title>Wails + Preact</title>
   </head>
   <body>
diff --git a/v3/internal/templates/preact/frontend/package.json b/v3/internal/templates/preact/frontend/package.json
index f44069b31..62f9ebd6a 100644
--- a/v3/internal/templates/preact/frontend/package.json
+++ b/v3/internal/templates/preact/frontend/package.json
@@ -9,10 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "preact": "^10.11.3"
+    "preact": "^10.19.3"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.4.0",
-    "vite": "^4.0.0"
+    "@preact/preset-vite": "^2.7.0",
+    "vite": "^5.0.8",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/preact/frontend/public/Inter-Medium.ttf b/v3/internal/templates/preact/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/preact/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/preact/frontend/src/assets/preact.svg b/v3/internal/templates/preact/frontend/public/preact.svg
similarity index 100%
rename from v3/internal/templates/preact/frontend/src/assets/preact.svg
rename to v3/internal/templates/preact/frontend/public/preact.svg
diff --git a/v3/internal/templates/preact/frontend/public/style.css b/v3/internal/templates/preact/frontend/public/style.css
new file mode 100644
index 000000000..e048efdfd
--- /dev/null
+++ b/v3/internal/templates/preact/frontend/public/style.css
@@ -0,0 +1,155 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.preact:hover {
+    filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/preact/frontend/src/app.css b/v3/internal/templates/preact/frontend/src/app.css
deleted file mode 100644
index 088ed3ace..000000000
--- a/v3/internal/templates/preact/frontend/src/app.css
+++ /dev/null
@@ -1,25 +0,0 @@
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.preact:hover {
-  filter: drop-shadow(0 0 2em #673ab8aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/v3/internal/templates/preact/frontend/src/app.jsx b/v3/internal/templates/preact/frontend/src/app.jsx
index 2679f4886..ae7a38b34 100644
--- a/v3/internal/templates/preact/frontend/src/app.jsx
+++ b/v3/internal/templates/preact/frontend/src/app.jsx
@@ -1,32 +1,51 @@
-import { useState } from 'preact/hooks'
-import preactLogo from './assets/preact.svg'
-import './app.css'
+import { useState, useEffect } from 'preact/hooks'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events} from "@wailsio/runtime";
 
 export function App() {
-  const [count, setCount] = useState(0)
+  const [name, setName] = useState('');
+  const [result, setResult] = useState('Please enter your name below 👇');
+  const [time, setTime] = useState('Listening for Time event...');
+
+  const doGreet = () => {
+    if (!name) {
+      setName('from Go');
+    }
+    Greet(name).then((resultValue) => {
+      setResult(resultValue);
+    }).catch((err) => {
+      console.log(err);
+    });
+  }
+
+  useEffect(() => {
+    Events.On('time', (timeValue) => {
+      setTime(timeValue.data);
+    });
+  }, []);
 
   return (
-    <>
+    <div className="container">
       <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
+        <a wml-openURL="https://wails.io">
+          <img src="/wails.png" className="logo" alt="Wails logo"/>
         </a>
-        <a href="https://preactjs.com" target="_blank">
-          <img src={preactLogo} class="logo preact" alt="Preact logo" />
+        <a wml-openURL="https://preactjs.com">
+          <img src="/preact.svg" className="logo preact" alt="Preact logo"/>
         </a>
       </div>
-      <h1>Vite + Preact</h1>
-      <div class="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/app.jsx</code> and save to test HMR
-        </p>
+      <h1>Wails + Preact</h1>
+      <div className="card">
+        <div className="result">{result}</div>
+        <div className="input-box">
+          <input className="input" value={name} onInput={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
+          <button className="btn" onClick={doGreet}>Greet</button>
+        </div>
       </div>
-      <p class="read-the-docs">
-        Click on the Vite and Preact logos to learn more
-      </p>
-    </>
+      <div className="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p>{time}</p></div>
+      </div>
+    </div>
   )
-}
+}
\ No newline at end of file
diff --git a/v3/internal/templates/preact/frontend/src/index.css b/v3/internal/templates/preact/frontend/src/index.css
deleted file mode 100644
index 917888c1d..000000000
--- a/v3/internal/templates/preact/frontend/src/index.css
+++ /dev/null
@@ -1,70 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/preact/frontend/src/main.jsx b/v3/internal/templates/preact/frontend/src/main.jsx
index be3fbce92..5867d2a14 100644
--- a/v3/internal/templates/preact/frontend/src/main.jsx
+++ b/v3/internal/templates/preact/frontend/src/main.jsx
@@ -1,5 +1,4 @@
 import { render } from 'preact'
 import { App } from './app'
-import './index.css'
 
 render(<App />, document.getElementById('app'))
diff --git a/v3/internal/templates/qwik-ts/frontend/.gitignore b/v3/internal/templates/qwik-ts/frontend/.gitignore
new file mode 100644
index 000000000..a547bf36d
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/v3/internal/templates/qwik-ts/frontend/index.html b/v3/internal/templates/qwik-ts/frontend/index.html
new file mode 100644
index 000000000..b45ac182d
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
+    <title>Vite + Qwik</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/v3/internal/templates/qwik-ts/frontend/package.json b/v3/internal/templates/qwik-ts/frontend/package.json
new file mode 100644
index 000000000..3e0f4b267
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/frontend/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "quik-ts-latest",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "@builder.io/qwik": "^1.3.0",
+    "@wailsio/runtime": "latest"
+  }
+}
diff --git a/v3/internal/templates/qwik-ts/frontend/public/Inter-Medium.ttf b/v3/internal/templates/qwik-ts/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/qwik-ts/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/qwik-ts/frontend/public/qwik.svg b/v3/internal/templates/qwik-ts/frontend/public/qwik.svg
new file mode 100644
index 000000000..08a46e2da
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/frontend/public/qwik.svg
@@ -0,0 +1,5 @@
+<svg width="110" height="118" viewBox="0 0 110 118" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M96.8285 117.176L75.9674 96.4188L75.67 96.4705V96.2507L31.3094 52.3816L42.2638 41.8282L35.8231 4.91711L5.33977 42.7335C0.166531 47.9585 -0.829317 56.5072 2.92128 62.7798L21.9717 94.4012C24.8817 99.2511 29.46 102.368 35.849 102.135C49.377 101.657 55.3262 101.657 55.3262 101.657L96.8156 117.163L96.8285 117.176Z" fill="#18B6F6"/>
+<path d="M107.134 59.0164C110.134 52.8214 111.208 47.4024 108.246 41.9576L104.03 34.1977L101.844 30.2143L100.991 28.6624L100.913 28.7529L89.4413 8.84886C86.5443 3.81789 81.19 0.752745 75.3571 0.804478L65.2952 1.08901L35.2645 1.1666C29.5869 1.21834 24.3749 4.20588 21.4908 9.10753L3.24219 45.3461L35.8983 4.72321L78.7327 51.8256L71.0634 59.5983L75.6417 96.4447L75.7063 96.3671V96.4706H75.6417L75.7322 96.5611L79.3017 100.04L96.5804 116.918C97.3046 117.616 98.4815 116.776 98.003 115.909L87.3203 94.8928" fill="#AC7EF4"/>
+<path d="M78.8354 51.7092L35.8846 4.8396L41.989 41.5437L31.0605 52.1489L75.5633 96.3801L71.5541 59.663L78.8354 51.7221V51.7092Z" fill="white"/>
+</svg>
diff --git a/v3/internal/templates/qwik-ts/frontend/public/style.css b/v3/internal/templates/qwik-ts/frontend/public/style.css
new file mode 100644
index 000000000..be702b0c7
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.qwik:hover {
+    filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/qwik-ts/frontend/public/wails.png b/v3/internal/templates/qwik-ts/frontend/public/wails.png
new file mode 100644
index 000000000..8bdf42483
Binary files /dev/null and b/v3/internal/templates/qwik-ts/frontend/public/wails.png differ
diff --git a/v3/internal/templates/qwik-ts/frontend/src/app.tsx b/v3/internal/templates/qwik-ts/frontend/src/app.tsx
new file mode 100644
index 000000000..54fd7a90f
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/frontend/src/app.tsx
@@ -0,0 +1,53 @@
+import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'
+import {Greet} from "../bindings/main/GreetService";
+import {Events, WML} from "@wailsio/runtime";
+
+export const App = component$(() => {
+  const name = useSignal<string>('');
+  const result = useSignal<string>('Please enter your name below 👇');
+  const time = useSignal<string>('Listening for Time event...');
+
+  const doGreet = () => {
+    if (!name.value) {
+      name.value = 'from Go';
+    }
+    Greet(name.value).then((resultValue: string) => {
+      result.value = resultValue;
+    }).catch((err: any) => {
+      console.log(err);
+    });
+  }
+
+  useVisibleTask$(() => {
+    Events.On('time', (timeValue: any) => {
+      time.value = timeValue.data;
+    });
+    // Reload WML so it picks up the wml tags
+    WML.Reload();
+  });
+
+  return (
+    <div class="container">
+      <div>
+        <a wml-openURL="https://wails.io">
+          <img src="/wails.png" class="logo" alt="Wails logo"/>
+        </a>
+        <a wml-openURL="https://qwik.builder.io">
+          <img src="/qwik.svg" class="logo qwik" alt="Qwik logo"/>
+        </a>
+      </div>
+      <h1>Wails + Qwik</h1>
+      <div class="card">
+        <div class="result">{result.value}</div>
+        <div class="input-box">
+          <input class="input" value={name.value} onInput$={(e: InputEvent) => name.value = (e.target as HTMLInputElement).value} type="text" autocomplete="off"/>
+          <button class="btn" onClick$={doGreet}>Greet</button>
+        </div>
+      </div>
+      <div class="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p>{time.value}</p></div>
+      </div>
+    </div>
+  )
+})
\ No newline at end of file
diff --git a/v3/internal/templates/qwik-ts/frontend/src/main.tsx b/v3/internal/templates/qwik-ts/frontend/src/main.tsx
new file mode 100644
index 000000000..2c779e49e
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/frontend/src/main.tsx
@@ -0,0 +1,6 @@
+import '@builder.io/qwik/qwikloader.js'
+
+import { render } from '@builder.io/qwik'
+import { App } from './app.tsx'
+
+render(document.getElementById('app') as HTMLElement, <App />)
diff --git a/v3/internal/templates/qwik-ts/frontend/tsconfig.json b/v3/internal/templates/qwik-ts/frontend/tsconfig.json
new file mode 100644
index 000000000..9a262f041
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/frontend/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/v3/internal/templates/lit-ts/frontend/tsconfig.node.json b/v3/internal/templates/qwik-ts/frontend/tsconfig.node.json
similarity index 71%
rename from v3/internal/templates/lit-ts/frontend/tsconfig.node.json
rename to v3/internal/templates/qwik-ts/frontend/tsconfig.node.json
index 9d31e2aed..42872c59f 100644
--- a/v3/internal/templates/lit-ts/frontend/tsconfig.node.json
+++ b/v3/internal/templates/qwik-ts/frontend/tsconfig.node.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "composite": true,
+    "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]
diff --git a/v3/internal/templates/qwik-ts/frontend/vite.config.js b/v3/internal/templates/qwik-ts/frontend/vite.config.js
new file mode 100644
index 000000000..cabd66b01
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/frontend/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    qwikVite({
+      csr: true,
+    }),
+  ],
+})
diff --git a/v3/internal/templates/qwik-ts/template.json b/v3/internal/templates/qwik-ts/template.json
new file mode 100644
index 000000000..768770750
--- /dev/null
+++ b/v3/internal/templates/qwik-ts/template.json
@@ -0,0 +1,8 @@
+{
+  "name": "Qwik + TS + Vite",
+  "shortname": "qwik",
+  "author": "Lea Anthony",
+  "description": "Qwik + TS + Vite development server",
+  "helpurl": "https://wails.io",
+  "version": 3
+}
\ No newline at end of file
diff --git a/v3/internal/templates/qwik/frontend/.gitignore b/v3/internal/templates/qwik/frontend/.gitignore
new file mode 100644
index 000000000..a547bf36d
--- /dev/null
+++ b/v3/internal/templates/qwik/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/v3/internal/templates/qwik/frontend/index.html b/v3/internal/templates/qwik/frontend/index.html
new file mode 100644
index 000000000..7c6c2a226
--- /dev/null
+++ b/v3/internal/templates/qwik/frontend/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
+    <title>Vite + Qwik</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/v3/internal/templates/qwik/frontend/package.json b/v3/internal/templates/qwik/frontend/package.json
new file mode 100644
index 000000000..83ca75a09
--- /dev/null
+++ b/v3/internal/templates/qwik/frontend/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "qwik-latest",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "@builder.io/qwik": "^1.3.0",
+    "@wailsio/runtime": "latest"
+  }
+}
diff --git a/v3/internal/templates/qwik/frontend/public/Inter-Medium.ttf b/v3/internal/templates/qwik/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/qwik/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/qwik/frontend/public/qwik.svg b/v3/internal/templates/qwik/frontend/public/qwik.svg
new file mode 100644
index 000000000..08a46e2da
--- /dev/null
+++ b/v3/internal/templates/qwik/frontend/public/qwik.svg
@@ -0,0 +1,5 @@
+<svg width="110" height="118" viewBox="0 0 110 118" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M96.8285 117.176L75.9674 96.4188L75.67 96.4705V96.2507L31.3094 52.3816L42.2638 41.8282L35.8231 4.91711L5.33977 42.7335C0.166531 47.9585 -0.829317 56.5072 2.92128 62.7798L21.9717 94.4012C24.8817 99.2511 29.46 102.368 35.849 102.135C49.377 101.657 55.3262 101.657 55.3262 101.657L96.8156 117.163L96.8285 117.176Z" fill="#18B6F6"/>
+<path d="M107.134 59.0164C110.134 52.8214 111.208 47.4024 108.246 41.9576L104.03 34.1977L101.844 30.2143L100.991 28.6624L100.913 28.7529L89.4413 8.84886C86.5443 3.81789 81.19 0.752745 75.3571 0.804478L65.2952 1.08901L35.2645 1.1666C29.5869 1.21834 24.3749 4.20588 21.4908 9.10753L3.24219 45.3461L35.8983 4.72321L78.7327 51.8256L71.0634 59.5983L75.6417 96.4447L75.7063 96.3671V96.4706H75.6417L75.7322 96.5611L79.3017 100.04L96.5804 116.918C97.3046 117.616 98.4815 116.776 98.003 115.909L87.3203 94.8928" fill="#AC7EF4"/>
+<path d="M78.8354 51.7092L35.8846 4.8396L41.989 41.5437L31.0605 52.1489L75.5633 96.3801L71.5541 59.663L78.8354 51.7221V51.7092Z" fill="white"/>
+</svg>
diff --git a/v3/internal/templates/qwik/frontend/public/style.css b/v3/internal/templates/qwik/frontend/public/style.css
new file mode 100644
index 000000000..be702b0c7
--- /dev/null
+++ b/v3/internal/templates/qwik/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.qwik:hover {
+    filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/qwik/frontend/public/wails.png b/v3/internal/templates/qwik/frontend/public/wails.png
new file mode 100644
index 000000000..8bdf42483
Binary files /dev/null and b/v3/internal/templates/qwik/frontend/public/wails.png differ
diff --git a/v3/internal/templates/qwik/frontend/src/app.jsx b/v3/internal/templates/qwik/frontend/src/app.jsx
new file mode 100644
index 000000000..e350a96ae
--- /dev/null
+++ b/v3/internal/templates/qwik/frontend/src/app.jsx
@@ -0,0 +1,53 @@
+import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events, WML} from "@wailsio/runtime";
+
+export const App = component$(() => {
+  const name = useSignal('');
+  const result = useSignal('Please enter your name below 👇');
+  const time = useSignal('Listening for Time event...');
+
+  const doGreet = () => {
+    if (!name.value) {
+      name.value = 'from Go';
+    }
+    Greet(name.value).then((resultValue) => {
+      result.value = resultValue;
+    }).catch((err) => {
+      console.log(err);
+    });
+  }
+
+  useVisibleTask$(() => {
+    Events.On('time', (timeValue) => {
+      time.value = timeValue.data;
+    });
+    // Reload WML so it picks up the wml tags
+    WML.Reload();
+  });
+
+  return (
+    <div class="container">
+      <div>
+        <a wml-openURL="https://wails.io">
+          <img src="/wails.png" class="logo" alt="Wails logo"/>
+        </a>
+        <a wml-openURL="https://qwik.builder.io">
+          <img src="/qwik.svg" class="logo qwik" alt="Qwik logo"/>
+        </a>
+      </div>
+      <h1>Wails + Qwik</h1>
+      <div class="card">
+        <div class="result">{result.value}</div>
+        <div class="input-box">
+          <input class="input" value={name.value} onInput$={(e) => name.value = e.target.value} type="text" autocomplete="off"/>
+          <button class="btn" onClick$={doGreet}>Greet</button>
+        </div>
+      </div>
+      <div class="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p>{time.value}</p></div>
+      </div>
+    </div>
+  )
+})
\ No newline at end of file
diff --git a/v3/internal/templates/qwik/frontend/src/main.jsx b/v3/internal/templates/qwik/frontend/src/main.jsx
new file mode 100644
index 000000000..779d53be1
--- /dev/null
+++ b/v3/internal/templates/qwik/frontend/src/main.jsx
@@ -0,0 +1,6 @@
+import '@builder.io/qwik/qwikloader.js'
+
+import { render } from '@builder.io/qwik'
+import { App } from './app.jsx'
+
+render(document.getElementById('app'), <App />)
diff --git a/v3/internal/templates/qwik/frontend/vite.config.js b/v3/internal/templates/qwik/frontend/vite.config.js
new file mode 100644
index 000000000..cabd66b01
--- /dev/null
+++ b/v3/internal/templates/qwik/frontend/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    qwikVite({
+      csr: true,
+    }),
+  ],
+})
diff --git a/v3/internal/templates/qwik/template.json b/v3/internal/templates/qwik/template.json
new file mode 100644
index 000000000..21df1467b
--- /dev/null
+++ b/v3/internal/templates/qwik/template.json
@@ -0,0 +1,8 @@
+{
+  "name": "Qwik + Vite",
+  "shortname": "qwik",
+  "author": "Lea Anthony",
+  "description": "Qwik + Vite development server",
+  "helpurl": "https://wails.io",
+  "version": 3
+}
\ No newline at end of file
diff --git a/v3/internal/templates/react-swc-ts/frontend/index.html b/v3/internal/templates/react-swc-ts/frontend/index.html
index 28868c572..0dba04049 100644
--- a/v3/internal/templates/react-swc-ts/frontend/index.html
+++ b/v3/internal/templates/react-swc-ts/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
     <title>Wails + React + TS</title>
   </head>
   <body>
diff --git a/v3/internal/templates/react-swc-ts/frontend/package.json b/v3/internal/templates/react-swc-ts/frontend/package.json
index 26dc1bca8..d337f4200 100644
--- a/v3/internal/templates/react-swc-ts/frontend/package.json
+++ b/v3/internal/templates/react-swc-ts/frontend/package.json
@@ -1,11 +1,12 @@
 {
-  "name": "frontend",
+  "name": "react-ts-latest",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -13,10 +14,16 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "@wailsio/runtime": "latest"
   }
-}
\ No newline at end of file
+}
diff --git a/v3/internal/templates/react-swc-ts/frontend/public/Inter-Medium.ttf b/v3/internal/templates/react-swc-ts/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/react-swc-ts/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/react-swc-ts/frontend/src/assets/react.svg b/v3/internal/templates/react-swc-ts/frontend/public/react.svg
similarity index 100%
rename from v3/internal/templates/react-swc-ts/frontend/src/assets/react.svg
rename to v3/internal/templates/react-swc-ts/frontend/public/react.svg
diff --git a/v3/internal/templates/react-swc-ts/frontend/public/style.css b/v3/internal/templates/react-swc-ts/frontend/public/style.css
new file mode 100644
index 000000000..aa051a454
--- /dev/null
+++ b/v3/internal/templates/react-swc-ts/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/react-swc-ts/frontend/src/App.css b/v3/internal/templates/react-swc-ts/frontend/src/App.css
deleted file mode 100644
index 2c5e2ef5c..000000000
--- a/v3/internal/templates/react-swc-ts/frontend/src/App.css
+++ /dev/null
@@ -1,41 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/v3/internal/templates/react-swc-ts/frontend/src/App.tsx b/v3/internal/templates/react-swc-ts/frontend/src/App.tsx
index cd201360b..5001c49c1 100644
--- a/v3/internal/templates/react-swc-ts/frontend/src/App.tsx
+++ b/v3/internal/templates/react-swc-ts/frontend/src/App.tsx
@@ -1,34 +1,55 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import './App.css'
+import { useState, useEffect } from 'react'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events, WML} from "@wailsio/runtime";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [name, setName] = useState<string>('');
+  const [result, setResult] = useState<string>('Please enter your name below 👇');
+  const [time, setTime] = useState<string>('Listening for Time event...');
+
+  const doGreet = () => {
+    if (!name) {
+      setName('from Go');
+    }
+    Greet(name).then((resultValue: string) => {
+      setResult(resultValue);
+    }).catch((err: any) => {
+      console.log(err);
+    });
+  }
+
+  useEffect(() => {
+    Events.On('time', (timeValue: any) => {
+      setTime(timeValue.data);
+    });
+    // Reload WML so it picks up the wml tags
+    WML.Reload();
+  }, []);
 
   return (
-    <div className="App">
+    <div className="container">
       <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        <a wml-openURL="https://wails.io">
+          <img src="/wails.png" className="logo" alt="Wails logo"/>
         </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+        <a wml-openURL="https://reactjs.org">
+          <img src="/react.svg" className="logo react" alt="React logo"/>
         </a>
       </div>
-      <h1>Vite + React</h1>
+      <h1>Wails + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+        <div className="result">{result}</div>
+        <div className="input-box">
+          <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
+          <button className="btn" onClick={doGreet}>Greet</button>
+        </div>
+      </div>
+      <div className="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p>{time}</p></div>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </div>
   )
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/v3/internal/templates/react-swc-ts/frontend/src/index.css b/v3/internal/templates/react-swc-ts/frontend/src/index.css
deleted file mode 100644
index 917888c1d..000000000
--- a/v3/internal/templates/react-swc-ts/frontend/src/index.css
+++ /dev/null
@@ -1,70 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/react-swc-ts/frontend/src/main.tsx b/v3/internal/templates/react-swc-ts/frontend/src/main.tsx
index 791f139e2..3e1823139 100644
--- a/v3/internal/templates/react-swc-ts/frontend/src/main.tsx
+++ b/v3/internal/templates/react-swc-ts/frontend/src/main.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
diff --git a/v3/internal/templates/react-swc-ts/frontend/tsconfig.json b/v3/internal/templates/react-swc-ts/frontend/tsconfig.json
index 3d0a51a86..a7fc6fbf2 100644
--- a/v3/internal/templates/react-swc-ts/frontend/tsconfig.json
+++ b/v3/internal/templates/react-swc-ts/frontend/tsconfig.json
@@ -1,20 +1,24 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
diff --git a/v3/internal/templates/react-swc-ts/frontend/tsconfig.node.json b/v3/internal/templates/react-swc-ts/frontend/tsconfig.node.json
index 9d31e2aed..42872c59f 100644
--- a/v3/internal/templates/react-swc-ts/frontend/tsconfig.node.json
+++ b/v3/internal/templates/react-swc-ts/frontend/tsconfig.node.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "composite": true,
+    "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]
diff --git a/v3/internal/templates/react-swc/frontend/index.html b/v3/internal/templates/react-swc/frontend/index.html
index fe5530dd4..468143c3d 100644
--- a/v3/internal/templates/react-swc/frontend/index.html
+++ b/v3/internal/templates/react-swc/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
     <title>Wails + React</title>
   </head>
   <body>
diff --git a/v3/internal/templates/react-swc/frontend/package.json b/v3/internal/templates/react-swc/frontend/package.json
index 6583b9c4b..a4abd7199 100644
--- a/v3/internal/templates/react-swc/frontend/package.json
+++ b/v3/internal/templates/react-swc/frontend/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -13,9 +14,14 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "vite": "^4.0.0"
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "vite": "^5.0.8",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/react-swc/frontend/public/Inter-Medium.ttf b/v3/internal/templates/react-swc/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/react-swc/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/react-swc/frontend/src/assets/react.svg b/v3/internal/templates/react-swc/frontend/public/react.svg
similarity index 100%
rename from v3/internal/templates/react-swc/frontend/src/assets/react.svg
rename to v3/internal/templates/react-swc/frontend/public/react.svg
diff --git a/v3/internal/templates/react-swc/frontend/public/style.css b/v3/internal/templates/react-swc/frontend/public/style.css
new file mode 100644
index 000000000..aa051a454
--- /dev/null
+++ b/v3/internal/templates/react-swc/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/react-swc/frontend/src/App.css b/v3/internal/templates/react-swc/frontend/src/App.css
deleted file mode 100644
index 2c5e2ef5c..000000000
--- a/v3/internal/templates/react-swc/frontend/src/App.css
+++ /dev/null
@@ -1,41 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/v3/internal/templates/react-swc/frontend/src/App.jsx b/v3/internal/templates/react-swc/frontend/src/App.jsx
index ef0adc0d5..3978f55d4 100644
--- a/v3/internal/templates/react-swc/frontend/src/App.jsx
+++ b/v3/internal/templates/react-swc/frontend/src/App.jsx
@@ -1,34 +1,55 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import './App.css'
+import { useState, useEffect } from 'react'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events, WML} from "@wailsio/runtime";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [name, setName] = useState('');
+  const [result, setResult] = useState('Please enter your name below 👇');
+  const [time, setTime] = useState('Listening for Time event...');
+
+  const doGreet = () => {
+    if (!name) {
+      setName('from Go');
+    }
+    Greet(name).then((resultValue) => {
+      setResult(resultValue);
+    }).catch((err) => {
+      console.log(err);
+    });
+  }
+
+  useEffect(() => {
+    Events.On('time', (timeValue) => {
+      setTime(timeValue.data);
+    });
+    // Reload WML so it picks up the wml tags
+    WML.Reload();
+  }, []);
 
   return (
-    <div className="App">
+    <div className="container">
       <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        <a wml-openURL="https://wails.io">
+          <img src="/wails.png" className="logo" alt="Wails logo"/>
         </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+        <a wml-openURL="https://reactjs.org">
+          <img src='/react.svg' className="logo react" alt="React logo"/>
         </a>
       </div>
-      <h1>Vite + React</h1>
+      <h1>Wails + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
+        <div className="result">{result}</div>
+        <div className="input-box">
+          <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
+          <button className="btn" onClick={doGreet}>Greet</button>
+        </div>
+      </div>
+      <div className="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p>{time}</p></div>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </div>
   )
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/v3/internal/templates/react-swc/frontend/src/index.css b/v3/internal/templates/react-swc/frontend/src/index.css
deleted file mode 100644
index 917888c1d..000000000
--- a/v3/internal/templates/react-swc/frontend/src/index.css
+++ /dev/null
@@ -1,70 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/react-swc/frontend/src/main.jsx b/v3/internal/templates/react-swc/frontend/src/main.jsx
index 5cc599199..1943cc824 100644
--- a/v3/internal/templates/react-swc/frontend/src/main.jsx
+++ b/v3/internal/templates/react-swc/frontend/src/main.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
diff --git a/v3/internal/templates/react-ts/frontend/index.html b/v3/internal/templates/react-ts/frontend/index.html
index 28868c572..0dba04049 100644
--- a/v3/internal/templates/react-ts/frontend/index.html
+++ b/v3/internal/templates/react-ts/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
     <title>Wails + React + TS</title>
   </head>
   <body>
diff --git a/v3/internal/templates/react-ts/frontend/package.json b/v3/internal/templates/react-ts/frontend/package.json
index e846a02c1..b6734687c 100644
--- a/v3/internal/templates/react-ts/frontend/package.json
+++ b/v3/internal/templates/react-ts/frontend/package.json
@@ -1,11 +1,12 @@
 {
-  "name": "frontend",
+  "name": "react-ts-latest",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -13,10 +14,16 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^3.0.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "@wailsio/runtime": "latest"
   }
-}
\ No newline at end of file
+}
diff --git a/v3/internal/templates/react-ts/frontend/public/Inter-Medium.ttf b/v3/internal/templates/react-ts/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/react-ts/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/react-ts/frontend/src/assets/react.svg b/v3/internal/templates/react-ts/frontend/public/react.svg
similarity index 100%
rename from v3/internal/templates/react-ts/frontend/src/assets/react.svg
rename to v3/internal/templates/react-ts/frontend/public/react.svg
diff --git a/v3/internal/templates/react-ts/frontend/public/style.css b/v3/internal/templates/react-ts/frontend/public/style.css
new file mode 100644
index 000000000..aa051a454
--- /dev/null
+++ b/v3/internal/templates/react-ts/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/react-ts/frontend/src/App.css b/v3/internal/templates/react-ts/frontend/src/App.css
deleted file mode 100644
index 2c5e2ef5c..000000000
--- a/v3/internal/templates/react-ts/frontend/src/App.css
+++ /dev/null
@@ -1,41 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/v3/internal/templates/react-ts/frontend/src/App.tsx b/v3/internal/templates/react-ts/frontend/src/App.tsx
index cd201360b..5001c49c1 100644
--- a/v3/internal/templates/react-ts/frontend/src/App.tsx
+++ b/v3/internal/templates/react-ts/frontend/src/App.tsx
@@ -1,34 +1,55 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import './App.css'
+import { useState, useEffect } from 'react'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events, WML} from "@wailsio/runtime";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [name, setName] = useState<string>('');
+  const [result, setResult] = useState<string>('Please enter your name below 👇');
+  const [time, setTime] = useState<string>('Listening for Time event...');
+
+  const doGreet = () => {
+    if (!name) {
+      setName('from Go');
+    }
+    Greet(name).then((resultValue: string) => {
+      setResult(resultValue);
+    }).catch((err: any) => {
+      console.log(err);
+    });
+  }
+
+  useEffect(() => {
+    Events.On('time', (timeValue: any) => {
+      setTime(timeValue.data);
+    });
+    // Reload WML so it picks up the wml tags
+    WML.Reload();
+  }, []);
 
   return (
-    <div className="App">
+    <div className="container">
       <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        <a wml-openURL="https://wails.io">
+          <img src="/wails.png" className="logo" alt="Wails logo"/>
         </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+        <a wml-openURL="https://reactjs.org">
+          <img src="/react.svg" className="logo react" alt="React logo"/>
         </a>
       </div>
-      <h1>Vite + React</h1>
+      <h1>Wails + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+        <div className="result">{result}</div>
+        <div className="input-box">
+          <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
+          <button className="btn" onClick={doGreet}>Greet</button>
+        </div>
+      </div>
+      <div className="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p>{time}</p></div>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </div>
   )
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/v3/internal/templates/react-ts/frontend/src/index.css b/v3/internal/templates/react-ts/frontend/src/index.css
deleted file mode 100644
index 917888c1d..000000000
--- a/v3/internal/templates/react-ts/frontend/src/index.css
+++ /dev/null
@@ -1,70 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/react-ts/frontend/src/main.tsx b/v3/internal/templates/react-ts/frontend/src/main.tsx
index 791f139e2..3e1823139 100644
--- a/v3/internal/templates/react-ts/frontend/src/main.tsx
+++ b/v3/internal/templates/react-ts/frontend/src/main.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
diff --git a/v3/internal/templates/react-ts/frontend/tsconfig.json b/v3/internal/templates/react-ts/frontend/tsconfig.json
index 3d0a51a86..a7fc6fbf2 100644
--- a/v3/internal/templates/react-ts/frontend/tsconfig.json
+++ b/v3/internal/templates/react-ts/frontend/tsconfig.json
@@ -1,20 +1,24 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
diff --git a/v3/internal/templates/react-ts/frontend/tsconfig.node.json b/v3/internal/templates/react-ts/frontend/tsconfig.node.json
index 9d31e2aed..42872c59f 100644
--- a/v3/internal/templates/react-ts/frontend/tsconfig.node.json
+++ b/v3/internal/templates/react-ts/frontend/tsconfig.node.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "composite": true,
+    "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]
diff --git a/v3/internal/templates/react/frontend/index.html b/v3/internal/templates/react/frontend/index.html
index fe5530dd4..468143c3d 100644
--- a/v3/internal/templates/react/frontend/index.html
+++ b/v3/internal/templates/react/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
     <title>Wails + React</title>
   </head>
   <body>
diff --git a/v3/internal/templates/react/frontend/package.json b/v3/internal/templates/react/frontend/package.json
index 2371d17c8..b324de921 100644
--- a/v3/internal/templates/react/frontend/package.json
+++ b/v3/internal/templates/react/frontend/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -13,9 +14,14 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^3.0.0",
-    "vite": "^4.0.0"
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "vite": "^5.0.8",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/react/frontend/public/Inter-Medium.ttf b/v3/internal/templates/react/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/react/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/react/frontend/src/assets/react.svg b/v3/internal/templates/react/frontend/public/react.svg
similarity index 100%
rename from v3/internal/templates/react/frontend/src/assets/react.svg
rename to v3/internal/templates/react/frontend/public/react.svg
diff --git a/v3/internal/templates/react/frontend/public/style.css b/v3/internal/templates/react/frontend/public/style.css
new file mode 100644
index 000000000..aa051a454
--- /dev/null
+++ b/v3/internal/templates/react/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/react/frontend/src/App.css b/v3/internal/templates/react/frontend/src/App.css
deleted file mode 100644
index 2c5e2ef5c..000000000
--- a/v3/internal/templates/react/frontend/src/App.css
+++ /dev/null
@@ -1,41 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/v3/internal/templates/react/frontend/src/App.jsx b/v3/internal/templates/react/frontend/src/App.jsx
index ef0adc0d5..b1b7c07b3 100644
--- a/v3/internal/templates/react/frontend/src/App.jsx
+++ b/v3/internal/templates/react/frontend/src/App.jsx
@@ -1,34 +1,55 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import './App.css'
+import { useState, useEffect } from 'react'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events, WML} from "@wailsio/runtime";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [name, setName] = useState('');
+  const [result, setResult] = useState('Please enter your name below 👇');
+  const [time, setTime] = useState('Listening for Time event...');
+
+  const doGreet = () => {
+    if (!name) {
+      setName('from Go');
+    }
+    Greet(name).then((resultValue) => {
+      setResult(resultValue);
+    }).catch((err) => {
+      console.log(err);
+    });
+  }
+
+  useEffect(() => {
+    Events.On('time', (timeValue) => {
+      setTime(timeValue.data);
+    });
+    // Reload WML so it picks up the wml tags
+    WML.Reload();
+  }, []);
 
   return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
+      <div className="container">
+        <div>
+          <a wml:openURL="https://wails.io">
+            <img src="/wails.png" className="logo" alt="Wails logo"/>
+          </a>
+          <a wml:openURL="https://reactjs.org">
+            <img src='/react.svg' className="logo react" alt="React logo"/>
+          </a>
+        </div>
+        <h1>Wails + React</h1>
+        <div className="card">
+          <div className="result">{result}</div>
+          <div className="input-box">
+            <input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
+            <button className="btn" onClick={doGreet}>Greet</button>
+          </div>
+        </div>
+        <div className="footer">
+          <div><p>Click on the Wails logo to learn more</p></div>
+          <div><p>{time}</p></div>
+        </div>
       </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
   )
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/v3/internal/templates/react/frontend/src/index.css b/v3/internal/templates/react/frontend/src/index.css
deleted file mode 100644
index 917888c1d..000000000
--- a/v3/internal/templates/react/frontend/src/index.css
+++ /dev/null
@@ -1,70 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/react/frontend/src/main.jsx b/v3/internal/templates/react/frontend/src/main.jsx
index 5cc599199..1943cc824 100644
--- a/v3/internal/templates/react/frontend/src/main.jsx
+++ b/v3/internal/templates/react/frontend/src/main.jsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
diff --git a/v3/internal/templates/solid-ts/frontend/.gitignore b/v3/internal/templates/solid-ts/frontend/.gitignore
new file mode 100644
index 000000000..a547bf36d
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/v3/internal/templates/solid-ts/frontend/index.html b/v3/internal/templates/solid-ts/frontend/index.html
new file mode 100644
index 000000000..86dfcc88e
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
+    <title>Vite + Solid + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/v3/internal/templates/solid-ts/frontend/package.json b/v3/internal/templates/solid-ts/frontend/package.json
new file mode 100644
index 000000000..8cf09bd0c
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "solid-ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.7"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-solid": "^2.8.0",
+    "@wailsio/runtime": "latest"
+  }
+}
diff --git a/v3/internal/templates/solid-ts/frontend/public/Inter-Medium.ttf b/v3/internal/templates/solid-ts/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/solid-ts/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/solid-ts/frontend/public/solid.svg b/v3/internal/templates/solid-ts/frontend/public/solid.svg
new file mode 100644
index 000000000..025aa303c
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/public/solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
\ No newline at end of file
diff --git a/v3/internal/templates/solid-ts/frontend/public/style.css b/v3/internal/templates/solid-ts/frontend/public/style.css
new file mode 100644
index 000000000..5bd8f9773
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.solid:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/solid-ts/frontend/public/wails.png b/v3/internal/templates/solid-ts/frontend/public/wails.png
new file mode 100644
index 000000000..8bdf42483
Binary files /dev/null and b/v3/internal/templates/solid-ts/frontend/public/wails.png differ
diff --git a/v3/internal/templates/solid-ts/frontend/src/App.tsx b/v3/internal/templates/solid-ts/frontend/src/App.tsx
new file mode 100644
index 000000000..3725b5887
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/src/App.tsx
@@ -0,0 +1,53 @@
+import { createSignal, onMount } from 'solid-js'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events} from "@wailsio/runtime";
+
+function App() {
+  const [name, setName] = createSignal('');
+  const [result, setResult] = createSignal('Please enter your name below 👇');
+  const [time, setTime] = createSignal('Listening for Time event...');
+
+  const doGreet = () => {
+    if (!name()) {
+      setName('from Go');
+    }
+    Greet(name()).then((resultValue: string) => {
+      setResult(resultValue);
+    }).catch((err: any) => {
+      console.log(err);
+    });
+  }
+
+  onMount(() => {
+    Events.On('time', (timeValue: any) => {
+      setTime(timeValue.data);
+    });
+  });
+
+  return (
+    <div class="container">
+      <div>
+        <a wml-openURL="https://wails.io">
+          <img src="/wails.png" class="logo" alt="Wails logo"/>
+        </a>
+        <a wml-openURL="https://solidjs.com">
+          <img src="/solid.svg" class="logo solid" alt="Solid logo"/>
+        </a>
+      </div>
+      <h1>Wails + Solid</h1>
+      <div class="card">
+        <div class="result">{result()}</div>
+        <div class="input-box">
+          <input class="input" value={name()} onInput={(e) => setName(e.currentTarget.value)} type="text" autocomplete="off"/>
+          <button class="btn" onClick={doGreet}>Greet</button>
+        </div>
+      </div>
+      <div class="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p>{time()}</p></div>
+      </div>
+    </div>
+  )
+}
+
+export default App
\ No newline at end of file
diff --git a/v3/internal/templates/solid-ts/frontend/src/index.tsx b/v3/internal/templates/solid-ts/frontend/src/index.tsx
new file mode 100644
index 000000000..ff5c09ee3
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/src/index.tsx
@@ -0,0 +1,7 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+import App from './App'
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)
diff --git a/v3/internal/templates/solid-ts/frontend/tsconfig.json b/v3/internal/templates/solid-ts/frontend/tsconfig.json
new file mode 100644
index 000000000..399995840
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/v3/internal/templates/solid-ts/frontend/tsconfig.node.json b/v3/internal/templates/solid-ts/frontend/tsconfig.node.json
new file mode 100644
index 000000000..42872c59f
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/v3/internal/templates/solid-ts/frontend/vite.config.ts b/v3/internal/templates/solid-ts/frontend/vite.config.ts
new file mode 100644
index 000000000..4095d9be5
--- /dev/null
+++ b/v3/internal/templates/solid-ts/frontend/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})
diff --git a/v3/internal/templates/solid-ts/template.json b/v3/internal/templates/solid-ts/template.json
new file mode 100644
index 000000000..529ec4c0c
--- /dev/null
+++ b/v3/internal/templates/solid-ts/template.json
@@ -0,0 +1,8 @@
+{
+  "name": "Solid + Vite (Typescript)",
+  "shortname": "solid-ts",
+  "author": "Lea Anthony",
+  "description": "Solid (Typescript) + Vite development server",
+  "helpurl": "https://wails.io",
+  "version": 3
+}
\ No newline at end of file
diff --git a/v3/internal/templates/solid/frontend/.gitignore b/v3/internal/templates/solid/frontend/.gitignore
new file mode 100644
index 000000000..a547bf36d
--- /dev/null
+++ b/v3/internal/templates/solid/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/v3/internal/templates/solid/frontend/index.html b/v3/internal/templates/solid/frontend/index.html
new file mode 100644
index 000000000..b074274aa
--- /dev/null
+++ b/v3/internal/templates/solid/frontend/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
+    <title>Vite + Solid</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/v3/internal/templates/solid/frontend/package.json b/v3/internal/templates/solid/frontend/package.json
new file mode 100644
index 000000000..9a4aaa65e
--- /dev/null
+++ b/v3/internal/templates/solid/frontend/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "solid-latest",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.7"
+  },
+  "devDependencies": {
+    "vite": "^5.0.8",
+    "vite-plugin-solid": "^2.8.0",
+    "@wailsio/runtime": "latest"
+  }
+}
diff --git a/v3/internal/templates/solid/frontend/public/Inter-Medium.ttf b/v3/internal/templates/solid/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/solid/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/solid/frontend/public/solid.svg b/v3/internal/templates/solid/frontend/public/solid.svg
new file mode 100644
index 000000000..025aa303c
--- /dev/null
+++ b/v3/internal/templates/solid/frontend/public/solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
\ No newline at end of file
diff --git a/v3/internal/templates/solid/frontend/public/style.css b/v3/internal/templates/solid/frontend/public/style.css
new file mode 100644
index 000000000..5bd8f9773
--- /dev/null
+++ b/v3/internal/templates/solid/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.solid:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/solid/frontend/public/wails.png b/v3/internal/templates/solid/frontend/public/wails.png
new file mode 100644
index 000000000..8bdf42483
Binary files /dev/null and b/v3/internal/templates/solid/frontend/public/wails.png differ
diff --git a/v3/internal/templates/solid/frontend/src/App.jsx b/v3/internal/templates/solid/frontend/src/App.jsx
new file mode 100644
index 000000000..f49625ffb
--- /dev/null
+++ b/v3/internal/templates/solid/frontend/src/App.jsx
@@ -0,0 +1,53 @@
+import { createSignal, onMount } from 'solid-js'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events} from "@wailsio/runtime";
+
+function App() {
+  const [name, setName] = createSignal('');
+  const [result, setResult] = createSignal('Please enter your name below 👇');
+  const [time, setTime] = createSignal('Listening for Time event...');
+
+  const doGreet = () => {
+    if (!name()) {
+      setName('from Go');
+    }
+    Greet(name()).then((resultValue) => {
+      setResult(resultValue);
+    }).catch((err) => {
+      console.log(err);
+    });
+  }
+
+  onMount(() => {
+    Events.On('time', (timeValue) => {
+      setTime(timeValue.data);
+    });
+  });
+
+  return (
+    <div className="container">
+      <div>
+        <a wml-openURL="https://wails.io">
+          <img src="/wails.png" className="logo" alt="Wails logo"/>
+        </a>
+        <a wml-openURL="https://solidjs.com">
+          <img src="/solid.svg" className="logo solid" alt="Solid logo"/>
+        </a>
+      </div>
+      <h1>Wails + Solid</h1>
+      <div className="card">
+        <div className="result">{result()}</div>
+        <div className="input-box">
+          <input className="input" value={name()} onInput={(e) => setName(e.target.value)} type="text" autocomplete="off"/>
+          <button className="btn" onClick={doGreet}>Greet</button>
+        </div>
+      </div>
+      <div className="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p>{time()}</p></div>
+      </div>
+    </div>
+  )
+}
+
+export default App
\ No newline at end of file
diff --git a/v3/internal/templates/solid/frontend/src/index.jsx b/v3/internal/templates/solid/frontend/src/index.jsx
new file mode 100644
index 000000000..fd6808055
--- /dev/null
+++ b/v3/internal/templates/solid/frontend/src/index.jsx
@@ -0,0 +1,8 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import App from './App'
+
+const root = document.getElementById('root')
+
+render(() => <App />, root)
diff --git a/v3/internal/templates/solid/frontend/vite.config.js b/v3/internal/templates/solid/frontend/vite.config.js
new file mode 100644
index 000000000..4095d9be5
--- /dev/null
+++ b/v3/internal/templates/solid/frontend/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})
diff --git a/v3/internal/templates/solid/template.json b/v3/internal/templates/solid/template.json
new file mode 100644
index 000000000..352b6eb1a
--- /dev/null
+++ b/v3/internal/templates/solid/template.json
@@ -0,0 +1,8 @@
+{
+  "name": "Solid + Vite",
+  "shortname": "solid",
+  "author": "Lea Anthony",
+  "description": "Solid + Vite development server",
+  "helpurl": "https://wails.io",
+  "version": 3
+}
\ No newline at end of file
diff --git a/v3/internal/templates/svelte-ts/frontend/README.md b/v3/internal/templates/svelte-ts/frontend/README.md
deleted file mode 100644
index e6cd94fce..000000000
--- a/v3/internal/templates/svelte-ts/frontend/README.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Svelte + TS + Vite
-
-This template should help get you started developing with Svelte and TypeScript in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
-
-## Need an official Svelte framework?
-
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
-
-## Technical considerations
-
-**Why use this over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
-
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
-
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `allowJs` in the TS template?**
-
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
-
-**Why is HMR not preserving my local component state?**
-
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
-
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
-
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
-```
diff --git a/v3/internal/templates/svelte-ts/frontend/index.html b/v3/internal/templates/svelte-ts/frontend/index.html
index a7eaac78d..02e1fd7d1 100644
--- a/v3/internal/templates/svelte-ts/frontend/index.html
+++ b/v3/internal/templates/svelte-ts/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
     <title>Wails + Svelte + TS</title>
   </head>
   <body>
diff --git a/v3/internal/templates/svelte-ts/frontend/package.json b/v3/internal/templates/svelte-ts/frontend/package.json
index 222683e0d..231af17f7 100644
--- a/v3/internal/templates/svelte-ts/frontend/package.json
+++ b/v3/internal/templates/svelte-ts/frontend/package.json
@@ -10,12 +10,13 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.0",
-    "@tsconfig/svelte": "^3.0.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^2.10.0",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/svelte-ts/frontend/public/Inter-Medium.ttf b/v3/internal/templates/svelte-ts/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/svelte-ts/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/svelte-ts/frontend/public/style.css b/v3/internal/templates/svelte-ts/frontend/public/style.css
new file mode 100644
index 000000000..7b0193862
--- /dev/null
+++ b/v3/internal/templates/svelte-ts/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.vanilla:hover {
+    filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/svelte-ts/frontend/src/assets/svelte.svg b/v3/internal/templates/svelte-ts/frontend/public/svelte.svg
similarity index 100%
rename from v3/internal/templates/svelte-ts/frontend/src/assets/svelte.svg
rename to v3/internal/templates/svelte-ts/frontend/public/svelte.svg
diff --git a/v3/internal/templates/svelte-ts/frontend/src/App.svelte b/v3/internal/templates/svelte-ts/frontend/src/App.svelte
index 1e9dc0394..642b484e8 100644
--- a/v3/internal/templates/svelte-ts/frontend/src/App.svelte
+++ b/v3/internal/templates/svelte-ts/frontend/src/App.svelte
@@ -1,45 +1,50 @@
 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
-  import Counter from './lib/Counter.svelte'
+  import {Greet} from "../bindings/main/GreetService.js";
+  import {Events} from "@wailsio/runtime";
+
+  let name: string = '';
+  let result: string = 'Please enter your name below 👇';
+  let time: string = 'Listening for Time event...';
+
+  const doGreet = (): void => {
+    if (!name) {
+      name = 'from Go';
+    }
+    Greet(name).then((resultValue: string) => {
+      result = resultValue;
+    }).catch((err: any) => {
+      console.log(err);
+    });
+  }
+
+  Events.On('time', (timeValue: any) => {
+    time = timeValue.data;
+  });
 </script>
 
-<main>
+<div class="container">
   <div>
-    <a href="https://vitejs.dev" target="_blank" rel="noreferrer"> 
-      <img src="/vite.svg" class="logo" alt="Vite Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer"> 
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-    </a>
+    <span wml-openURL="https://wails.io">
+      <img src="/wails.png" class="logo" alt="Wails logo"/>
+    </span>
+    <span wml-openURL="https://svelte.dev">
+      <img src="/svelte.svg" class="logo svelte" alt="Svelte logo"/>
+    </span>
   </div>
-  <h1>Vite + Svelte</h1>
-
+  <h1>Wails + Svelte</h1>
   <div class="card">
-    <Counter />
+    <div class="result">{result}</div>
+    <div class="input-box">
+      <input class="input" bind:value={name} type="text" autocomplete="off"/>
+      <button class="btn" on:click={doGreet}>Greet</button>
+    </div>
   </div>
-
-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
-  </p>
-
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
-</main>
+  <div class="footer">
+    <div><p>Click on the Wails logo to learn more</p></div>
+    <div><p>{time}</p></div>
+  </div>
+</div>
 
 <style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
-  }
-  .read-the-docs {
-    color: #888;
-  }
+  /* Put your standard CSS here */
 </style>
\ No newline at end of file
diff --git a/v3/internal/templates/svelte-ts/frontend/src/app.css b/v3/internal/templates/svelte-ts/frontend/src/app.css
deleted file mode 100644
index bcc7233dd..000000000
--- a/v3/internal/templates/svelte-ts/frontend/src/app.css
+++ /dev/null
@@ -1,81 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/svelte-ts/frontend/src/lib/Counter.svelte b/v3/internal/templates/svelte-ts/frontend/src/lib/Counter.svelte
deleted file mode 100644
index 979b4dfc9..000000000
--- a/v3/internal/templates/svelte-ts/frontend/src/lib/Counter.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  let count: number = 0
-  const increment = () => {
-    count += 1
-  }
-</script>
-
-<button on:click={increment}>
-  count is {count}
-</button>
diff --git a/v3/internal/templates/svelte-ts/frontend/src/main.ts b/v3/internal/templates/svelte-ts/frontend/src/main.ts
index 8a909a15a..fb363569d 100644
--- a/v3/internal/templates/svelte-ts/frontend/src/main.ts
+++ b/v3/internal/templates/svelte-ts/frontend/src/main.ts
@@ -1,4 +1,3 @@
-import './app.css'
 import App from './App.svelte'
 
 const app = new App({
diff --git a/v3/internal/templates/svelte-ts/frontend/tsconfig.json b/v3/internal/templates/svelte-ts/frontend/tsconfig.json
index c4e1c5fe6..5fb548f2b 100644
--- a/v3/internal/templates/svelte-ts/frontend/tsconfig.json
+++ b/v3/internal/templates/svelte-ts/frontend/tsconfig.json
@@ -15,6 +15,6 @@
     "checkJs": true,
     "isolatedModules": true
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/v3/internal/templates/svelte-ts/frontend/tsconfig.node.json b/v3/internal/templates/svelte-ts/frontend/tsconfig.node.json
index 65dbdb96a..494bfe083 100644
--- a/v3/internal/templates/svelte-ts/frontend/tsconfig.node.json
+++ b/v3/internal/templates/svelte-ts/frontend/tsconfig.node.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "composite": true,
+    "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "Node"
+    "moduleResolution": "bundler"
   },
   "include": ["vite.config.ts"]
 }
diff --git a/v3/internal/templates/svelte/frontend/index.html b/v3/internal/templates/svelte/frontend/index.html
index 1ea50f904..20f11c0c0 100644
--- a/v3/internal/templates/svelte/frontend/index.html
+++ b/v3/internal/templates/svelte/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
     <title>Wails + Svelte</title>
   </head>
   <body>
diff --git a/v3/internal/templates/svelte/frontend/package.json b/v3/internal/templates/svelte/frontend/package.json
index 2e166feea..37b952774 100644
--- a/v3/internal/templates/svelte/frontend/package.json
+++ b/v3/internal/templates/svelte/frontend/package.json
@@ -9,8 +9,9 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.0",
-    "svelte": "^3.54.0",
-    "vite": "^4.0.0"
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "svelte": "^4.2.8",
+    "vite": "^5.0.8",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/svelte/frontend/public/Inter-Medium.ttf b/v3/internal/templates/svelte/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/svelte/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/svelte/frontend/public/style.css b/v3/internal/templates/svelte/frontend/public/style.css
new file mode 100644
index 000000000..7b0193862
--- /dev/null
+++ b/v3/internal/templates/svelte/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.vanilla:hover {
+    filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/svelte/frontend/src/assets/svelte.svg b/v3/internal/templates/svelte/frontend/public/svelte.svg
similarity index 100%
rename from v3/internal/templates/svelte/frontend/src/assets/svelte.svg
rename to v3/internal/templates/svelte/frontend/public/svelte.svg
diff --git a/v3/internal/templates/svelte/frontend/src/App.svelte b/v3/internal/templates/svelte/frontend/src/App.svelte
index 539c395dd..4fcfc708a 100644
--- a/v3/internal/templates/svelte/frontend/src/App.svelte
+++ b/v3/internal/templates/svelte/frontend/src/App.svelte
@@ -1,45 +1,50 @@
 <script>
-  import svelteLogo from './assets/svelte.svg'
-  import Counter from './lib/Counter.svelte'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events} from "@wailsio/runtime";
+
+let name = '';
+let result = 'Please enter your name below 👇';
+let time = 'Listening for Time event...';
+
+const doGreet = () => {
+  if (!name) {
+    name = 'from Go';
+  }
+  Greet(name).then((resultValue) => {
+    result = resultValue;
+  }).catch((err) => {
+    console.log(err);
+  });
+}
+
+Events.On('time', (timeValue) => {
+  time = timeValue.data;
+});
 </script>
 
-<main>
+<div class="container">
   <div>
-    <a href="https://wails.io" target="_blank" rel="noreferrer">
-      <img src="/wails.png" class="logo" alt="Wails Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer"> 
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-    </a>
+    <span wml-openURL="https://wails.io">
+      <img src="/wails.png" class="logo" alt="Wails logo"/>
+    </span>
+    <span wml-openURL="https://svelte.dev">
+      <img src="/svelte.svg" class="logo svelte" alt="Svelte logo"/>
+    </span>
   </div>
   <h1>Wails + Svelte</h1>
-
   <div class="card">
-    <Counter />
+    <div class="result">{result}</div>
+    <div class="input-box">
+      <input class="input" bind:value={name} type="text" autocomplete="off"/>
+      <button class="btn" on:click={doGreet}>Greet</button>
+    </div>
   </div>
-
-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
-  </p>
-
-  <p class="read-the-docs">
-    Click on the Wails and Svelte logos to learn more
-  </p>
-</main>
+  <div class="footer">
+    <div><p>Click on the Wails logo to learn more</p></div>
+    <div><p>{time}</p></div>
+  </div>
+</div>
 
 <style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
-  }
-  .read-the-docs {
-    color: #888;
-  }
-</style>
+  /* Put your standard CSS here */
+</style>
\ No newline at end of file
diff --git a/v3/internal/templates/svelte/frontend/src/app.css b/v3/internal/templates/svelte/frontend/src/app.css
deleted file mode 100644
index bcc7233dd..000000000
--- a/v3/internal/templates/svelte/frontend/src/app.css
+++ /dev/null
@@ -1,81 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/svelte/frontend/src/lib/Counter.svelte b/v3/internal/templates/svelte/frontend/src/lib/Counter.svelte
deleted file mode 100644
index e45f90310..000000000
--- a/v3/internal/templates/svelte/frontend/src/lib/Counter.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-  let count = 0
-  const increment = () => {
-    count += 1
-  }
-</script>
-
-<button on:click={increment}>
-  count is {count}
-</button>
diff --git a/v3/internal/templates/svelte/frontend/src/main.js b/v3/internal/templates/svelte/frontend/src/main.js
index 8a909a15a..fb363569d 100644
--- a/v3/internal/templates/svelte/frontend/src/main.js
+++ b/v3/internal/templates/svelte/frontend/src/main.js
@@ -1,4 +1,3 @@
-import './app.css'
 import App from './App.svelte'
 
 const app = new App({
diff --git a/v3/internal/templates/templates.go b/v3/internal/templates/templates.go
index 230b311c8..84cba9e8c 100644
--- a/v3/internal/templates/templates.go
+++ b/v3/internal/templates/templates.go
@@ -71,6 +71,7 @@ func GetDefaultTemplates() []TemplateData {
 type TemplateOptions struct {
 	*flags.Init
 	LocalModulePath string
+	UseTypescript   bool
 }
 
 func getInternalTemplate(templateName string) (*Template, error) {
@@ -218,9 +219,12 @@ func Install(options *flags.Init) error {
 		return err
 	}
 
+	UseTypescript := strings.HasSuffix(options.TemplateName, "-ts")
+
 	templateData := TemplateOptions{
-		options,
-		filepath.ToSlash(relativePath + "/"),
+		Init:            options,
+		LocalModulePath: filepath.ToSlash(relativePath + "/"),
+		UseTypescript:   UseTypescript,
 	}
 
 	defer func() {
diff --git a/v3/internal/templates/vanilla-ts/frontend/index.html b/v3/internal/templates/vanilla-ts/frontend/index.html
index 3da9b4918..3f05e5d9d 100644
--- a/v3/internal/templates/vanilla-ts/frontend/index.html
+++ b/v3/internal/templates/vanilla-ts/frontend/index.html
@@ -1,13 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/wails.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wails + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/wails.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="stylesheet" href="/style.css"/>
+    <title>Wails App</title>
+</head>
+<body>
+<div class="container">
+    <div>
+        <a wml-openURL="https://wails.io">
+            <img src="/wails.png" class="logo" alt="Wails logo"/>
+        </a>
+        <a wml-openURL="https://www.typescriptlang.org/">
+            <img src="/typescript.svg" class="logo vanilla" alt="Typescript logo"/>
+        </a>
+    </div>
+    <h1>Wails + Typescript</h1>
+    <div class="card">
+        <div class="result" id="result">Please enter your name below 👇</div>
+        <div class="input-box" id="input">
+            <input class="input" id="name" type="text" autocomplete="off"/>
+            <button class="btn" id="greet">Greet</button>
+        </div>
+    </div>
+    <div class="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p id="time">Listening for Time event...</p></div>
+    </div>
+</div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
diff --git a/v3/internal/templates/vanilla-ts/frontend/package.json b/v3/internal/templates/vanilla-ts/frontend/package.json
index fddd59a6c..ad324c4b0 100644
--- a/v3/internal/templates/vanilla-ts/frontend/package.json
+++ b/v3/internal/templates/vanilla-ts/frontend/package.json
@@ -5,11 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build --minify false --mode development",
+    "build:prod": "tsc && vite build --mode production",
     "preview": "vite preview"
   },
   "devDependencies": {
     "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "vite": "^5.0.0",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/vanilla-ts/frontend/public/Inter-Medium.ttf b/v3/internal/templates/vanilla-ts/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/vanilla-ts/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/vanilla-ts/frontend/public/style.css b/v3/internal/templates/vanilla-ts/frontend/public/style.css
new file mode 100644
index 000000000..7b0193862
--- /dev/null
+++ b/v3/internal/templates/vanilla-ts/frontend/public/style.css
@@ -0,0 +1,154 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.vanilla:hover {
+    filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/vanilla-ts/frontend/src/typescript.svg b/v3/internal/templates/vanilla-ts/frontend/public/typescript.svg
similarity index 100%
rename from v3/internal/templates/vanilla-ts/frontend/src/typescript.svg
rename to v3/internal/templates/vanilla-ts/frontend/public/typescript.svg
diff --git a/v3/internal/templates/vanilla-ts/frontend/src/counter.ts b/v3/internal/templates/vanilla-ts/frontend/src/counter.ts
deleted file mode 100644
index 09e5afd2d..000000000
--- a/v3/internal/templates/vanilla-ts/frontend/src/counter.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export function setupCounter(element: HTMLButtonElement) {
-  let counter = 0
-  const setCounter = (count: number) => {
-    counter = count
-    element.innerHTML = `count is ${counter}`
-  }
-  element.addEventListener('click', () => setCounter(counter + 1))
-  setCounter(0)
-}
diff --git a/v3/internal/templates/vanilla-ts/frontend/src/main.ts b/v3/internal/templates/vanilla-ts/frontend/src/main.ts
index b386148ad..dadc3220b 100644
--- a/v3/internal/templates/vanilla-ts/frontend/src/main.ts
+++ b/v3/internal/templates/vanilla-ts/frontend/src/main.ts
@@ -1,23 +1,23 @@
-import './style.css'
-import typescriptLogo from './typescript.svg'
-import { setupCounter } from './counter'
+import {Greet} from "../bindings/main/GreetService.js";
+import {Events} from "@wailsio/runtime";
 
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-  <div>
-    <a href="https://wails.io" target="_blank">
-      <img src="/wails.png" class="logo" alt="Wails logo" />
-    </a>
-    <a href="https://www.typescriptlang.org/" target="_blank">
-      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
-    </a>
-    <h1>Wails + TypeScript</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Wails and TypeScript logos to learn more
-    </p>
-  </div>
-`
+const greetButton = document.getElementById('greet')! as HTMLButtonElement;
+const resultElement = document.getElementById('result')! as HTMLDivElement;
+const nameElement : HTMLInputElement = document.getElementById('name')! as HTMLInputElement;
+const timeElement = document.getElementById('time')! as HTMLDivElement;
 
-setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+greetButton.addEventListener('click', () => {
+    let name = (nameElement as HTMLInputElement).value
+    if (!name) {
+        name = 'from Go';
+    }
+    Greet(name).then((result: string) => {
+        resultElement.innerText = result;
+    }).catch((err: Error) => {
+        console.log(err);
+    });
+});
+
+Events.On('time', (time: {data: any}) => {
+    timeElement.innerText = time.data;
+});
diff --git a/v3/internal/templates/vanilla-ts/frontend/src/style.css b/v3/internal/templates/vanilla-ts/frontend/src/style.css
deleted file mode 100644
index ac37d84b9..000000000
--- a/v3/internal/templates/vanilla-ts/frontend/src/style.css
+++ /dev/null
@@ -1,97 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/vanilla/frontend/index.html b/v3/internal/templates/vanilla/frontend/index.html
index 17eb8b3c3..78ae28f3a 100644
--- a/v3/internal/templates/vanilla/frontend/index.html
+++ b/v3/internal/templates/vanilla/frontend/index.html
@@ -18,20 +18,17 @@
         </a>
     </div>
     <h1>Wails + Javascript</h1>
-    <div>
-        <p id="time">Listening for Time event...</p>
-    </div>
     <div class="card">
-        <label for="name">Enter your name</label>
-        <input id="name" type="text"/>
-        <button onclick="doGreet()">Press me!</button>
+        <div class="result" id="result">Please enter your name below 👇</div>
+        <div class="input-box" id="input">
+            <input class="input" id="name" type="text" autocomplete="off"/>
+            <button class="btn" onclick="doGreet()">Greet</button>
+        </div>
     </div>
-    <div>
-        <p id="greeting">&nbsp;</p>
+    <div class="footer">
+        <div><p>Click on the Wails logo to learn more</p></div>
+        <div><p id="time">Listening for Time event...</p></div>
     </div>
-    <p class="read-the-docs">
-        Click on the Wails logo to learn more
-    </p>
 </div>
 <script type="module" src="/main.js"></script>
 </body>
diff --git a/v3/internal/templates/vanilla/frontend/main.js b/v3/internal/templates/vanilla/frontend/main.js
index 54ecd9a0b..d50d5df3c 100644
--- a/v3/internal/templates/vanilla/frontend/main.js
+++ b/v3/internal/templates/vanilla/frontend/main.js
@@ -1,20 +1,21 @@
 import {Greet} from "./bindings/main/GreetService.js";
 import {Events} from "@wailsio/runtime";
 
+const resultElement = document.getElementById('result');
+const timeElement = document.getElementById('time');
+
 window.doGreet = () => {
     let name = document.getElementById('name').value;
     if (!name) {
         name = 'from Go';
     }
     Greet(name).then((result) => {
-        let element = document.getElementById('greeting');
-        element.innerText = result;
+        resultElement.innerText = result;
     }).catch((err) => {
         console.log(err);
     });
 }
 
 Events.On('time', (time) => {
-    let element = document.getElementById('time');
-    element.innerText = time.data;
+    timeElement.innerText = time.data;
 });
\ No newline at end of file
diff --git a/v3/internal/templates/vanilla/frontend/package.json b/v3/internal/templates/vanilla/frontend/package.json
index 758dce5cc..2642d7a41 100644
--- a/v3/internal/templates/vanilla/frontend/package.json
+++ b/v3/internal/templates/vanilla/frontend/package.json
@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build --minify false --mode development",
+    "build:prod": "vite build --mode production",
     "preview": "vite preview"
   },
   "devDependencies": {
diff --git a/v3/internal/templates/vanilla/frontend/public/Inter-Medium.ttf b/v3/internal/templates/vanilla/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/vanilla/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/vanilla/frontend/public/style.css b/v3/internal/templates/vanilla/frontend/public/style.css
index 51e4476cd..7b0193862 100644
--- a/v3/internal/templates/vanilla/frontend/public/style.css
+++ b/v3/internal/templates/vanilla/frontend/public/style.css
@@ -1,105 +1,154 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
 }
+
 a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  place-content: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #f7df1eaa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+    color: #535bf2;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
 }
-button:hover {
-  border-color: #646cff;
+
+.result {
+    height: 20px;
+    line-height: 20px;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #e80000aa);
+}
+
+.logo.vanilla:hover {
+    filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
 }
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/vue-ts/.vscode/extensions.json b/v3/internal/templates/vue-ts/.vscode/extensions.json
new file mode 100644
index 000000000..86c616f02
--- /dev/null
+++ b/v3/internal/templates/vue-ts/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["octref.vetur"]
+}
diff --git a/v3/internal/templates/vue-ts/frontend/index.html b/v3/internal/templates/vue-ts/frontend/index.html
index 7fa24bb08..841b8ed62 100644
--- a/v3/internal/templates/vue-ts/frontend/index.html
+++ b/v3/internal/templates/vue-ts/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
     <title>Wails + Vue + TS</title>
   </head>
   <body>
diff --git a/v3/internal/templates/vue-ts/frontend/package.json b/v3/internal/templates/vue-ts/frontend/package.json
index 129f6aef7..019b844d4 100644
--- a/v3/internal/templates/vue-ts/frontend/package.json
+++ b/v3/internal/templates/vue-ts/frontend/package.json
@@ -14,7 +14,8 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0",
+    "vite": "^5.0.0",
+    "@wailsio/runtime": "latest",
     "vue-tsc": "^1.0.11"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/vue-ts/frontend/public/Inter-Medium.ttf b/v3/internal/templates/vue-ts/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/vue-ts/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/vue-ts/frontend/public/style.css b/v3/internal/templates/vue-ts/frontend/public/style.css
new file mode 100644
index 000000000..88b48a11e
--- /dev/null
+++ b/v3/internal/templates/vue-ts/frontend/public/style.css
@@ -0,0 +1,139 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/vue-ts/frontend/src/assets/vue.svg b/v3/internal/templates/vue-ts/frontend/public/vue.svg
similarity index 100%
rename from v3/internal/templates/vue-ts/frontend/src/assets/vue.svg
rename to v3/internal/templates/vue-ts/frontend/public/vue.svg
diff --git a/v3/internal/templates/vue-ts/frontend/src/App.vue b/v3/internal/templates/vue-ts/frontend/src/App.vue
index 9f88fe6d8..dda3019da 100644
--- a/v3/internal/templates/vue-ts/frontend/src/App.vue
+++ b/v3/internal/templates/vue-ts/frontend/src/App.vue
@@ -3,15 +3,17 @@ import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <div>
-    <a href="https://wails.io" target="_blank" rel="noreferrer">
-      <img src="/wails.png" class="logo" alt="Wails Logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+  <div class="container">
+    <div>
+      <a wml-openURL="https://wails.io">
+        <img src="/wails.png" class="logo" alt="Wails logo"/>
+      </a>
+      <a wml-openURL="https://vuejs.org/">
+        <img src="/vue.svg" class="logo vue" alt="Vue logo"/>
+      </a>
+    </div>
+    <HelloWorld msg="Wails + Vue" />
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
 <style scoped>
@@ -21,7 +23,7 @@ import HelloWorld from './components/HelloWorld.vue'
   will-change: filter;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+  filter: drop-shadow(0 0 2em #e80000aa);
 }
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
diff --git a/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue b/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue
index 523091033..abfee7d95 100644
--- a/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue
+++ b/v3/internal/templates/vue-ts/frontend/src/components/HelloWorld.vue
@@ -1,38 +1,46 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import {Greet} from "../../bindings/main/GreetService.js";
+import {Events} from "@wailsio/runtime";
 
 defineProps<{ msg: string }>()
 
-const count = ref(0)
+const name = ref('')
+const result = ref('Please enter your name below 👇')
+const time = ref('Listening for Time event...')
+
+const doGreet = () => {
+  if (!name.value) {
+    name.value = 'from Go';
+  }
+  Greet(name.value).then((resultValue: string) => {
+    result.value = resultValue;
+  }).catch((err: Error) => {
+    console.log(err);
+  });
+}
+
+onMounted(() => {
+  Events.On('time', (timeValue: { data: string }) => {
+    time.value = timeValue.data;
+  });
+})
+
 </script>
 
 <template>
   <h1>{{ msg }}</h1>
 
   <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
+    <div class="result">{{ result }}</div>
+    <div class="input-box">
+      <input class="input" v-model="name" type="text" autocomplete="off"/>
+      <button class="btn" @click="doGreet">Greet</button>
+    </div>
   </div>
 
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+  <div class="footer">
+    <div><p>Click on the Wails logo to learn more</p></div>
+    <div><p>{{ time }}</p></div>
+  </div>
 </template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/v3/internal/templates/vue-ts/frontend/src/main.ts b/v3/internal/templates/vue-ts/frontend/src/main.ts
index 2425c0f74..01433bca2 100644
--- a/v3/internal/templates/vue-ts/frontend/src/main.ts
+++ b/v3/internal/templates/vue-ts/frontend/src/main.ts
@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
 
 createApp(App).mount('#app')
diff --git a/v3/internal/templates/vue-ts/frontend/src/style.css b/v3/internal/templates/vue-ts/frontend/src/style.css
deleted file mode 100644
index 0192f9aac..000000000
--- a/v3/internal/templates/vue-ts/frontend/src/style.css
+++ /dev/null
@@ -1,81 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/internal/templates/vue/.vscode/extensions.json b/v3/internal/templates/vue/.vscode/extensions.json
new file mode 100644
index 000000000..86c616f02
--- /dev/null
+++ b/v3/internal/templates/vue/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["octref.vetur"]
+}
diff --git a/v3/internal/templates/vue/frontend/README.md b/v3/internal/templates/vue/frontend/README.md
deleted file mode 100644
index e62e093e7..000000000
--- a/v3/internal/templates/vue/frontend/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Vue 3 + Vite
-
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
diff --git a/v3/internal/templates/vue/frontend/index.html b/v3/internal/templates/vue/frontend/index.html
index 4887b1839..2700f93b9 100644
--- a/v3/internal/templates/vue/frontend/index.html
+++ b/v3/internal/templates/vue/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/wails.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/style.css" />
     <title>Wails + Vue</title>
   </head>
   <body>
diff --git a/v3/internal/templates/vue/frontend/package.json b/v3/internal/templates/vue/frontend/package.json
index b779f58b4..6ea74b17d 100644
--- a/v3/internal/templates/vue/frontend/package.json
+++ b/v3/internal/templates/vue/frontend/package.json
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
-    "vite": "^4.0.0"
+    "vite": "^5.0.0",
+    "@wailsio/runtime": "latest"
   }
 }
\ No newline at end of file
diff --git a/v3/internal/templates/vue/frontend/public/Inter-Medium.ttf b/v3/internal/templates/vue/frontend/public/Inter-Medium.ttf
new file mode 100644
index 000000000..a01f3777a
Binary files /dev/null and b/v3/internal/templates/vue/frontend/public/Inter-Medium.ttf differ
diff --git a/v3/internal/templates/vue/frontend/public/style.css b/v3/internal/templates/vue/frontend/public/style.css
new file mode 100644
index 000000000..88b48a11e
--- /dev/null
+++ b/v3/internal/templates/vue/frontend/public/style.css
@@ -0,0 +1,139 @@
+:root {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgba(27, 38, 54, 1);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    src: local(""),
+    url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+    font-size: 3em;
+    line-height: 1.1;
+}
+
+a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #535bf2;
+}
+
+button {
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 3px;
+    border: none;
+    margin: 0 0 0 20px;
+    padding: 0 8px;
+    cursor: pointer;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    place-content: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+#app {
+    max-width: 1280px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.result {
+    height: 20px;
+    line-height: 20px;
+    margin: 1.5rem auto;
+    text-align: center;
+}
+
+.footer {
+    margin-top: 1rem;
+    align-content: center;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.67);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+
+.input-box .btn:hover {
+    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+    color: #333333;
+}
+
+.input-box .input {
+    border: none;
+    border-radius: 3px;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    color: black;
+    background-color: rgba(240, 240, 240, 1);
+    -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+    border: none;
+    background-color: rgba(255, 255, 255, 1);
+}
\ No newline at end of file
diff --git a/v3/internal/templates/vue/frontend/src/assets/vue.svg b/v3/internal/templates/vue/frontend/public/vue.svg
similarity index 100%
rename from v3/internal/templates/vue/frontend/src/assets/vue.svg
rename to v3/internal/templates/vue/frontend/public/vue.svg
diff --git a/v3/internal/templates/vue/frontend/src/App.vue b/v3/internal/templates/vue/frontend/src/App.vue
index d2e89b824..3e202d51b 100644
--- a/v3/internal/templates/vue/frontend/src/App.vue
+++ b/v3/internal/templates/vue/frontend/src/App.vue
@@ -3,15 +3,17 @@ import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
+<div class="container">
   <div>
-    <a href="https://wails.io" target="_blank" rel="noreferrer">
-      <img src="/wails.png" class="logo" alt="Wails Logo" />
+    <a wml-openURL="https://wails.io">
+      <img src="/wails.png" class="logo" alt="Wails logo"/>
     </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+    <a wml-openURL="https://vuejs.org/">
+      <img src="/vue.svg" class="logo vue" alt="Vue logo"/>
     </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
+  <HelloWorld msg="Wails + Vue" />
+</div>
 </template>
 
 <style scoped>
@@ -21,7 +23,7 @@ import HelloWorld from './components/HelloWorld.vue'
   will-change: filter;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+  filter: drop-shadow(0 0 2em #e80000aa);
 }
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
diff --git a/v3/internal/templates/vue/frontend/src/components/HelloWorld.vue b/v3/internal/templates/vue/frontend/src/components/HelloWorld.vue
index d3c3f15cd..2aa738748 100644
--- a/v3/internal/templates/vue/frontend/src/components/HelloWorld.vue
+++ b/v3/internal/templates/vue/frontend/src/components/HelloWorld.vue
@@ -1,40 +1,48 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import {Greet} from "../../bindings/main/GreetService.js";
+import {Events} from "@wailsio/runtime";
+
+const name = ref('')
+const result = ref('Please enter your name below 👇')
+const time = ref('Listening for Time event...')
+
+const doGreet = () => {
+  if (!name.value) {
+    name.value = 'from Go';
+  }
+  Greet(name.value).then((resultValue) => {
+    result.value = resultValue;
+  }).catch((err) => {
+    console.log(err);
+  });
+}
+
+onMounted(() => {
+  Events.On('time', (timeValue) => {
+    time.value = timeValue.data;
+  });
+})
 
 defineProps({
   msg: String,
 })
 
-const count = ref(0)
 </script>
 
 <template>
   <h1>{{ msg }}</h1>
 
   <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
+    <div class="result">{{ result }}</div>
+    <div class="input-box">
+      <input class="input" v-model="name" type="text" autocomplete="off"/>
+      <button class="btn" @click="doGreet">Greet</button>
+    </div>
   </div>
 
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+  <div class="footer">
+    <div><p>Click on the Wails logo to learn more</p></div>
+    <div><p>{{ time }}</p></div>
+  </div>
 </template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/v3/internal/templates/vue/frontend/src/main.js b/v3/internal/templates/vue/frontend/src/main.js
index 2425c0f74..01433bca2 100644
--- a/v3/internal/templates/vue/frontend/src/main.js
+++ b/v3/internal/templates/vue/frontend/src/main.js
@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
 
 createApp(App).mount('#app')
diff --git a/v3/internal/templates/vue/frontend/src/style.css b/v3/internal/templates/vue/frontend/src/style.css
deleted file mode 100644
index a566a347d..000000000
--- a/v3/internal/templates/vue/frontend/src/style.css
+++ /dev/null
@@ -1,90 +0,0 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/v3/pkg/application/options_application.go b/v3/pkg/application/options_application.go
index 5a911e52c..ad5db123d 100644
--- a/v3/pkg/application/options_application.go
+++ b/v3/pkg/application/options_application.go
@@ -7,7 +7,7 @@ import (
 )
 
 type Options struct {
-	// Name is the name of the application
+	// Name is the name of the application (used in the default about box)
 	Name string
 
 	// Description is the description of the application (used in the default about box)