core/gui
8
0
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions
gui/docs/ref/wails-v3/index.mdx
Snider 4bdbb68f46
Some checks failed
Security Scan / security (push) Failing after 9s
Details
Test / test (push) Failing after 1m21s
Details
refactor: update import path from go-config to core/config 
Co-Authored-By: Virgil <virgil@lethean.io>
2026-03-14 10:26:36 +00:00

294 lines
10 KiB
Text
Raw Permalink Blame History

---
title: Build Desktop Apps with Go
description: "Native desktop applications using Go and web technologies"
banner:
content: |
Wails v3 is in ALPHA. <a href="https://wails.io">v2 docs</a>
template: splash
hero:
tagline: Build beautiful, performant desktop applications using Go and modern web technologies. One codebase. Three platforms. No browsers.
image:
dark: ../../assets/wails-logo-dark.svg
light: ../../assets/wails-logo-light.svg
alt: Wails Logo
actions:
- text: Get Started
link: /quick-start/installation
icon: right-arrow
variant: primary
- text: View Tutorial
link: /tutorials/03-notes-vanilla
icon: open-book
variant: secondary
---
{/* Updated 2025-11-23 */}
import { Tabs, TabItem, Card, CardGrid } from "@astrojs/starlight/components";
<style>{`
/* Row 1 - Fastest */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 200%;
height: 33.33vh;
opacity: 0.08;
z-index: -1;
background:
url('/showcase-images/tiny-rdm1.webp') 0px center / auto 80% no-repeat,
url('/showcase-images/gamestacker.webp') 550px center / auto 80% no-repeat,
url('/showcase-images/scriptbar.webp') 1100px center / auto 80% no-repeat,
url('/showcase-images/minesweeper-xp.webp') 1650px center / auto 80% no-repeat,
url('/showcase-images/wailsterm.webp') 2200px center / auto 80% no-repeat,
url('/showcase-images/modalfilemanager.webp') 2750px center / auto 80% no-repeat,
url('/showcase-images/ytd.webp') 3300px center / auto 80% no-repeat,
url('/showcase-images/filehound.webp') 3850px center / auto 80% no-repeat,
url('/showcase-images/edex-ui.webp') 4400px center / auto 80% no-repeat,
url('/showcase-images/tiny-rdm1.webp') 4950px center / auto 80% no-repeat,
url('/showcase-images/gamestacker.webp') 5500px center / auto 80% no-repeat,
url('/showcase-images/scriptbar.webp') 6050px center / auto 80% no-repeat,
url('/showcase-images/minesweeper-xp.webp') 6600px center / auto 80% no-repeat,
url('/showcase-images/wailsterm.webp') 7150px center / auto 80% no-repeat,
url('/showcase-images/modalfilemanager.webp') 7700px center / auto 80% no-repeat,
url('/showcase-images/ytd.webp') 8250px center / auto 80% no-repeat,
url('/showcase-images/filehound.webp') 8800px center / auto 80% no-repeat,
url('/showcase-images/edex-ui.webp') 9350px center / auto 80% no-repeat;
animation: scroll-row1 40s linear infinite;
filter: blur(0.5px);
pointer-events: none;
}
/* Gradient overlay - highest z-index */
html::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(to bottom, var(--sl-color-bg) 0%, transparent 15%, transparent 85%, var(--sl-color-bg) 100%),
linear-gradient(to right, var(--sl-color-bg) 0%, transparent 10%, transparent 90%, var(--sl-color-bg) 100%);
z-index: 0;
pointer-events: none;
}
/* Row 2 - Medium Speed */
html::after {
content: '';
position: fixed;
top: 33.33vh;
left: 0;
width: 200%;
height: 33.33vh;
opacity: 0.08;
z-index: -2;
background:
url('/showcase-images/tiny-rdm2.webp') 0px center / auto 80% no-repeat,
url('/showcase-images/mollywallet.webp') 550px center / auto 80% no-repeat,
url('/showcase-images/optimus.webp') 1100px center / auto 80% no-repeat,
url('/showcase-images/cfntracker.webp') 1650px center / auto 80% no-repeat,
url('/showcase-images/riftshare-main.webp') 2200px center / auto 80% no-repeat,
url('/showcase-images/minecraft-mod-updater.webp') 2750px center / auto 80% no-repeat,
url('/showcase-images/resizem.webp') 3300px center / auto 80% no-repeat,
url('/showcase-images/mchat.webp') 3850px center / auto 80% no-repeat,
url('/showcase-images/tiny-rdm2.webp') 4400px center / auto 80% no-repeat,
url('/showcase-images/mollywallet.webp') 4950px center / auto 80% no-repeat,
url('/showcase-images/optimus.webp') 5500px center / auto 80% no-repeat,
url('/showcase-images/cfntracker.webp') 6050px center / auto 80% no-repeat,
url('/showcase-images/riftshare-main.webp') 6600px center / auto 80% no-repeat,
url('/showcase-images/minecraft-mod-updater.webp') 7150px center / auto 80% no-repeat,
url('/showcase-images/resizem.webp') 7700px center / auto 80% no-repeat,
url('/showcase-images/mchat.webp') 8250px center / auto 80% no-repeat;
animation: scroll-row2 25s linear infinite;
filter: blur(0.5px);
pointer-events: none;
}
/* Row 3 - Slowest */
body::before {
content: '';
position: fixed;
top: 66.66vh;
left: 0;
width: 200%;
height: 33.34vh;
opacity: 0.08;
z-index: -2;
background:
url('/showcase-images/portfall.webp') 0px center / auto 80% no-repeat,
url('/showcase-images/encrypteasy.webp') 550px center / auto 80% no-repeat,
url('/showcase-images/gamestacker.webp') 1100px center / auto 80% no-repeat,
url('/showcase-images/varly2.webp') 1650px center / auto 80% no-repeat,
url('/showcase-images/hiposter.webp') 2200px center / auto 80% no-repeat,
url('/showcase-images/october.webp') 2750px center / auto 80% no-repeat,
url('/showcase-images/wombat.webp') 3300px center / auto 80% no-repeat,
url('/showcase-images/portfall.webp') 3850px center / auto 80% no-repeat,
url('/showcase-images/encrypteasy.webp') 4400px center / auto 80% no-repeat,
url('/showcase-images/gamestacker.webp') 4950px center / auto 80% no-repeat,
url('/showcase-images/varly2.webp') 5500px center / auto 80% no-repeat,
url('/showcase-images/hiposter.webp') 6050px center / auto 80% no-repeat,
url('/showcase-images/october.webp') 6600px center / auto 80% no-repeat,
url('/showcase-images/wombat.webp') 7150px center / auto 80% no-repeat;
animation: scroll-row3 50s linear infinite;
filter: blur(0.5px);
pointer-events: none;
}
/* Hero padding */
.hero {
padding-top: 3rem !important;
padding-bottom: 2rem !important;
}
@keyframes scroll-row1 {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes scroll-row2 {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes scroll-row3 {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.small-buttons {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.small-buttons a {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-radius: 6px;
text-decoration: none;
background: var(--sl-color-gray-6);
color: var(--sl-color-white);
border: 1px solid var(--sl-color-gray-5);
transition: all 0.2s;
}
.small-buttons a:hover {
background: var(--sl-color-gray-5);
border-color: var(--sl-color-accent);
}
/* Round card corners and add translucent blur effect */
.card {
border-radius: 12px;
background: rgba(var(--sl-color-gray-6-rgb), 0.6) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
`}</style>
## Quickstart
<Tabs syncKey="os">
<TabItem label="macOS" icon="apple">
```bash
# Install Wails
go install github.com/wailsapp/wails/v3/cmd/wails3@latest
# Create your application
wails3 init -n myapp -t vanilla
# Run with hot reload
cd myapp && wails3 dev
```
</TabItem>
<TabItem label="Windows" icon="seti:windows">
```powershell
# Install Wails
go install github.com/wailsapp/wails/v3/cmd/wails3@latest
# Create your application
wails3 init -n myapp -t vanilla
# Run with hot reload
cd myapp; wails3 dev
```
</TabItem>
<TabItem label="Linux" icon="linux">
```bash
# Install Wails
go install github.com/wailsapp/wails/v3/cmd/wails3@latest
# Create your application
wails3 init -n myapp -t vanilla
# Run with hot reload
cd myapp && wails3 dev
```
</TabItem>
</Tabs>
**Your application is now running** with hot reload and type-safe Go-to-JS bindings.
## Why Wails?
<CardGrid>
<Card title="Performance That Users Notice" icon="rocket">
- ~15MB binaries vs Electron's 150MB
- ~10MB baseline memory vs 100MB+
- &lt;0.5s startup time vs 2-3s
- Native rendering using OS WebView
- No bundled browser overhead
</Card>
<Card title="Developer Experience" icon="setting">
- One Go codebase for all platforms
- Any web framework - React, Vue, Svelte
- Hot reload during development
- Auto-generated bindings to easily call Go from Javascript
- In-memory IPC. No network ports
</Card>
<Card title="Production Ready" icon="approve-check">
- Multiple windows with lifecycles
- Native menus and system tray
- Platform-native file dialogs
- System integration and shortcuts
- Code signing and packaging tools
</Card>
<Card title="Cross-Platform Native" icon="laptop">
- Single codebase for Windows, macOS, Linux
- Platform-specific features when needed
- No compromise on user experience
- Deploy to all platforms from one build
- Mobile coming soon...
</Card>
</CardGrid>
## Next Steps
Next: [Build a complete application](/tutorials/03-notes-vanilla), browse [examples](https://github.com/wailsapp/wails/tree/v3-alpha/v3/examples), or check the [API reference](/reference/application). Migrating from v2? See the [upgrade guide](/migration/v2-to-v3).
:::note[Production Ready]
Wails v3 is in **ALPHA**. The API is *reasonably* stable, and applications are running in production. We're refining documentation and tooling before the final release.
:::
<Card title="Support Wails Development" icon="heart">
Wails is free and open source, built by developers for developers. If Wails helps you build amazing applications, consider supporting its continued development.
Your sponsorship helps maintain the project, improve documentation, and develop new features that benefit the entire community.
[Become a Sponsor →](https://github.com/sponsors/leaanthony)
</Card>
Reference in a new issue View git blame Copy permalink