wails

# Install Wails CLI
go install github.com/wailsapp/wails/v2/cmd/wails@latest

# Check system dependencies
wails doctor

# Create a new project (React + TypeScript)
wails init -n my-app -t react-ts
cd my-app

# Development mode (hot reload for frontend + backend)
wails dev

# Build production binary
wails build                         # Outputs to build/bin/
wails build -platform darwin/amd64  # Cross-compile
wails build -nsis                   # Windows installer

// app.go — Application backend with methods exposed to frontend
// Methods on the App struct are automatically callable from JavaScript.

package main

import (
	"context"
	"database/sql"
	"fmt"
	"os"
	"path/filepath"

	_ "modernc.org/sqlite"
)

// App struct — any exported method becomes available in the frontend
type App struct {
	ctx context.Context
	db  *sql.DB
}

// startup is called when the app starts — initialize resources here
func (a *App) startup(ctx context.Context) {
	a.ctx = ctx

	// Open SQLite database in user's app data directory
	homeDir, _ := os.UserHomeDir()
	dbPath := filepath.Join(homeDir, ".my-app", "data.db")
	os.MkdirAll(filepath.Dir(dbPath), 0755)

	db, err := sql.Open("sqlite", dbPath)
	if err != nil {
		fmt.Printf("Failed to open database: %v\n", err)
		return
	}
	a.db = db

	// Create tables
	a.db.Exec(`CREATE TABLE IF NOT EXISTS notes (
		id INTEGER PRIMARY KEY AUTOINCREMENT,
		title TEXT NOT NULL,
		content TEXT NOT NULL DEFAULT '',
		created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
		updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
	)`)
}

// Note is a data model — returned to frontend as typed TypeScript interface
type Note struct {
	ID        int64  `json:"id"`
	Title     string `json:"title"`
	Content   string `json:"content"`
	CreatedAt string `json:"createdAt"`
	UpdatedAt string `json:"updatedAt"`
}

// GetNotes returns all notes — callable from frontend as GetNotes()
func (a *App) GetNotes() ([]Note, error) {
	rows, err := a.db.Query("SELECT id, title, content, created_at, updated_at FROM notes ORDER BY updated_at DESC")
	if err != nil {
		return nil, err
	}
	defer rows.Close()

	var notes []Note
	for rows.Next() {
		var n Note
		rows.Scan(&n.ID, &n.Title, &n.Content, &n.CreatedAt, &n.UpdatedAt)
		notes = append(notes, n)
	}
	return notes, nil
}

// CreateNote creates a new note — frontend calls CreateNote(title)
func (a *App) CreateNote(title string) (*Note, error) {
	result, err := a.db.Exec("INSERT INTO notes (title) VALUES (?)", title)
	if err != nil {
		return nil, err
	}
	id, _ := result.LastInsertId()
	return &Note{ID: id, Title: title, Content: ""}, nil
}

// UpdateNote saves note content — called on every edit
func (a *App) UpdateNote(id int64, title, content string) error {
	_, err := a.db.Exec(
		"UPDATE notes SET title = ?, content = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?",
		title, content, id,
	)
	return err
}

// DeleteNote removes a note
func (a *App) DeleteNote(id int64) error {
	_, err := a.db.Exec("DELETE FROM notes WHERE id = ?", id)
	return err
}

// OpenFile opens a native file dialog and returns the file content
func (a *App) OpenFile() (string, error) {
	selection, err := runtime.OpenFileDialog(a.ctx, runtime.OpenDialogOptions{
		Title: "Open File",
		Filters: []runtime.FileFilter{
			{DisplayName: "Text Files", Pattern: "*.txt;*.md"},
		},
	})
	if err != nil {
		return "", err
	}
	data, err := os.ReadFile(selection)
	return string(data), err
}

// frontend/src/App.tsx — React frontend with auto-generated bindings
// Wails generates TypeScript types from Go structs and functions.

import { useState, useEffect } from "react";
// These imports are auto-generated by Wails from Go code
import { GetNotes, CreateNote, UpdateNote, DeleteNote } from "../wailsjs/go/main/App";
import { main } from "../wailsjs/go/models";

function App() {
  const [notes, setNotes] = useState<main.Note[]>([]);
  const [selectedNote, setSelectedNote] = useState<main.Note | null>(null);

  useEffect(() => {
    loadNotes();
  }, []);

  async function loadNotes() {
    const result = await GetNotes();       // Calls Go method, returns typed Note[]
    setNotes(result || []);
  }

  async function handleCreate() {
    const note = await CreateNote("Untitled");  // Go returns *Note, TS gets main.Note
    if (note) {
      setNotes([note, ...notes]);
      setSelectedNote(note);
    }
  }

  async function handleSave(id: number, title: string, content: string) {
    await UpdateNote(id, title, content);  // Calls Go, saves to SQLite
    loadNotes();
  }

  async function handleDelete(id: number) {
    await DeleteNote(id);
    setSelectedNote(null);
    loadNotes();
  }

  return (
    <div className="app">
      <aside className="sidebar">
        <button onClick={handleCreate}>+ New Note</button>
        <ul>
          {notes.map((note) => (
            <li
              key={note.id}
              className={selectedNote?.id === note.id ? "active" : ""}
              onClick={() => setSelectedNote(note)}
            >
              <strong>{note.title}</strong>
              <small>{note.updatedAt}</small>
            </li>
          ))}
        </ul>
      </aside>

      <main className="editor">
        {selectedNote ? (
          <NoteEditor
            note={selectedNote}
            onSave={handleSave}
            onDelete={handleDelete}
          />
        ) : (
          <p>Select or create a note</p>
        )}
      </main>
    </div>
  );
}

// main.go — Native menus and system tray
package main

import (
	"embed"
	"github.com/wailsapp/wails/v2"
	"github.com/wailsapp/wails/v2/pkg/menu"
	"github.com/wailsapp/wails/v2/pkg/options"
	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)

//go:embed all:frontend/dist
var assets embed.FS

func main() {
	app := &App{}

	appMenu := menu.NewMenu()
	fileMenu := appMenu.AddSubmenu("File")
	fileMenu.AddText("New Note", keys.CmdOrCtrl("n"), func(_ *menu.CallbackData) {
		// Emit event to frontend
		runtime.EventsEmit(app.ctx, "menu:new-note")
	})
	fileMenu.AddSeparator()
	fileMenu.AddText("Quit", keys.CmdOrCtrl("q"), func(_ *menu.CallbackData) {
		runtime.Quit(app.ctx)
	})

	err := wails.Run(&options.App{
		Title:     "My Notes",
		Width:     1024,
		Height:    768,
		MinWidth:  600,
		MinHeight: 400,
		AssetServer: &assetserver.Options{
			Assets: assets,
		},
		OnStartup: app.startup,
		Menu:      appMenu,
		Bind:      []interface{}{app},
	})
	if err != nil {
		panic(err)
	}
}

# Prerequisites: Go 1.21+, Node.js 16+
go install github.com/wailsapp/wails/v2/cmd/wails@latest

# macOS also needs Xcode command line tools
xcode-select --install

# Linux needs webkit2gtk
sudo apt install libgtk-3-dev libwebkit2gtk-4.0-dev

I just installed Wails. Help me configure it for my TypeScript + React workflow with my preferred keybindings.

I want to add a custom go backend to Wails. How do I build one?