Runtime Frontend

<html>
    <head>
        <script type="module" src="./runtime.js"></script>
        <script>
            window.onload = function () {
                wails.Window.SetTitle("A new window title");
            }
        </script>
    </head>
    <!--- ... -->
</html>

import "@wailsio/runtime";

import { defineConfig } from 'vite'
import wails from '@wailsio/runtime/plugins/vite'

export default defineConfig({
  plugins: [wails()],
})

type UserData struct {
    ID   string
    Name string
}

func init() {
    application.RegisterEvent[UserData]("user-updated")
}

import { Events } from '@wailsio/runtime'
import { UserUpdated } from './bindings/events'

// Type-safe event with autocomplete
Events.Emit(UserUpdated({
    ID: "123",
    Name: "John Doe"
}))

import { Events, Window, Clipboard } from '@wailsio/runtime'

function On(eventName: string, callback: (event: WailsEvent) => void): () => void
function On<T>(eventType: EventType<T>, callback: (event: WailsEvent<T>) => void): () => void

import { Events } from '@wailsio/runtime'

// Basic event listening
const unsubscribe = Events.On('user-logged-in', (event) => {
    console.log('User:', event.data.username)
})

// With typed events (TypeScript)
import { UserLogin } from './bindings/events'

Events.On(UserLogin, (event) => {
    // event.data is typed as UserLoginData
    console.log('User:', event.data.username)
})

// Later: unsubscribe()

function Once(eventName: string, callback: (event: WailsEvent) => void): () => void
function Once<T>(eventType: EventType<T>, callback: (event: WailsEvent<T>) => void): () => void

import { Events } from '@wailsio/runtime'

Events.Once('app-ready', () => {
    console.log('App initialized')
})

function Emit(name: string, data?: any): Promise<boolean>
function Emit<T>(event: Event<T>): Promise<boolean>

import { Events } from '@wailsio/runtime'

// Basic event emission
const wasCancelled = await Events.Emit('button-clicked', { buttonId: 'submit' })

// With typed events (TypeScript)
import { UserLogin } from './bindings/events'

const cancelled = await Events.Emit(UserLogin({
    UserID: "123",
    Username: "john_doe",
    LoginTime: new Date().toISOString()
}))

if (cancelled) {
    console.log('Login was cancelled by a hook')
}

function Off(...eventNames: string[]): void

import { Events } from '@wailsio/runtime'

Events.Off('user-logged-in', 'user-logged-out')

function OffAll(): void

import { Window } from '@wailsio/runtime'

// Current window
await Window.SetTitle('New Title')
await Window.Center()

// Get another window
const otherWindow = Window.Get('secondary')
await otherWindow.Show()

function Show(): Promise<void>

function Hide(): Promise<void>

function Close(): Promise<void>

function SetSize(width: number, height: number): Promise<void>

function Size(): Promise<{ width: number, height: number }>

function SetPosition(x: number, y: number): Promise<void>

function Position(): Promise<{ x: number, y: number }>

function Center(): Promise<void>

import { Window } from '@wailsio/runtime'

// Resize and center
await Window.SetSize(800, 600)
await Window.Center()

// Get current size
const { width, height } = await Window.Size()

function Minimise(): Promise<void>

function Maximise(): Promise<void>

function Fullscreen(): Promise<void>

function Restore(): Promise<void>

function IsMinimised(): Promise<boolean>

function IsMaximised(): Promise<boolean>

function IsFullscreen(): Promise<boolean>

function SetTitle(title: string): Promise<void>

function Name(): Promise<string>

function SetBackgroundColour(r: number, g: number, b: number, a: number): Promise<void>

function SetAlwaysOnTop(alwaysOnTop: boolean): Promise<void>

function SetResizable(resizable: boolean): Promise<void>

function Focus(): Promise<void>

function IsFocused(): Promise<boolean>

function GetScreen(): Promise<Screen>

function Reload(): Promise<void>

function ForceReload(): Promise<void>

function SetZoom(level: number): Promise<void>

function GetZoom(): Promise<number>

function ZoomIn(): Promise<void>

function ZoomOut(): Promise<void>

function ZoomReset(): Promise<void>

function Print(): Promise<void>

import { Window } from '@wailsio/runtime'

// Open print dialog for current window
await Window.Print()

function SetText(text: string): Promise<void>

import { Clipboard } from '@wailsio/runtime'

await Clipboard.SetText('Hello from Wails!')

function Text(): Promise<string>

import { Clipboard } from '@wailsio/runtime'

const clipboardText = await Clipboard.Text()
console.log('Clipboard:', clipboardText)

function invoke(message: any): void

import { System } from '@wailsio/runtime'

// Send a raw message to the backend
System.invoke('my-custom-message')

// Send structured data as JSON
System.invoke(JSON.stringify({ action: 'update', value: 42 }))

