The highest tagged major version is
README
¶
Render Package
Location: render/
The render package bootstraps the browser runtime and mounts elements into the DOM. It is built for js/wasm.
Primary Entry Points
To(element *runtime.Element, selector string)
Mounts an element into the first DOM node that matches a CSS selector.
render.To(dom.CreateElement(App, nil), "#app")
ToElement(element *runtime.Element, domElement js.Value)
Mounts an element into a specific DOM element you already looked up through syscall/js.
container := js.Global().Get("document").Call("getElementById", "app")
render.ToElement(dom.CreateElement(App, nil), container)
What It Does
- initializes the global runtime with the wasm DOM, event, scheduler, and browser-state adapters
- renders the initial element tree
- routes later state/atom/effect-driven updates through the runtime
The runtime itself lives in internal/runtime/. The render package is the browser-facing mount layer.
Related Packages
Documentation
¶
Overview ¶
Package render provides functions to render GoWebComponents to the DOM.
This package is the entry point for mounting your application to the browser DOM. It handles the initial render and sets up the reactive rendering system that automatically updates the DOM when component state changes.
Basic usage:
import (
"github.com/monstercameron/GoWebComponents/render"
"github.com/monstercameron/GoWebComponents/dom"
)
func main() {
app := dom.Div(nil,
dom.H1(nil, "Hello, GoWebComponents!"),
dom.P(nil, "Welcome to reactive WASM development"),
)
render.To(app, "#app")
}
The render package provides two main functions:
- To: Renders to a CSS selector (most common)
- ToElement: Renders to a specific DOM element (advanced)
After the initial render, the framework automatically manages subsequent renders when component state changes through hooks like hooks.UseState or state.UseAtom.
Example with a component:
func App(props dom.Attrs) *fiber.Element {
count, setCount := hooks.UseState(0)
return dom.Div(nil,
dom.H1(nil, fmt.Sprintf("Count: %d", count())),
dom.Button(map[string]interface{}{
"onclick": js.FuncOf(func(this js.Value, args []js.Value) interface{} {
setCount(count() + 1) // Automatically triggers re-render
return nil
}),
}, "Increment"),
)
}
func main() {
render.To(App(nil), "#app")
}
The render package integrates with the fiber reconciliation engine to provide efficient, incremental DOM updates. Only the parts of the DOM that actually changed are updated, making it performant even for complex UIs.
Source Files