---
title: Tutorials
description: Learn Wails by building applications
sidebar:
  label: Overview
  order: 0
---

import { LinkButton } from '@astrojs/starlight/components';
import { Image } from 'astro:assets';
import qr1 from "../../../assets/qr1.png";
import todoApp from "../../../assets/todo-app.png";
import notesApp from "../../../assets/notes-app.png";

Step-by-step tutorials that teach Wails concepts by building complete applications. Each tutorial includes working code, explanations, and practical patterns.

:::tip[New to Go?]
Complete the [Go Tour](https://go.dev/tour/) before starting tutorials.
:::

### QR Code Service

<Image src={qr1} alt="QR Code Example" style="max-width: 400px; margin: 1rem auto; display: block;" />

Learn the fundamentals of Wails services by building a QR code generator. This tutorial introduces you to the core concepts of organizing your application logic into reusable services.

**What you'll learn:**
- How to create and structure a Wails service
- Managing external Go dependencies
- Binding Go methods to your frontend
- Passing data between Go and JavaScript
- Organizing code for maintainability

**Best for:** First-time Wails users who want to understand the service architecture

<div style="text-align: center; margin-top: 1rem;">
<LinkButton href="/tutorials/01-creating-a-service" variant="secondary" icon="right-arrow">Get Started</LinkButton>
</div>

---

### TODO List

<Image src={todoApp} alt="TODO List Application" style="max-width: 400px; margin: 1rem auto; display: block;" />

Build a complete TODO list application with a beautiful, modern interface. This hands-on tutorial teaches you core Wails patterns through a practical, real-world application using vanilla JavaScript.

**What you'll learn:**
- Service-based architecture with thread-safe state management
- CRUD operations (Create, Read, Update, Delete)
- Type-safe bindings between Go and JavaScript
- Building modern UIs without framework complexity
- Proper error handling and validation patterns

**Time to complete:** ~20 minutes

**Best for:** Your first complete Wails application - perfect for understanding the fundamentals before adding framework complexity

<div style="text-align: center; margin-top: 1rem;">
<LinkButton href="/tutorials/02-todo-vanilla" variant="secondary" icon="right-arrow">Get Started</LinkButton>
</div>

---

### Notes

<Image src={notesApp} alt="Notes Application" style="max-width: 600px; margin: 1rem auto; display: block;" />

Build an Apple Notes-style application with native file dialogs and auto-save functionality. This tutorial demonstrates desktop-specific features like file operations, native dialogs, and professional UI patterns.

**What you'll learn:**
- Native file dialogs (Save, Open, Info)
- JSON-based data persistence
- Debounced auto-save patterns
- Professional two-column desktop layouts
- Working with file system operations in Go

**Time to complete:** ~30 minutes

**Best for:** Learning desktop-specific features like file operations and native OS dialogs

<div style="text-align: center; margin-top: 1rem;">
<LinkButton href="/tutorials/03-notes-vanilla" variant="secondary" icon="right-arrow">Get Started</LinkButton>
</div>