Skip to content
A WebAssembly framework to build GUI with Go, HTML and CSS.
Go JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Progressive app support Chrome (#277) Mar 20, 2019
cmd/goapp set ios app icon (#278) Mar 21, 2019
demo desktop them support (#280) Apr 12, 2019
internal/http content type meta Jul 31, 2019
.gitattributes Refactor window wip Feb 9, 2018
.gitignore Offline support (#275) Feb 28, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Feb 23, 2018
CONTRIBUTING.md Wasm (#263) Feb 20, 2019
History.md migrate imports Feb 20, 2019
LICENSE driver logic + context logic Oct 23, 2016
PULL_REQUEST_TEMPLATE.md Update PULL_REQUEST_TEMPLATE.md Aug 7, 2018
README.md Update README.md Jun 15, 2019
app.go Progressive app support Chrome (#277) Mar 20, 2019
app_other.go Wasm (#263) Feb 20, 2019
app_test.go Progressive app support Chrome (#277) Mar 20, 2019
app_wasm.go go 1.12 support (#276) Mar 1, 2019
attr.go Wasm (#263) Feb 20, 2019
attr_test.go Wasm (#263) Feb 20, 2019
compo.go Wasm (#263) Feb 20, 2019
compo_test.go Wasm (#263) Feb 20, 2019
contextmenu.go Wasm (#263) Feb 20, 2019
converter.go Wasm (#263) Feb 20, 2019
converter_test.go Wasm (#263) Feb 20, 2019
dom.go Wasm (#263) Feb 20, 2019
dom_test.go Wasm (#263) Feb 20, 2019
event.go misspell Feb 20, 2019
event_test.go Wasm (#263) Feb 20, 2019
factory.go Wasm (#263) Feb 20, 2019
factory_test.go Wasm (#263) Feb 20, 2019
handler.go Progressive app support Chrome (#277) Mar 20, 2019
logo.png Wasm (#263) Feb 20, 2019
mapping.go Wasm (#263) Feb 20, 2019
mapping_test.go Wasm (#263) Feb 20, 2019
menu.go Wasm (#263) Feb 20, 2019
msg.go Wasm (#263) Feb 20, 2019
msg_test.go Wasm (#263) Feb 20, 2019
node.go Wasm (#263) Feb 20, 2019
node_test.go Wasm (#263) Feb 20, 2019
notfound.go Wasm (#263) Feb 20, 2019

README.md

ui demo

app

Circle CI Go build Go Report Card GoDoc Custom badge

A WebAssembly framework to build GUI with Go, HTML and CSS.

Install

# Package sources:
go get -u -v github.com/maxence-charriere/app

# Goapp cli tool:
go get -u -v github.com/maxence-charriere/app/cmd/goapp

How it works

Project layout

root
├── cmd
│   ├── demo-server
│   │   └── main.go
│   └── demo-wasm
│       └── main.go
└── web
    ├── wasm_exec.js
    ├── style sheets...
    ├── images...
    └── etc...

This layout follows the project layout defined in golang-standards/project-layout:

  • The cmd directory contains the project main applications.
  • The demo-wasm directory contains the app that is compiled in wasm and that will run in the browser.
  • The demo-server directory contains the server that serves the wasm app and its resources.
  • The web directory contrains the app resources like style sheets (css), images and other static resources.

Project layout can be initialized by running this command in the repository root.

goapp init -v

App

The app is the Go code compiled in web assembly and executed in the browser.

// root/cmd/demo-wasm/main.go

package main

import (
    "log"

    "github.com/maxence-charriere/app"
)

type Hello struct {
    Name string
}

func (h *Hello) Render() string {
    return `
<div class="Hello">
    <h1>
        Hello
        {{if .Name}}
            {{.Name}}
        {{else}}
            world
        {{end}}!
    </h1>
    <input value="{{.Name}}" placeholder="What is your name?" onchange="{{bind "Name"}}" autofocus>
</div>
    `
}

func main() {
    app.Import(&Hello{})

    app.DefaultPath = "/hello"

    if err := app.Run(); err != nil {
        log.Print(err)
    }
}

Server

The server serves the web assembly Go program and the other resources.

// root/cmd/demo-server/main.go

package main

import (
    "log"
    "net/http"
    "github.com/maxence-charriere/app"
)

func main() {
    http.Handle("/", &app.Handler{})

    if err := http.ListenAndServe(":3000", nil); err != nil {
        log.Fatal(err)
    }
}

Build

The whole project is built with the goapp CLI tool. Goapp builds the server, the wasm app, imports the required javascript support file and puts the pieces together to provide a ready to use project.

# Get the goapp CLI tool:
go get -u github.com/maxence-charriere/app/cmd/goapp

# Builds a server ready to serve the wasm app and its resources:
goapp build -v

# Launches the server and app in the default browser:
goapp run -v -b default

Once built, the directory tree should look like:

root
├── cmd
│   ├── demo-server
│   │   └── main.go
│   └── demo-wasm
│       └── main.go
├── demo-server (server)
└── web
    ├── goapp.wasm (app)
    ├── wasm_exec.js
    ├── style sheets...
    ├── images...
    └── etc...

See the full example code and the online demo.

Support

Requires Go 1.12.

Platform Chrome Edge Firefox Safari
Desktop
Mobile

Issues:

You can’t perform that action at this time.