A small-ish example on how to use vecty

vecty_hello.go

package plan

import (
	"log"

	"github.com/davecgh/go-spew/spew"
	"github.com/gopherjs/vecty"
	"github.com/gopherjs/vecty/elem"
	"github.com/gopherjs/vecty/event"
	"github.com/gopherjs/vecty/prop"
)

type PlanComponent struct {
	vecty.Core
}

type dataComponent struct {
	vecty.Core
	Data string
}

func (d *dataComponent) Render() *vecty.HTML {
	log.Printf("[DEBUG] planData.Render: planData data = %s", d.Data)
	html := elem.Div(
		elem.Span(
			vecty.Text(d.Data),
		),
	)
	log.Printf("[DEBUG] planData.Render: planData content = %s", spew.Sdump(html))
	return html
}

type textBox struct {
	vecty.Core
	planName string
	planData *dataComponent
}

func (t *textBox) Render() *vecty.HTML {
	return elem.Div(
		elem.Label(
			vecty.Text("Enter the location of a module to load: "),
		),
		elem.Input(
			prop.ID("load-plan"),
			prop.Type(prop.TypeText),
			event.Input(t.updateName),
		),
		elem.Button(
			vecty.Text("Load"),
			event.Click(t.onClick),
		),
		t.planData,
	)
}

func (t *textBox) onClick(e *vecty.Event) {
	t.planData.Data = t.planName
	log.Printf("[DEBUG] onClick: planData data = %s", t.planData.Data)
	vecty.Rerender(t.planData)
}

func (t *textBox) updateName(e *vecty.Event) {
	t.planName = e.Target.Get("value").String()
}

func (c *PlanComponent) Render() *vecty.HTML {
	t := &textBox{
		planData: &dataComponent{
			Data: "No data yet",
		},
	}
	return elem.Body(
		elem.Heading1(vecty.Text("Make a plan")),
		t.Render(),
	)
}

func Render() {
	vecty.SetTitle("Hello world for plan UI")
	vecty.RenderBody(&PlanComponent{})
}

This was a bit of some tinkering that I did with vecty as a bit of checking out what it would take to write a Terraform plan UI in gopherjs. Obviously I didn't get very far, but I'm pasting this for my personal reference, along with this unofficial vecty howto.

Another howto: https://github.com/gopherjs/vecty/blob/docfest/docs/index.md#vecty-introduction