Build Your First Marionette App

Step 1

Check Your Setup

Make sure Go is installed and available from your terminal.

go version

Step 2

Create a Project

Create a working directory and initialize a Go module.

mkdir marionette-hello
cd marionette-hello
go mod init example.com/marionette-hello

Step 3

Add Marionette

Add Marionette as a dependency.

go get github.com/YoshihideShirai/marionette@latest

Step 4

Write Hello World

Create main.go with this code.

package main

import (
    mb "github.com/YoshihideShirai/marionette/backend"
    mf "github.com/YoshihideShirai/marionette/frontend"
)

func main() {
    app := mb.New()

    app.Page("/", func(ctx *mb.Context) mf.Node {
        return mf.Container(mf.ContainerProps{
            MaxWidth: "2xl",
            Centered: true,
        },
            mf.Stack(mf.StackProps{Direction: "column", Gap: "4"},
                mf.PageHeader(mf.PageHeaderProps{
                    Title:       "Hello, Marionette",
                    Description: "Your first Go-powered UI is running.",
                }),
                mf.TextComponent(mf.TextProps{
                    Text: "Hello World",
                    Size: "lg",
                }),
            ),
        )
    })

    if err := app.Run("127.0.0.1:8080"); err != nil {
        panic(err)
    }
}

Step 5

Run and Open It

Start the app.

go run .

Open http://127.0.0.1:8080 in your browser.

Step 6

Set Up Hot Reload

During development, Air can rebuild and restart the app whenever Go files change.

Install Air first.

go install github.com/air-verse/air@latest

Create .air.toml at the project root.

root = "."
tmp_dir = "tmp"

[build]
  cmd = "go build -o ./tmp/marionette-hello ."
  bin = "./tmp/marionette-hello"
  include_ext = ["go", "tpl", "tmpl", "html"]
  exclude_dir = ["tmp"]
  delay = 200
  stop_on_error = true

[log]
  time = true

After that, run air instead of go run ..

air

When you edit and save main.go, Air restarts the app automatically. Keep the browser open at http://127.0.0.1:8080 to check the result.

Step 7

What You Learned

• Create a Marionette app with mb.New()
• Register a page with app.Page
• Compose the screen with frontend components
• Start a local server with app.Run
• Automate rebuilds and restarts with air

Next, continue with Serve Static Assets.