webview

Embeds a native OS webview (WebView2 on Windows, WKWebView on macOS, WebKitGTK on Linux) as a real child window, position-tracked to the <WebView> component's layout rect. Use it for content that genuinely needs a browser engine — an OAuth login page, a third-party embed, an in-app browser panel — not as a general rendering path. Everything else in your app keeps using Glyx's own GPU/CPU renderer; the embedded webview is composited by the OS independently of it.

Requires the webview capability:

glyx.config.json

{ "capabilities": { "webview": true } }

Quick start

import { WebView } from '@glyx-dev/react'
import { useRef } from 'react'
 
function BrowserPanel() {
  const ref = useRef(null)
 
  return (
    <WebView
      ref={ref}
      src="https://example.com"
      style={{ flex: 1 }}
      onMessage={(msg) => console.log('from page:', msg)}
    />
  )
}

`<WebView>` props

Prop	Type	Description
`src`	`string`	URL to load. Mutually exclusive with `html` (`html` wins if both are set).
`html`	`string`	Raw HTML to load in place of navigating to a URL — useful for self-contained pages with no network dependency.
`sandbox`	`boolean`	Default `true`. Disables devtools on the embedded webview.
`allowedOrigins`	`string[]`	Navigation allowlist. Defaults to the initial `src`'s own origin if unset — a plain `<WebView src="https://x.com"/>` can't be redirected off-site by the loaded page unless you opt in with an explicit list.
`assetsRoot`	`string`	Enables a `glyx-asset://<path>` scheme scoped to this directory, for loading local files. Not raw `file://` — paths are traversal-guarded.
`onMessage`	`(msg: string) => void`	Called when the page sends a message via `window.ipc.postMessage(str)`.
`style`	`ViewStyle`	Layout/style — size the webview like any `View`.
`ref`	`Ref`	Exposes `{ nodeId, postMessage(msg) }`.

Two-way postMessage bridge

JS → page: call ref.current.postMessage(message). The page receives it as a standard DOM event:

// inside the loaded page
window.addEventListener('message', (e) => {
  console.log('from JS:', e.data)
})

Page → JS: the page calls window.ipc.postMessage(str) (injected automatically into every loaded page — no setup needed on the page side). Glyx delivers it to the onMessage prop:

<WebView src="..." onMessage={(msg) => console.log('from page:', msg)} />

// inside the loaded page
window.ipc.postMessage('hello from the page')

Local assets

Rather than exposing raw file:// access (which most webview engines restrict or disallow by default for security), pass assetsRoot and reference files through the glyx-asset:// scheme:

<WebView src="glyx-asset://index.html" assetsRoot="C:/app/assets" />

Path traversal (..) is rejected — only files under assetsRoot are servable.

⚠️

sandbox defaults to true (devtools off). If you set allowedOrigins, navigation to any URL whose origin isn't in the list is blocked — the glyx-asset:// scheme is always implicitly allowed.

webview

Quick start

<WebView> props

Two-way postMessage bridge

Local assets

See also

`<WebView>` props