> For the complete documentation index, see [llms.txt](https://docs.dbnetsoft.com/dbnetsoft/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dbnetsoft.com/dbnetsoft/screenspro/controls/webbrowserelement.md).

# WebbrowserElement

This element displays a web page inside the layout. It uses the Microsoft Edge WebView2 runtime, which has to be installed on the machine.

## Properties

| Name                     | Type    | Description                                                                                                               |
| ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------- |
| `Url`                    | String  | The address to open. Setting it navigates to the new page.                                                                |
| `RenderMode`             | Enum    | `Composited` or `Native`, see below. Default `Native`.                                                                    |
| `TransparentBackground`  | Boolean | Keeps the alpha channel of the page instead of painting `DefaultBackgroundColor` behind it. Default `true`.               |
| `ForceTransparentCss`    | Boolean | Injects CSS that forces `html` and `body` transparent, for pages you cannot edit yourself. Default `false`.               |
| `DefaultBackgroundColor` | Color   | Colour painted behind the page while `TransparentBackground` is off. Default transparent.                                 |
| `Framerate`              | int     | Upper limit of captured frames per second in `Composited` mode. `0` captures every frame the page produces. Default `50`. |
| `RenderWidth`            | int     | Pixel width the page is rendered at, independent of the monitor. `0` uses the width of the element. Default `0`.          |
| `RenderHeight`           | int     | Pixel height the page is rendered at. `0` uses the height of the element. Default `0`.                                    |

## Render modes

| Value        | Description                                                                                                                                                                                                                                                                                                                     |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Composited` | The page is rendered off screen and its frames are drawn into the layout as an image. This keeps the transparency of the HTML, lets other elements be drawn on top of the browser, and makes it visible on NDI and Decklink outputs and on render windows with a transparent background. It accepts no mouse or keyboard input. |
| `Native`     | The page is hosted in the native WebView2 window. This is the fastest mode and the page stays interactive, but the window always sits on top of all other elements, it is not captured by NDI or Decklink, and it stays invisible on windows with a transparent background.                                                     |

`Framerate`, `RenderWidth` and `RenderHeight` only apply to `Composited`.

## Methods and events

| Member                           | Description                                             |
| -------------------------------- | ------------------------------------------------------- |
| `ExecuteScriptAsync(javaScript)` | Runs JavaScript in the page and waits for it to finish. |
| `Reload()`                       | Reloads the current page.                               |
| `NavigationStarting`             | Raised before the browser navigates.                    |
| `NavigationCompleted`            | Raised once a page has loaded, successfully or not.     |
| `CoreWebView2`                   | The underlying browser, once it has been created.       |

Navigation, the version of the runtime and every navigation error are written to the log.

## Example

```xml
<controls:WebbrowserElement Url="https://example.com/overlay.html"
                            RenderMode="Composited"
                            TransparentBackground="True"
                            ForceTransparentCss="True"
                            RenderWidth="1920" RenderHeight="1080" />
```