write Go to change HTML on the go

Click Me!← Click

// composable ui fragment
type Counter struct {
    // dynamic element
	node  doors.Node
    // some state
	count int
}

// fragment render function
templ (c *Counter) Render() {
    // render dynamic element
    @c.node {
        // initial content
        ← Click
    }
    // button with attribute constructor
    <button { doors.A(ctx, doors.AClick {
            // click handler, REvent - http request wrapper with deserialized event
            On: func(ctx context.Context, _ doors.REvent[doors.PointerEvent]) bool {
                c.count += 1
                // update node content
                c.node.Update(ctx, c.display())
                // not done, keep hook active
                return false
            },
    })... }>
        Click Me!
    </button>
}

templ (c *Counter) display() {
	Clicked { fmt.Sprint(c.count) } time(s)!
}

// *this* page path is deserialized into struct (model)
type Path struct {
    // path option 1: root
	Main  bool `path:""`
    // path option 2: /show + parameter value, save to Id 
	Show   bool `path:"show/:Id"`
	Id     int
    // query parameter
	Filter string `query:"filter"`
}
// beam - source of path model updates 
templ Demo(beam doors.Beam[Path]) {
    // subscribe to path changes 
	@doors.Sub(beam, func(p Path) templ.Component {
        // if option 1 is active - render home
		if p.Main {
			return home()
        // if option 2 is active - render show
		} else if p.Show {
            return show(p.Id, p.Filter)
		}
        // render nothing otherwise
		return nil
	})
	// setup active link visualization
	{{active := d.Active{
		// Match full path (it's by default, here just for demo)
		PathMatcher: d.ActivePathFull(),
		// Match all query params (it's by default, here just for demo)
		QueryMatcher: d.ActiveQueryAll(),
		// Indicate activity with attribute
		Indicate: []d.Indicate{
			d.IndicateAttr("aria-current", "page"),
		},
	}}}
    // prepare model to form href attr
	{{ model := common.MainPath { Main: true } }}
	// construct link with model and active link setup
	<a { d.A(ctx, d.AHref { Active: active, Model: model })... }>
		Main 
	</a>
	// prepare model for another path variant
	{{ model = common.MainPath { Show: true, Id: 9, Filter: "color" } }}
	<a { d.A(ctx, d.AHref { Active: active, Model: model } )... }>
		Show #9
	</a>
}

templ home() {
	Just home page
}

templ show(id int, filter string) {
	id: { fmt.Sprint(id) }, filter: { filter }
}

 // form data for parsing
type FormData struct {
	Name  string `form:"name"`
	Email string `form:"email"`
}

templ Demo() {
    // dynamic element
	{{ var node doors.Node }}
    // render dynamic element with initial content
    @node {
        Submit Form
    }
	// form with submit handler (you can also use doors.ARawSubmit if you want to do form parsing/reading yourself)
	<form { doors.A(ctx, doors.ASubmit[FormData]{
       // block form submission until previous one is processed
       Mode: doors.ModeBlock(),
       // indicate pending form (will be active untill all changes triggered by the hook are applied)
       Indicator: []doors.Indicate{
           // set attribute to #form-submit
           doors.IndicateAttr("#form-submit", "aria-busy", "true"),
           // change content of #form-submit
           doors.IndicateContent("#form-submit", "Simulating delay...",),
       },
       // handle form result
       On: func(ctx context.Context, r doors.RForm[FormData]) bool {
            // wait some time for demo purposes
            <-time.NewTimer(time.Second).C
            // show submitted data
            node.Update(ctx, showData(r.Data()))
            /*
                You can also r.SetCookie(name, value) and r.GetCookie(name) in all hooks
            */
            // not done, keep hook active
            return false
       },
    }) ... }
	>
        <input
            name="name"
            placeholder="Name"
            required=true
        />
        <input
            type="email"
            name="email"
            placeholder="Email"
            required=true
        />
		<button	id="form-submit" role="submit">Submit</button>
	</form>
}

// display form values
templ showData(d FormData) {
	name: { doors.Name }, email: { doors.Email }
}

/*
    in this demo we will pass data to frontend, 
    then use that data in JS to trigger Go hook 
    in which js code will be called to show alert... 
*/
templ Demo() {
    // generate id
	{{ id := uuid.New().String() }}
    // use generated id 
	<button id={ id }></button>
    // first we save attributes to a variable for readablity
	{{ attrs := doors.A(ctx,
        // pass data to frontend
        doors.AData{
            Value: id,
            Name:  "id",
        },
        // attach hook with int input and int output
        doors.AHook[int, int]{
           // block until previous one is processed
            Mode: doors.ModeBlock(),
            // hook name
            Name: "callback",
            // hook handler
            On: func(ctx context.Context, r doors.RHook[int]) (int, bool) {
                // make "alert" call to the frontend (check call handler in script below)
                doors.Call(ctx, doors.CallConf{
                    Name: "alert",
                    Arg:  fmt.Sprint("Go will multiply: ", r.Data()),
                    /* you can also process js call return value and respond to it */
                })
                // hook response
                return r.Data() * 2, false
            },
        },
    ) }}
    // 
    // convert inline script to script with src  
    // access atributes with $d, don't worry about global scope, and use async
    @doors.Script {
        // use our saved attributes on a js webpage script
        <script { attrs... } />
            // read data "id" from using special $d object (scoped to current script for attrubute reading)
            const id = $d.data("id")
            // use id to get button element
            const button = document.getElementById(id);
            let total = 1;
            button.innerHTML = `multiply ${total} by 2 in Go`
            // attach call with name "alert" (to closest dynamic parent element or root), 
            $d.on("alert", (message) => {
                // just alert whatever go gives
                alert(message)
                /* you can also provide return value here */
            })  /* <- you can also handle Go response to call result (🤯) in third argument*/
            // add plain event listener to our button
            button.addEventListener('click', async () => {
                try {
                   // trigger hook  with the name "callback" and total value as argument
                   total = await $d.hook("callback", total)
                   // update button content with the response
                   button.innerHTML = `multiply ${total} by 2 in Go`
                }catch(e) {
                    // check if hook blocked (we set block mode, so it's ok)
                    if(e.isBlocked()) {
                        console.log("Call blocked")
                        return
                    }
                    throw e
                }
            })
        </script>
    }
}

• not backed by big company or VC funding
• not relying on spare-time maintanance
• here to give you the best tool