function Show(): Promise<void>

function Hide(): Promise<void>

function Quit(): Promise<void>

import { Application } from '@wailsio/runtime'

// Add quit button
document.getElementById('quit-btn').addEventListener('click', async () => {
    await Application.Quit()
})

function OpenURL(url: string | URL): Promise<void>

import { Browser } from '@wailsio/runtime'

await Browser.OpenURL('https://wails.io')

function GetAll(): Promise<Screen[]>

function GetPrimary(): Promise<Screen>

function GetCurrent(): Promise<Screen>

interface Screen {
    ID: string
    Name: string
    ScaleFactor: number
    X: number
    Y: number
    Size: { Width: number, Height: number }
    Bounds: { X: number, Y: number, Width: number, Height: number }
    WorkArea: { X: number, Y: number, Width: number, Height: number }
    IsPrimary: boolean
    Rotation: number
}

import { Screens } from '@wailsio/runtime'

// List all screens
const screens = await Screens.GetAll()
screens.forEach(screen => {
    console.log(`${screen.Name}: ${screen.Size.Width}x${screen.Size.Height}`)
})

// Get primary screen
const primary = await Screens.GetPrimary()
console.log('Primary screen:', primary.Name)

function Info(options: MessageDialogOptions): Promise<string>

import { Dialogs } from '@wailsio/runtime'

await Dialogs.Info({
    Title: 'Success',
    Message: 'Operation completed successfully!'
})

function Error(options: MessageDialogOptions): Promise<string>

function Warning(options: MessageDialogOptions): Promise<string>

function Question(options: MessageDialogOptions): Promise<string>

import { Dialogs } from '@wailsio/runtime'

const result = await Dialogs.Question({
    Title: 'Confirm Delete',
    Message: 'Are you sure you want to delete this file?',
    Buttons: [
        { Label: 'Delete', IsDefault: false },
        { Label: 'Cancel', IsDefault: true }
    ]
})

if (result === 'Delete') {
    // Delete the file
}

function OpenFile(options: OpenFileDialogOptions): Promise<string | string[]>

import { Dialogs } from '@wailsio/runtime'

const file = await Dialogs.OpenFile({
    Title: 'Select Image',
    Filters: [
        { DisplayName: 'Images', Pattern: '*.png;*.jpg;*.jpeg' },
        { DisplayName: 'All Files', Pattern: '*.*' }
    ]
})

if (file) {
    console.log('Selected:', file)
}

function SaveFile(options: SaveFileDialogOptions): Promise<string>

<button wml-event="save-clicked">Save</button>

<button wml-window="Close">Close Window</button>
<button wml-window="Minimise">Minimize</button>

<button wml-window="Show" wml-target-window="settings">
    Show Settings
</button>

<a href="#" wml-openurl="https://wails.io">Visit Wails</a>

<button wml-window="Close" wml-confirm="Are you sure you want to close?">
    Close
</button>

<div>
    <button wml-event="save-clicked">Save</button>
    <button wml-window="Minimise">Minimize</button>
    <button wml-window="Close" wml-confirm="Close window?">Close</button>
    <a href="#" wml-openurl="https://github.com/wailsapp/wails">GitHub</a>
</div>

import { Events, Window, Clipboard, Dialogs, Screens } from '@wailsio/runtime'

// Listen for events from Go
Events.On('data-updated', (event) => {
    console.log('Data:', event.data)
    updateUI(event.data)
})

// Window management
document.getElementById('center-btn').addEventListener('click', async () => {
    await Window.Center()
})

document.getElementById('fullscreen-btn').addEventListener('click', async () => {
    const isFullscreen = await Window.IsFullscreen()
    if (isFullscreen) {
        await Window.UnFullscreen()
    } else {
        await Window.Fullscreen()
    }
})

// Clipboard operations
document.getElementById('copy-btn').addEventListener('click', async () => {
    await Clipboard.SetText('Copied from Wails!')
})

// Dialog with confirmation
document.getElementById('delete-btn').addEventListener('click', async () => {
    const result = await Dialogs.Question({
        Title: 'Confirm',
        Message: 'Delete this item?',
        Buttons: [
            { Label: 'Delete' },
            { Label: 'Cancel', IsDefault: true }
        ]
    })

    if (result === 'Delete') {
        await Events.Emit('delete-item', { id: currentItemId })
    }
})

// Screen information
const screens = await Screens.GetAll()
console.log(`Detected ${screens.length} screen(s)`)
screens.forEach(screen => {
    console.log(`- ${screen.Name}: ${screen.Size.Width}x${screen.Size.Height}`)
})

import { Events, Window } from '@wailsio/runtime'

Events.On('custom-event', (event) => {
    // TypeScript knows event.data, event.name, event.sender
    console.log(event.data)
})

// All methods are fully typed
const size: { width: number, height: number } = await Window.Size()