hs.ui.webview

A web browser element for embedding in hs.ui.window layouts

Available on macOS 26.0 or later, hs.ui.webview() creates a web browser element backed by a SwiftUI WebView and WebPage. Embed it in any hs.ui.window using .webview(element) — it fills the available space and can sit alongside other elements in stacks.

Create the element first, configure it, then embed it into a window:

const wv = hs.ui.webview()
    .toolbar(["back", "forward", "reload", "url"])
    .loadURL("https://apple.com")

hs.ui.window({x: 100, y: 100, w: 1024, h: 768})
    .titled(true)
    .closable(true)
    .allowResize(true)
    .level("normal")
    .webview(wv)
    .show()

Because wv is a regular JavaScript object you can keep a reference and call navigation methods on it at any time after the window is shown:

wv.loadURL("https://google.com")
wv.goBack()

Custom Toolbar Example

const wv = hs.ui.webview()
    .toolbar([
        "back", "forward", "reload", "url",
        {title: "Home", systemImage: "house", callback: () => wv.loadURL("https://apple.com")},
        {title: "Reload HS", callback: () => hs.reload()}
    ])
    .loadURL("https://apple.com")

hs.ui.window({x: 100, y: 100, w: 1024, h: 768})
    .webview(wv)
    .show()

Full Example with Callbacks

const wv = hs.ui.webview()
    .toolbar(["back", "forward", "reload", "url"])
    .inspectable(true)
    .onNavigate((url) => console.log("Navigated to: " + url))
    .onTitleChange((title) => console.log("Title: " + title))
    .onLoadChange((loading, url, title, progress) => {
        if (!loading) console.log("Page ready: " + url)
    })
    .loadURL("https://apple.com")

hs.ui.window({x: 100, y: 100, w: 1024, h: 768})
    .webview(wv)
    .show()

Navigation Policy Example

const wv = hs.ui.webview()
    .toolbar(["back", "forward", "reload", "url"])
    .onNavigationDecision((url) => {
        return !url.includes("evil.com")
    })
    .loadURL("https://apple.com")

hs.ui.window({x: 100, y: 100, w: 1024, h: 768})
    .webview(wv)
    .show()

JavaScript Evaluation Example

const wv = hs.ui.webview().loadURL("https://apple.com")
hs.ui.window({x: 100, y: 100, w: 1024, h: 768}).webview(wv).show()

// Fire and forget
wv.execJS("document.body.style.backgroundColor = 'lightyellow'")

// With result (note the JS method name is evalJSResult)
wv.evalJSResult("document.title", (result, error) => {
    if (error) { console.log("Error: " + error) }
    else { console.log("Title: " + result) }
})