> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# WebView

> Documentation for WebView

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const webviewPreviewJson = {
  "type": "webView",
  "url": "https://github.com/StacDev/stac"
};
export const webviewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac WebView allows you to display WebView widget using JSON in your app. It is based on the [webview\_flutter](https://pub.dev/packages/webview_flutter) plugin.

## Usage

1. Add `stac_webview` as a dependency in your pubspec.yaml file.

Install the plugin by running the following command from the project root:

```bash theme={null}
flutter pub add stac_webview
```

or add it manually in your `pubspec.yaml` file:

```yaml theme={null}
  dependencies:
    stac_webview:
```

2. Add `StacWebViewParser` in Stac initialize.

```dart theme={null}
void main() async {
  await Stac.initialize(
    parsers: const [
      StacWebViewParser(),
    ],
  );

  runApp(const MyApp());
}
```

## Properties

| Property          | Type             | Description                                                                             |
| ----------------- | ---------------- | --------------------------------------------------------------------------------------- |
| `url`             | `String`         | The URL to load in the `WebView`.                                                       |
| `javaScriptMode`  | `JavaScriptMode` | Sets whether JavaScript execution is enabled. Default is `JavaScriptMode.unrestricted`. |
| `backgroundColor` | `String`         | Background color of the `WebView`. Default is `#FFFFFF`.                                |
| `userAgent`       | `String?`        | The user agent for the `WebView`.                                                       |
| `enableZoom`      | `bool`           | Sets whether zoom is enabled for the `WebView`. Default is `false`.                     |
| `layoutDirection` | `TextDirection`  | The layout direction for the `WebView`. Default is `TextDirection.ltr`.                 |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacWebView(
      url: 'https://github.com/StacDev/stac',
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "webView",
      "url": "https://github.com/StacDev/stac"
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={webviewPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: webviewPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>