> ## 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.

# NetworkWidget

> Documentation for NetworkWidget

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

export const networkWidgetPreviewJson = {
  "type": "networkWidget",
  "request": {
    "url": "https://api.example.com/data",
    "method": "get",
    "headers": {
      "Authorization": "Bearer token"
    }
  }
};
export const networkWidgetPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac NetworkWidget allows you to build a widget that makes a network request and renders a widget based on the response using JSON.

## Properties

| Property | Type                 | Description                        |
| -------- | -------------------- | ---------------------------------- |
| request  | `StacNetworkRequest` | The network request configuration. |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacNetworkWidget(
      request: StacNetworkRequest(
        url: 'https://api.example.com/data',
        method: Method.get,
        headers: {'Authorization': 'Bearer token'},
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "networkWidget",
      "request": {
        "url": "https://api.example.com/data",
        "method": "get",
        "headers": {
          "Authorization": "Bearer token"
        }
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={networkWidgetPreviewSrc}
        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: networkWidgetPreviewJson
      };

      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>