Add more documentation.

Move to docker building.
Update README.

mkdocs-website/Dockerfile

@@ -0,0 +1,5 @@
+FROM squidfunk/mkdocs-material
+RUN pip install mkdocs-macros-plugin
+RUN pip install mkdocs-glightbox
+RUN pip install mkdocs-table-reader-plugin
+RUN pip install mkdocs-static-i18n

mkdocs-website/README.md

@@ -5,39 +5,36 @@ This is the documentation for Wails v3. It is currently a work in progress.
 If you do not wish to build it locally, it is available online at
 [https://wailsapp.github.io/wails/](https://wailsapp.github.io/wails/).
 
-## Recommended Setup Steps
+## Setup Steps
 
-Install the wails3 CLI if you haven't already:
+1. Install the wails3 CLI if you haven't already:
 
-```shell
-go install github.com/wailsapp/wails/v3/cmd/wails3@latest
-```
+    ```shell
+    git clone https://github.com/wailsapp/wails.git
+    cd wails
+    git checkout v3-alpha
+    cd v3/cmd/wails3
+    go install
+    ```
+2. Install [docker](https://www.docker.com)
+3. Run the following command to build the docker container:
 
-The documentation uses mkdocs, so you will need to install
-[Python](https://www.python.org/). Once installed, you can setup the
-documentation by running the following command:
+    ```shell
+    wails3 task docs:setup
+    ```
+4. Serve the documentation locally:
 
-```bash
-wails3 task docs:setup
-```
+    ```shell
+    wails3 task docs:serve
+    ```
 
-This will install the required dependencies for you.
+5. Open your browser to [http://127.0.0.1:8000](http://127.0.0.1:8000)
 
-If you have installed the wails3 CLI, you can run the following command to build
-the documentation and serve it locally:
+6. For a complete build, run:
 
-```bash
-wails3 task docs:serve
-```
-
-### Manual Setup
-
-To install manually, you will need to do the following:
-
-- Install [Python](https://www.python.org/)
-- Run `pip install -r requirements.txt` to install the required dependencies
-- Run `mkdocs serve` to serve the documentation locally
-- Run `mkdocs build` to build the documentation
+    ```shell
+    wails3 task docs:build
+    ```
 
 ## Contributing
 

mkdocs-website/Taskfile.yml

@@ -7,10 +7,10 @@ tasks:
   setup:
     summary: Setup the project
     preconditions:
-      - sh: python{{exeExt}} --version
-        msg: "Looks like Python isn't installed. Python is required to build the documentation: https://www.python.org/downloads/"
+      - sh: docker version
+        msg: "Looks like docker isn't installed. Visit https://www.docker.com to download and install."
     cmds:
-      - python -m pip install -r requirements.txt --user
+      - docker build -t squidfunk/mkdocs-material .
 
   setup:insiders:
     summary: Setup the project (insiders)
@@ -31,18 +31,54 @@ tasks:
   build:
     summary: Builds the documentation
     preconditions:
-      - sh: mkdocs --version
-        msg: "Looks like mkdocs isn't installed. Run `wails3 task setup` or `task setup` in the documentation directory to install it."
+      - sh: docker version
+        msg: "Looks like docker isn't installed. Visit https://www.docker.com to download and install."
     cmds:
-      - mkdocs build
+      - build:windows
+      - build:unix
+
+  build:windows:
+    summary: Builds the documentation (Windows)
+    internal: true
+    platforms:
+      - windows
+    cmds:
+      - docker run --rm -v "%cd%":/docs squidfunk/mkdocs-material build
+
+  build:unix:
+    summary: Builds the documentation (Unix)
+    internal: true
+    platforms:
+      - darwin
+      - linux
+    cmds:
+      - docker run --rm -v "$(pwd)":/docs squidfunk/mkdocs-material build
 
   serve:
     summary: Builds the documentation and serves it locally
     preconditions:
-      - sh: mkdocs --version
-        msg: "Looks like mkdocs isn't installed. Run `wails3 task setup` or `task setup` in the documentation directory to install it."
+      - sh: docker version
+        msg: "Looks like docker isn't installed. Visit https://www.docker.com to download and install."
     cmds:
-      - mkdocs serve
+      - task: serve:windows
+      - task: serve:unix
+
+  serve:windows:
+    summary: Builds the documentation and serves it locally (Windows)
+    internal: true
+    platforms:
+      - windows
+    cmds:
+      - docker run --rm -it -p 8000:8000 -v "%cd%":/docs squidfunk/mkdocs-material
+
+  serve:unix:
+    summary: Builds the documentation and serves it locally (Unix)
+    internal: true
+    platforms:
+      - darwin
+      - linux
+    cmds:
+      - docker run --rm -it -p 8000:8000 -v "$(pwd)":/docs squidfunk/mkdocs-material
 
   serve:insiders:
     summary: Builds the documentation and serves it locally

mkdocs-website/docs/en/guides/bindings/enums.md

@@ -0,0 +1,149 @@
+# Enums
+
+In Go, an enum (enumeration) is a user-defined type that consists of a set of named constants called enumerators. Enums 
+are useful for representing a fixed set of values that a variable can take.
+
+To define an enum in Go, you can use a type declaration with a list of constant values. Here's an example:
+
+```go
+type Title string
+
+const (
+    Mr  Title = "Mr"
+    Mrs Title = "Mrs"
+    Ms  Title = "Ms"
+)
+```
+
+In this example, we define an enum type called `Title` using the `type` keyword. We then declare a set of constants 
+(`Mr`, `Mrs`, `Ms`) of type `Title` using the `const` keyword.
+
+## Using Enums in Bound Structs
+
+Let's extend our previous example to use the `Title` enum in the `Person` struct:
+
+```go
+package main
+
+import (
+    "github.com/wailsapp/wails/v3/pkg/application"
+    "log"
+)
+
+// Title is a title
+type Title string
+
+const (
+    Mr  Title = "Mr"
+    Mrs Title = "Mrs"
+    Ms  Title = "Ms"
+)
+
+// Person is a person
+type Person struct {
+    // Name of the person
+    Name  string
+    // Title of the person
+    Title Title
+}
+
+type GreetService struct{}
+
+func (g *GreetService) Greet(person Person) string {
+    return "Hello " + string(person.Title) + " " + person.Name
+}
+
+func main() {
+    app := application.New(application.Options{
+        Bind: []any{
+            &GreetService{},
+        },
+    })
+    // ....
+    app.NewWebviewWindow()
+    err := app.Run()
+    if err != nil {
+        log.Fatal(err)
+    }
+}
+```
+
+In this updated example, we add a `Title` field of type `Title` to the `Person` struct. The `Greet` method now includes the `Title` in the greeting message.
+
+When we run the bindings generator, it will process the enum and generate the corresponding JavaScript or TypeScript code.
+
+## Generating Bindings with Enums
+
+After adding the `Title` enum to our example, let's generate the bindings using the following command:
+
+```bash
+% wails3 generate bindings
+```
+
+The output should display information about the processed package, struct, method, enum, and model:
+
+```bash
+INFO Processed: 1 Package, 1 Struct, 1 Method, 1 Enum, 1 Model in 1.044166ms.
+INFO Output directory: /Users/lea/GolandProjects/tempdocs/binding/frontend/bindings
+```
+
+If we look in the `frontend/bindings` directory, we should see a generated `models.js` file that includes the enum definition:
+
+```javascript
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * @readonly
+ * @enum {string}
+ */
+export const Title = {
+    Mr: "Mr",
+    Mrs: "Mrs",
+    Ms: "Ms",
+};
+
+/**
+ * Person defines a person
+ */
+export class Person {
+    /**
+     * Creates a new Person instance.
+     * @param {Partial<Person>} [source = {}] - The source object to create the Person.
+     */
+    constructor(source = {}) {
+        if (!("Name" in source)) {
+            /**
+             * Name of the person
+             * @member
+             * @type {string}
+             */
+            this["Name"] = "";
+        }
+        if (!("Title" in source)) {
+            /**
+             * Title of the person
+             * @member
+             * @type {Title}
+             */
+            this["Title"] = null;
+        }
+        Object.assign(this, source);
+    }
+
+    /**
+     * Creates a new Person instance from a string or object.
+     * @param {string|object} source - The source data to create a Person instance from.
+     * @returns {Person} A new Person instance.
+     */
+    static createFrom(source) {
+        let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
+        return new Person(parsedSource);
+    }
+}
+```
+
+The generated `models.js` file includes the `Title` enum definition, which is exported as a read-only object with the enum values as properties. The `Person` class also includes a `Title` property of type `Title`.
+
+You can now use the generated enum and class in your frontend code when interacting with the bound `GreetService` struct.

mkdocs-website/docs/en/guides/bindings/intro.md

@@ -0,0 +1,14 @@
+# Bindings Generator Guide
+
+Welcome to the Wails v3 Bindings Generator Guide!
+
+One of the key features of Wails is the ability to seamlessly integrate backend Go code with the frontend, enabling
+efficient communication between the two layers. This can be done manually by sending messages between the frontend and
+backend, but this can be cumbersome and error-prone, especially when dealing with complex data types.
+
+The bindings generator in Wails v3 simplifies this process by automatically generating JavaScript or TypeScript
+functions and models that reflect the methods and data structures defined in your Go code. This means you can write
+your backend logic in Go and easily expose it to the frontend without the need for manual binding or complex integration.
+
+This guide is designed to help you understand and utilise this powerful binding tool.
+

mkdocs-website/docs/en/guides/bindings/models.md

@@ -0,0 +1,129 @@
+# Binding Models
+
+In addition to binding methods, you can also use structs as input or output parameters in your bound methods. When structs are used as parameters, Wails generates corresponding JavaScript versions of those types.
+
+Let's extend the previous example to use a `Person` type that has a `Name` field:
+
+```go title="main.go"
+package main
+
+import (
+	"github.com/wailsapp/wails/v3/pkg/application"
+	"log"
+)
+
+// Person defines a person
+type Person struct {
+	// Name of the person
+	Name string
+}
+
+type GreetService struct{}
+
+func (g *GreetService) Greet(person Person) string {
+	return "Hello " + person.Name
+}
+
+func main() {
+	app := application.New(application.Options{
+		Bind: []any{
+			&GreetService{},
+		},
+	})
+	// ....
+	app.NewWebviewWindow()
+	err := app.Run()
+	if err != nil {
+		log.Fatal(err)
+	}
+}
+
+```
+
+In this updated example, we define a `Person` struct with a `Name` field. The `Greet` method in the `GreetService` struct
+now takes a `Person` as an input parameter.
+
+When you run the bindings generator, Wails will generate a corresponding JavaScript `Person` type that mirrors the Go
+struct. This allows you to create instances of the `Person` type in your frontend code and pass them to the bound
+`Greet` method.
+
+If we run the bindings generator again, we should see the following output:
+
+```bash
+% wails3 generate bindings
+ INFO  Processed: 1 Package, 1 Struct, 1 Method, 0 Enums, 1 Models in 4.075625ms.
+ INFO  Output directory: /Users/me/myproject/frontend/bindings
+```
+
+In the `frontend/bindings/main` directory, you should see a new `models.js` file containing the following code:
+
+```javascript title="models.js"
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * Person defines a person
+ */
+export class Person {
+    /**
+     * Creates a new Person instance.
+     * @param {Partial<Person>} [source = {}] - The source object to create the Person.
+     */
+    constructor(source = {}) {
+        if (!("Name" in source)) {
+            /**
+             * Name of the person
+             * @member
+             * @type {string}
+             */
+            this["Name"] = "";
+        }
+
+        Object.assign(this, source);
+    }
+
+    /**
+     * Creates a new Person instance from a string or object.
+     * @param {string|object} source - The source data to create a Person instance from.
+     * @returns {Person} A new Person instance.
+     */
+    static createFrom(source) {
+        let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
+        return new Person(parsedSource);
+    }
+};
+
+```
+
+The `Person` class is generated with a constructor that takes an optional `source` parameter, which allows you to
+create a new `Person` instance from an object. It also has a static `createFrom` method that can create a `Person`
+instance from a string or object.
+
+You may also notice that comments in the Go struct are kept in the generated JavaScript code! This can be helpful for
+understanding the purpose of the fields and methods in the generated models and should be picked up by your IDE.
+
+## Using Bound Models
+
+Here's an example of how you can use the generated JavaScript `Person` type in your frontend code:
+
+```javascript title="main.js"
+import {Greet} from "./bindings/main/GreetService.js";
+import {Person} from "./bindings/main/models.js";
+
+const resultElement = document.getElementById('result');
+
+async function doGreet() {
+    let person = new Person({Name: document.getElementById('name').value});
+    if (!person.Name) {
+        person.Name = 'anonymous';
+    }
+    resultElement.innerText = await Greet(person);
+}
+```
+
+In this example, we import the generated `Person` type from the `models` module. We create a new instance of `Person`,
+set its `Name` property, and pass it to the `Greet` method.
+
+Using bound models allows you to work with complex data structures and seamlessly pass them between the frontend and
+backend of your Wails application.

mkdocs-website/docs/en/guides/bindings/structs.md

@@ -0,0 +1,99 @@
+# Binding Structs
+
+In Wails v3, structs can be bound to your application. These structs act as a bridge between the backend and frontend,
+allowing you to define methods and state that can be accessed and manipulated from the frontend. 
+
+There are 3 things to consider when binding structs:
+
+1. Structs can hold state and expose methods that operate on that state.
+2. Structs can be used similar to controllers in HTTP web applications or as services.
+3. Only public methods on the struct are bound, following Go's convention.
+
+Here's a simple example of how you can define a struct and bind it to your Wails application:
+
+```go title="main.go"
+package main
+
+import (
+    "log"
+    "github.com/wailsapp/wails/v3/pkg/application"
+)
+
+type GreetService struct {}
+
+func (g *GreetService) Greet(name string) string {
+    return "Hello " + name
+}
+
+func main() {
+    app := application.New(application.Options{
+        Bind: []any{
+            &GreetService{},
+        },
+    })
+    // ....
+    err := app.Run()
+    if err != nil {
+        log.Fatal(err)
+    }
+}
+```
+
+In this example, we define a `GreetService` struct with a public `Greet` method. The `Greet` method takes a `name`
+parameter and returns a greeting string.
+
+We then create a new Wails application using `application.New` and bind an instance of the `GreetService` struct to the
+application using the `Bind` option in the `application.Options`. The `Bind` option must always be given an *instance* of
+the struct, not the struct type itself.
+
+## Generating the Bindings
+
+By binding the struct, Wails is able to generate the necessary JavaScript or TypeScript code by running the following
+command in the project directory:
+
+```bash
+wails generate bindings
+```
+You should see output similar to the following:
+
+```bash
+% wails3 generate bindings
+ INFO  Processed: 1 Package, 1 Struct, 1 Method, 0 Enums, 0 Models in 4.41575ms.
+ INFO  Output directory: /Users/me/myproject/frontend/bindings
+```
+If we look in the `frontend/bindings` directory, we should see the following files:
+
+```bash
+frontend/bindings
+└── main
+    └── GreetService.js
+```
+
+The generated `GreetService.js` file contains the JavaScript code that mirrors the Go struct and its methods:
+
+```javascript title="GreetService.js"
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+import {Call} from "@wailsio/runtime";
+
+/**
+ * @param {string} name
+ * @returns {Promise<string>}
+ */
+export function Greet(name) {
+    return Call.ByName("main.GreetService.Greet", name);
+}
+```
+As you can see, it also generates all the necessary JSDoc type information to ensure type safety in your frontend code.
+
+## Using the Bindings
+
+You can import and use this file in your frontend code to interact with the backend.
+
+```javascript title="main.js"
+import { Greet } from './bindings/main/GreetService.js';
+
+console.log(Greet('Alice')); // Output: Hello Alice
+```

mkdocs-website/docs/en/guides/bindings/typescript.md

@@ -0,0 +1,65 @@
+# Typescript
+
+To generate TypeScript bindings instead of JavaScript, you can use the `-ts` flag:
+
+```bash
+% wails3 generate bindings -ts
+```
+
+This will generate TypeScript files in the `frontend/bindings` directory:
+
+```bash
+frontend/bindings
+└── main
+   ├── GreetService.ts
+   └── models.ts
+```
+
+The generated files include `GreetService.ts`, which contains the TypeScript code for the bound struct and its methods,
+and `models.ts`, which contains the TypeScript types for the bound models:
+
+```typescript title="GreetService.ts"
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+import {Call} from "@wailsio/runtime";
+
+import {Person} from "./models";
+
+export function Greet(person: Person): Promise<string> {
+    return Call.ByName("main.GreetService.Greet", person);
+}
+```
+
+```typescript title="models.ts"
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * Person defines a person
+ */
+export class Person {
+    /**
+     * Name of the person
+     */
+    "Name": string;
+
+    /** Creates a new Person instance. */
+    constructor(source: Partial<Person> = {}) {
+        if (!("Name" in source)) {
+            this["Name"] = "";
+        }
+
+        Object.assign(this, source);
+    }
+
+    /** Creates a new Person instance from a string or object. */
+    static createFrom(source: string | object = {}): Person {
+        let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
+        return new Person(parsedSource as Partial<Person>);
+    }
+}
+```
+
+Using TypeScript bindings provides type safety and improved IDE support when working with the generated code in your frontend.

mkdocs-website/docs/en/learn/bindings.md

@@ -0,0 +1,311 @@
+# Bindings Generator Guide
+
+## Introduction
+
+Welcome to the Wails v3 Bindings Generator Guide!
+
+One of the key features of Wails is the ability to seamlessly integrate backend Go code with the frontend, enabling
+efficient communication between the two layers. This can be done manually by sending messages between the frontend and
+backend, but this can be cumbersome and error-prone, especially when dealing with complex data types.
+
+The bindings generator in Wails v3 simplifies this process by automatically generating JavaScript or TypeScript
+functions and models that reflect the methods and data structures defined in your Go code. This means you can write
+your backend logic in Go and easily expose it to the frontend without the need for manual binding or complex integration.
+
+This guide is designed to help you understand and utilise this powerful binding tool.
+
+## Core Concepts
+
+In Wails v3, structs can be bound to your application. These structs act as a bridge between the backend and frontend,
+allowing you to define methods and state that can be accessed and manipulated from the frontend.
+
+### Struct Binding
+
+1. Structs can hold state and expose methods that operate on that state.
+2. Structs can be used similar to controllers in HTTP web applications or as services.
+3. Only public methods on the struct are bound, following Go's convention.
+
+Here's a simple example of how you can define a struct and bind it to your Wails application:
+
+```go
+package main
+
+import (
+    "log"
+    "github.com/wailsapp/wails/v3/pkg/application"
+)
+
+type GreetService struct {}
+
+func (g *GreetService) Greet(name string) string {
+    return "Hello " + name
+}
+
+func main() {
+    app := application.New(application.Options{
+        Bind: []any{
+            &GreetService{},
+        },
+    })
+    // ....
+    err := app.Run()
+    if err != nil {
+        log.Fatal(err)
+    }
+}
+```
+
+In this example, we define a `GreetService` struct with a public `Greet` method. The `Greet` method takes a `name`
+parameter and returns a greeting string.
+
+We then create a new Wails application using `application.New` and bind an instance of the `GreetService` struct to the
+application using the `Bind` option in the `application.Options`. The `Bind` option must always be given an *instance* of
+the struct, not the struct type itself.
+
+### Generating the Bindings
+
+By binding the struct, Wails is able to generate the necessary JavaScript or TypeScript code by running the following
+command in the project directory:
+
+```bash
+wails generate bindings
+```
+You should see output similar to the following:
+
+```bash
+% wails3 generate bindings
+ INFO  Processed: 1 Package, 1 Struct, 1 Method, 0 Enums, 0 Models in 4.41575ms.
+ INFO  Output directory: /Users/me/myproject/frontend/bindings
+```
+If we look in the `frontend/bindings` directory, we should see the following files:
+
+```bash
+frontend/bindings
+└── main
+    └── GreetService.js
+```
+
+The generated `GreetService.js` file contains the JavaScript code that mirrors the Go struct and its methods:
+
+```javascript
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+import {Call} from "@wailsio/runtime";
+
+/**
+ * @param {string} name
+ * @returns {Promise<string>}
+ */
+export function Greet(name) {
+    return Call.ByName("main.GreetService.Greet", name);
+}
+```
+As you can see, it also generates all the necessary JSDoc type information to ensure type safety in your frontend code.
+
+### Using the Bindings
+
+You can import and use this file in your frontend code to interact with the backend.
+
+```javascript
+import { Greet } from './bindings/main/GreetService.js';
+
+console.log(Greet('Alice')); // Output: Hello Alice
+```
+
+### Binding Models
+
+In addition to binding methods, you can also use structs as input or output parameters in your bound methods. When structs are used as parameters, Wails generates corresponding JavaScript versions of those types.
+
+Let's extend the previous example to use a `Person` type that has a `Name` field:
+
+```go
+package main
+
+import (
+	"github.com/wailsapp/wails/v3/pkg/application"
+	"log"
+)
+
+// Person defines a person
+type Person struct {
+	// Name of the person
+	Name string
+}
+
+type GreetService struct{}
+
+func (g *GreetService) Greet(person Person) string {
+	return "Hello " + person.Name
+}
+
+func main() {
+	app := application.New(application.Options{
+		Bind: []any{
+			&GreetService{},
+		},
+	})
+	// ....
+	app.NewWebviewWindow()
+	err := app.Run()
+	if err != nil {
+		log.Fatal(err)
+	}
+}
+
+```
+
+In this updated example, we define a `Person` struct with a `Name` field. The `Greet` method in the `GreetService` struct
+now takes a `Person` as an input parameter.
+
+When you run the bindings generator, Wails will generate a corresponding JavaScript `Person` type that mirrors the Go
+struct. This allows you to create instances of the `Person` type in your frontend code and pass them to the bound
+`Greet` method.
+
+If we run the bindings generator again, we should see the following output:
+
+```bash
+% wails3 generate bindings
+ INFO  Processed: 1 Package, 1 Struct, 1 Method, 0 Enums, 1 Models in 4.075625ms.
+ INFO  Output directory: /Users/me/myproject/frontend/bindings
+```
+
+In the `frontend/bindings/main` directory, you should see a new `models.js` file containing the following code:
+
+```javascript
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * Person defines a person
+ */
+export class Person {
+    /**
+     * Creates a new Person instance.
+     * @param {Partial<Person>} [source = {}] - The source object to create the Person.
+     */
+    constructor(source = {}) {
+        if (!("Name" in source)) {
+            /**
+             * Name of the person
+             * @member
+             * @type {string}
+             */
+            this["Name"] = "";
+        }
+
+        Object.assign(this, source);
+    }
+
+    /**
+     * Creates a new Person instance from a string or object.
+     * @param {string|object} source - The source data to create a Person instance from.
+     * @returns {Person} A new Person instance.
+     */
+    static createFrom(source) {
+        let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
+        return new Person(parsedSource);
+    }
+};
+
+```
+
+The `Person` class is generated with a constructor that takes an optional `source` parameter, which allows you to
+create a new `Person` instance from an object. It also has a static `createFrom` method that can create a `Person`
+instance from a string or object.
+
+You may also notice that comments in the Go struct are kept in the generated JavaScript code! This can be helpful for
+understanding the purpose of the fields and methods in the generated models and should be picked up by your IDE.
+
+### Using Bound Models
+
+Here's an example of how you can use the generated JavaScript `Person` type in your frontend code:
+
+```javascript
+import {Greet} from "./bindings/main/GreetService.js";
+import {Person} from "./bindings/main/models.js";
+
+const resultElement = document.getElementById('result');
+
+async function doGreet() {
+    let person = new Person({Name: document.getElementById('name').value});
+    if (!person.Name) {
+        person.Name = 'anonymous';
+    }
+    resultElement.innerText = await Greet(person);
+}
+```
+
+In this example, we import the generated `Person` type from the `models` module. We create a new instance of `Person`,
+set its `Name` property, and pass it to the `Greet` method.
+
+Using bound models allows you to work with complex data structures and seamlessly pass them between the frontend and
+backend of your Wails application.
+
+### Using Typescript
+
+To generate TypeScript bindings instead of JavaScript, you can use the `-ts` flag:
+
+```bash
+% wails3 generate bindings -ts
+```
+
+This will generate TypeScript files in the `frontend/bindings` directory:
+
+```bash
+frontend/bindings
+└── main
+   ├── GreetService.ts
+   └── models.ts
+````
+
+The generated files include `GreetService.ts`, which contains the TypeScript code for the bound struct and its methods,
+and `models.ts`, which contains the TypeScript types for the bound models:
+
+```typescript title="GreetService.ts"
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+import {Call} from "@wailsio/runtime";
+
+import {Person} from "./models";
+
+export function Greet(person: Person): Promise<string> {
+    return Call.ByName("main.GreetService.Greet", person);
+}
+```
+
+```typescript title="models.ts"
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * Person defines a person
+ */
+export class Person {
+    /**
+     * Name of the person
+     */
+    "Name": string;
+
+    /** Creates a new Person instance. */
+    constructor(source: Partial<Person> = {}) {
+        if (!("Name" in source)) {
+            this["Name"] = "";
+        }
+
+        Object.assign(this, source);
+    }
+
+    /** Creates a new Person instance from a string or object. */
+    static createFrom(source: string | object = {}): Person {
+        let parsedSource = typeof source === 'string' ? JSON.parse(source) : source;
+        return new Person(parsedSource as Partial<Person>);
+    }
+}
+```
+
+Using TypeScript bindings provides type safety and improved IDE support when working with the generated code in your frontend.

mkdocs-website/mkdocs.yml

@@ -143,20 +143,28 @@ nav:
         - Runtime: learn/runtime.md
     - Feedback: getting-started/feedback.md
   - Feedback: getting-started/feedback.md
+  - Guides:
+      - Bindings:
+        - Introduction: guides/bindings/intro.md
+        - Binding Structs: guides/bindings/structs.md
+        - Binding Models: guides/bindings/models.md
+        - Enums: guides/bindings/enums.md
+        - Typescript: guides/bindings/typescript.md
+  - Reference:
+      - Runtime:
+        - Application: reference/runtime/application.md
+        - Window: reference/runtime/window.md
+        - System Tray: reference/runtime/systray.md
+        - Menu: reference/runtime/menu.md
+        - Main Thread: reference/runtime/mainthread.md
   - What's New in v3?: whats-new.md
-  - API:
-      - Application: API/application.md
-      - Window: API/window.md
-      - System Tray: API/systray.md
-      - Menu: API/menu.md
-      - Main Thread: API/mainthread.md
   - Development:
     - Introduction: development/introduction.md
     - Status: development/status.md
     - v3 Changes: development/changes.md
   - Roadmap: roadmap.md
   - Change Log: changelog.md
-  - Sponsor❤️: https://github.com/sponsors/leaanthony
+  - Sponsor ❤️: https://github.com/sponsors/leaanthony
 
 watch:
   - overrides