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

# Set Value

> Documentation for Set Value

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

export const setValuePreviewJson = {
  "type": "setValue",
  "values": [{
    "key": "userName",
    "value": "John Doe"
  }, {
    "key": "isLoggedIn",
    "value": true
  }],
  "child": {
    "type": "text",
    "data": "Welcome!"
  }
};
export const setValuePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac SetValue widget allows you to set multiple key-value pairs in the application's state and optionally render a child widget. It's useful for managing application state through JSON configuration.

## Properties

| Property | Type                         | Description                                               |
| -------- | ---------------------------- | --------------------------------------------------------- |
| values   | `List<Map<String, dynamic>>` | List of key-value pairs to set in the application state.  |
| child    | `StacWidget`                 | Optional child widget to render after the values are set. |

Each item in `values` should contain:

* `key`: The state key to set
* `value`: The value to assign

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacSetValue(
      values: [
        {'key': 'userName', 'value': 'John Doe'},
        {'key': 'isLoggedIn', 'value': true},
      ],
      child: StacText(data: 'Welcome!'),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "setValue",
      "values": [
        {
          "key": "userName",
          "value": "John Doe"
        },
        {
          "key": "isLoggedIn",
          "value": true
        }
      ],
      "child": {
        "type": "text",
        "data": "Welcome!"
      }
    }
    ```
  </Tab>

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

      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>

## Initializing State on Screen Load

Use `StacSetValue` to initialize state when a screen loads:

<CodeGroup>
  ```dart Dart theme={null}
  StacScaffold(
    body: StacSetValue(
      values: [
        {'key': 'currentPage', 'value': 'home'},
        {'key': 'selectedTab', 'value': 0},
        {'key': 'filters', 'value': {'category': 'all', 'sortBy': 'date'}},
      ],
      child: StacColumn(
        children: [
          StacText(data: 'Home Page'),
          // ... rest of the UI
        ],
      ),
    ),
  )
  ```

  ```json JSON theme={null}
  {
    "type": "scaffold",
    "body": {
      "type": "setValue",
      "values": [
        { "key": "currentPage", "value": "home" },
        { "key": "selectedTab", "value": 0 },
        { "key": "filters", "value": { "category": "all", "sortBy": "date" } }
      ],
      "child": {
        "type": "column",
        "children": [
          { "type": "text", "data": "Home Page" }
        ]
      }
    }
  }
  ```
</CodeGroup>

## Reading State Values

After setting values with `StacSetValue`, you can read them using placeholder syntax `{{key}}`:

<CodeGroup>
  ```dart Dart theme={null}
  StacSetValue(
    values: [
      {'key': 'greeting', 'value': 'Hello'},
      {'key': 'user.name', 'value': 'Alice'},
    ],
    child: StacText(data: '{{greeting}}, {{user.name}}!'),
  )
  ```

  ```json JSON theme={null}
  {
    "type": "setValue",
    "values": [
      { "key": "greeting", "value": "Hello" },
      { "key": "user.name", "value": "Alice" }
    ],
    "child": {
      "type": "text",
      "data": "{{greeting}}, {{user.name}}!"
    }
  }
  ```
</CodeGroup>

<Note>
  For action-based state updates (e.g., on button press), see [StacSetValueAction](/actions/set_value).
</Note>