DEV Community: Jin Gong

Wails3 Template New Version: Faster Than Ever with a Completely Redesigned UI

Jin Gong — Mon, 30 Mar 2026 07:16:33 +0000

Why Rebuild the UI?

The original goal of this project was simple:

Provide an out-of-the-box Wails3 template
Enable fast cross-platform desktop development (macOS / Windows)
Keep it lightweight and high-performance However, as the project evolved, I wanted the template to be more practical, reduce development time, and include more built-in features.

The core issue was:
“The architecture was solid, but the overall experience wasn’t rich enough.”

I. Template Features

🌍 Multi-language support
🌗 Dark / Light theme switching
🗂️ SQLite database examples (CRUD operations)
⌨️ Global hotkey support (extensible & customizable)
🎨 System tray integration (linked with the i18n system)
🧱 Scalable frontend-backend architecture for further development

II. UI Comparison (Before vs After)

New UI⬇️:

Old UI⬇️:

From a UI perspective, the main improvement is consolidation:

All settings are now unified into a single management page
A new dashboard has been introduced to better support system management and future development

III. What’s New in This Version

Improved system tray functionality with full i18n integration, making frontend management easier
A more unified UI structure, resulting in better clarity and stability
Increased development efficiency with consistent design patterns
A more practical and production-ready Wails3 starter template

IV. How to Use

Project Repository

GitHub:https://github.com/JinGongX/SuiDemo

Getting Started

# Create a project using the GitHub template
wails3 init -n myproject -t https://github.com/JinGongX/SuiDemo  
# open folder
cd myproject   
# Start development mode
wails3 dev

V. Demo

I Built a Desktop App with Go + Wails3 in 4 Hours

Jin Gong — Sat, 14 Mar 2026 16:56:04 +0000

1. Create a project

You can directly create a project using the GitHub template, which integrates the following functions out of the box:
✅ Internationalization (i18n) using vue-i18n
🌗 Automatic light/dark theme support with manual override
🗃️ SQLite database integration with CRUD operations
⌨️ Keyboard shortcut (hotkey) support for efficient interaction and easy extension
⚙️ Settings panel and hotkey configuration demo
💡 Built with Wails v3, Vue 3, and TypeScript

Here are two ways to create:

 #1、Create a project directly through the GitHub template
wails3 init -n myProject -t https://github.com/JinGongX/SuiDemo                                                                        
 #2、Clone the project to the local => Create the project
 git clone https://github.com/JinGongX/SuiDemo
 wails3 init -n "Your Project Name" -t ./"suidemo local directory"

II. Project Development

The basic functions in the original template are ready to use out of the box, and basically, only the front-end needs to be continuously developed

Write a prompt display page

 /* /pages/Tips/Index.vue*/
<script setup lang="ts">
import { ref,onMounted,onUnmounted } from'vue'
import { InsTips } from'../../../bindings/changeme/services/suistore'
import{HideTipsWindow} from'../../../bindings/changeme/appservice'
import { applyTheme } from'../../utils/ThemeManager'
const input = ref('')
const sendMessage = () => {
if (!input.value.trim()) return
const now = Math.floor(Date.now() / 1000) 
const expireAt = parseTime(input.value) || (now + 30 * 60)
  InsTips(detectType(input.value), input.value, expireAt)
  input.value = ''
  HideTipsWindow()//Hide
}
// Monitor the Esc key to close the panel
const onKeydown = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
    input.value = ''
    HideTipsWindow()
  }
}
onMounted(() => {
window.addEventListener('keydown', onKeydown)
})
onUnmounted(() => {
window.removeEventListener('keydown', onKeydown)
})
//--- A simple function for identifying type and time can be subsequently integrated into a large model ---
type PromptType = 'security' | 'device' | 'life' | 'work'|'system' |'default'
function detectType(text: string): PromptType {
if (/password|security|verify/.test(text)) return'security'
if (/backup|storage|photo|computer/.test(text)) return'device'
if (/food|cook|life/.test(text)) return'life'
if (/meeting|task|work/.test(text)) return'work'
return'default'
}
function parseTime(text: string): number | undefined {
const m = text.match(/(\d+)\s*(分钟|分|min|m)/)
if (m) returnDate.now() + Number(m[1]) * 60 * 1000
returnundefined
}
//Adjust the style on the configuration page and synchronize it to the child window
const bc = new BroadcastChannel('theme')
  bc.onmessage = (e) => {
    applyTheme(e.data)
  }
</script>

<template>
  <div
    class="fixed inset-0 flex items-center justify-center bg-black/20 backdrop-blur-sm dark:bg-gray-400/20"
  >
    <div class="w-[420px] rounded-1xl bg-white/90 dark:bg-gray-500/90 dark:text-white backdrop-blur-md shadow-[0_16px_40px_rgba(0,0,0,0.18)] px-5 py-4"
    > 
      <div class="mb-3 text-sm text-neutral-500 dark:text-white">
        Prompt: Enter a reminder for yourself
      </div> 
      <textarea
        v-model="input"  @keydown.enter.prevent="sendMessage"
        rows="2"
        placeholder="For example: Remind me to back up my photos in 30 minutes"
        class="w-full resize-none rounded-xl border border-neutral-200 bg-neutral-50 dark:bg-gray-100 px-4 py-3 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none"
      /> 
      <div class="mt-3 flex items-center justify-between text-xs text-neutral-400 dark:text-white">
        <div>Enter confirm · Esc cancel</div>
        <div>Automatic type recognition</div>
      </div>
    </div>
  </div>
</template>

III. The complete effect is roughly as follows:

Vue 3 + Wails3 Template Build Native Desktop Apps with Go and Web Tech

Jin Gong — Sat, 12 Jul 2025 14:00:03 +0000

I recently built and open-sourced a Wails3 + Vue3 starter template to make it easier for developers to build native-feeling desktop apps using Go on the backend and React on the frontend.

GitHub Repo:https://github.com/JinGongX/SuiDemo?tab=readme-ov-file#english

🌍 A Wails v3-based desktop application template with i18n, dark mode, and SQLite integration.

✅ Internationalization (i18n) using vue-i18n
🌗 Automatic light/dark theme support with manual override
🗃️ SQLite database integration with CRUD operations
⚙️ Settings panel and hotkey configuration demo
💡 Built with Wails v3, Vue 3, and TypeScript

📸 Screenshots