Learn GO-WASM with Real Code Examples

# go/demo/main.go
package main

import (
    "syscall/js"
)

func main() {
    doc := js.Global().Get("document")
    doc.Call("write", "Hello, Go WASM!")
    select{}
}

A basic Go program compiled to WebAssembly that writes 'Hello, Go WASM!' to the browser document.

# go/demo/button.go
package main

import (
    "syscall/js"
)

func main() {
    doc := js.Global().Get("document")
    button := doc.Call("createElement", "button")
    button.Set("innerHTML", "Click Me")
    doc.Get("body").Call("appendChild", button)

    text := doc.Call("createElement", "p")
    doc.Get("body").Call("appendChild", text)

    button.Call("addEventListener", "click", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        text.Set("innerHTML", "Button clicked!")
        return nil
    }))

    select{}
}

Adds a button to the page that updates text when clicked.

# go/demo/input.go
package main

import (
    "syscall/js"
)

func main() {
    doc := js.Global().Get("document")
    input := doc.Call("createElement", "input")
    doc.Get("body").Call("appendChild", input)

    text := doc.Call("createElement", "p")
    doc.Get("body").Call("appendChild", text)

    input.Call("addEventListener", "input", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        text.Set("innerHTML", input.Get("value"))
        return nil
    }))

    select{}
}

Reads value from an input field and displays it.

# go/demo/conditional.go
package main

import (
    "syscall/js"
)

func main() {
    show := true
    doc := js.Global().Get("document")
    text := doc.Call("createElement", "p")
    doc.Get("body").Call("appendChild", text)

    if show {
        text.Set("innerHTML", "Condition is true")
    } else {
        text.Set("innerHTML", "Condition is false")
    }

    select{}
}

Shows different messages based on a variable.

# go/demo/loop.go
package main

import (
    "syscall/js"
    "strconv"
)

func main() {
    doc := js.Global().Get("document")
    for i := 1; i <= 5; i++ {
        p := doc.Call("createElement", "p")
        p.Set("innerHTML", "Item "+strconv.Itoa(i))
        doc.Get("body").Call("appendChild", p)
    }
    select{}
}

Creates a list of items using a loop.

# go/demo/timer.go
package main

import (
    "syscall/js"
    "time"
)

func main() {
    doc := js.Global().Get("document")
    text := doc.Call("createElement", "p")
    doc.Get("body").Call("appendChild", text)

    ticker := time.NewTicker(time.Second)
    go func() {
        for t := range ticker.C {
        text.Set("innerHTML", t.Format("15:04:05"))
        }
    }()

    select{}
}

Updates the current time every second.

# go/demo/event.go
package main

import (
    "syscall/js"
)

func main() {
    doc := js.Global().Get("document")
    btn := doc.Call("createElement", "button")
    btn.Set("innerHTML", "Click Event")
    doc.Get("body").Call("appendChild", btn)

    btn.Call("addEventListener", "click", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        js.Global().Get("console").Call("log", "Button clicked!")
        return nil
    }))

    select{}
}

Registers a generic event callback for clicks.

# go/demo/fetch.go
package main

import (
    "syscall/js"
)

func main() {
    doc := js.Global().Get("document")
    p := doc.Call("createElement", "p")
    doc.Get("body").Call("appendChild", p)

    js.Global().Call("fetch", "https://api.github.com")
    .Call("then", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        response := args[0]
        response.Call("text").Call("then", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        p.Set("innerHTML", args[0].String())
        return nil
        }))
        return nil
    }))

    select{}
}

Uses fetch to get data from an API and displays it.

# go/demo/toggle.go
package main

import (
    "syscall/js"
)

func main() {
    doc := js.Global().Get("document")
    p := doc.Call("createElement", "p")
    p.Set("innerHTML", "Visible text")
    doc.Get("body").Call("appendChild", p)

    btn := doc.Call("createElement", "button")
    btn.Set("innerHTML", "Toggle")
    doc.Get("body").Call("appendChild", btn)

    visible := true
    btn.Call("addEventListener", "click", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        visible = !visible
        if visible {
        p.Set("style.display", "block")
        } else {
        p.Set("style.display", "none")
        }
        return nil
    }))

    select{}
}

Toggles the visibility of a paragraph when a button is clicked.

# go/demo/dynamic_list.go
package main

import (
    "syscall/js"
    "strconv"
)

func main() {
    doc := js.Global().Get("document")
    ul := doc.Call("createElement", "ul")
    doc.Get("body").Call("appendChild", ul)

    btn := doc.Call("createElement", "button")
    btn.Set("innerHTML", "Add Item")
    doc.Get("body").Call("appendChild", btn)

    count := 1
    btn.Call("addEventListener", "click", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        li := doc.Call("createElement", "li")
        li.Set("innerHTML", "Item "+strconv.Itoa(count))
        ul.Call("appendChild", li)
        count++
        return nil
    }))

    select{}
}

Adds items dynamically to a list when a button is clicked.