@Tutorial(time: 30) {
  @Intro(title: "Quick Start: Hello World") {
    This tutorial walks you through creating a simple web application using JavaScriptKit. You'll learn how to set up a Swift package, add JavaScriptKit as a dependency, write code to manipulate the DOM, and build and run your web application.

    JavaScriptKit allows you to interact with JavaScript APIs directly from Swift code when targeting WebAssembly, making it easy to build web applications using Swift.
  }

  @Section(title: "Prerequisites") {
    This tutorial requires the OSS Swift Toolchain and Swift SDK for WebAssembly to be installed. Follow these steps to set up your development environment for building web applications with JavaScriptKit.

    @Steps {
      @Step {
        Install `swiftly`, the Swift toolchain installer, per the [instructions on swift.org](https://www.swift.org/install/) for your platform.

        `swiftly` is the recommended way to install and manage OSS Swift toolchains. You cannot use toolchains bundled with Xcode for WebAssembly development.
        @Code(name: "Console", file: "hello-world-0-0-install-swiftly.txt")
      }

      @Step {
        Install the latest Swift 6.2 development snapshot using `swiftly`:

        @Code(name: "Console", file: "hello-world-0-1-install-toolchain.txt")
      }

      @Step {
        Install the Swift SDK for WASI that matches your toolchain version:

        Navigate to [the downloads page](https://www.swift.org/download/) and find the "Swift SDK for WASI" section. Find a version that **exactly** matches the toolchain version from step 2.

        @Code(name: "Console", file: "hello-world-0-2-install-sdk.txt")
      }

      @Step {
        Verify the Swift SDK installation and set up your environment:

        The following sections of this tutorial assume you have set the `SWIFT_SDK_ID` environment variable.
        @Code(name: "Console", file: "hello-world-0-3-verify-sdk.txt")
      }
    }
  }

  @Section(title: "Set up your project") {
    Let's start by creating a new Swift package and configuring it to use JavaScriptKit.

    @Steps {
      @Step {
        Create a new Swift package by running the following command in your terminal:
        This creates a new Swift executable package named "Hello" with a basic folder structure.

        @Code(name: "Console", file: "hello-world-1-1-init-package.txt")
      }

      @Step {
        Add JavaScriptKit as a dependency using the Swift Package Manager:
        This command adds the JavaScriptKit GitHub repository as a dependency to your package.

        @Code(name: "Console", file: "hello-world-1-2-add-dependency.txt")
      }

      @Step {
        Add JavaScriptKit as a target dependency:
        This command adds JavaScriptKit as a target dependency to your package.

        @Code(name: "Console", file: "hello-world-1-3-add-target-dependency.txt")
      }
    }
  }

  @Section(title: "Write your web application") {
    Now let's write some Swift code that manipulates the DOM to create a simple web page.

    @Steps {
      @Step {
        Create or modify the main.swift file in your Sources/Hello directory:
        This code creates a new div element, sets its text content to "Hello from Swift!", and appends it to the document body.

        @Code(name: "main.swift", file: "hello-world-2-1-main-swift.swift")
      }

      @Step {
        Create an index.html file in the root of your project to load your WebAssembly application:
        This HTML file includes a script that loads and runs your compiled WebAssembly code.

        @Code(name: "index.html", file: "hello-world-2-2-index-html.html")
      }
    }
  }

  @Section(title: "Build and run your application") {
    Let's build your application and run it in a web browser.

    @Steps {
      @Step {
        Build your application with the Swift WebAssembly toolchain:
        This command compiles your Swift code to WebAssembly and generates the necessary JavaScript bindings.

        @Code(name: "Console", file: "hello-world-3-1-build.txt")
      }

      @Step {
        Start a local web server to serve your application:
        This starts a simple HTTP server that serves files from your current directory.
        > Note: If you are building your app with `wasm32-unknown-wasip1-threads` target, you need to enable [Cross-Origin Isolation](https://developer.mozilla.org/en-US/docs/Web/API/Window/crossOriginIsolated) for `SharedArrayBuffer`. See "Cross-Origin Isolation Requirements" in <doc:Deploying-Pages>
        @Code(name: "Console", file: "hello-world-3-2-server.txt")
      }

      @Step {
        Open your application in a web browser:
        Your browser should open and display a page with "Hello from Swift!" as text added by your Swift code.

        @Code(name: "Console", file: "hello-world-3-3-open.txt") {
          @Image(alt: "Preview of the web application", source: "hello-world-3-3-app.png")
        }
      }
    }
  }
}
