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

# Widget attributes

> Every HTML attribute on vulcx-swap: api-key, base-url, default mints, theme, and dynamic updates.

All HTML attributes accepted by the `<vulcx-swap>` element.

***

## Reference

| Attribute             | Type                | Default                      | Required | Description                                                                                                               |
| --------------------- | ------------------- | ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
| `api-key`             | `string`            | --                           | yes      | Your Vulcx API key. Used to authenticate SDK requests.                                                                    |
| `base-url`            | `string`            | `"https://api.vulcx.xyz"`    | no       | API base URL override. Use for self-hosted instances.                                                                     |
| `rpc-url`             | `string`            | `"https://mainnet.fogo.io/"` | no       | Fogo JSON-RPC endpoint for balance queries. The widget calls `getBalance` and `getTokenAccountsByOwner` against this URL. |
| `default-input-mint`  | `string`            | --                           | no       | Pre-selected input token mint address.                                                                                    |
| `default-output-mint` | `string`            | --                           | no       | Pre-selected output token mint address.                                                                                   |
| `theme`               | `"dark" \| "light"` | `"dark"`                     | no       | Color theme. See [Theming](./theming.md) for CSS variable overrides.                                                      |

***

## Dynamic Updates

All attributes are reactive. Changing them after mount updates the widget:

```javascript theme={"theme":"github-dark"}
const widget = document.querySelector("vulcx-swap");

// Point to a different API
widget.setAttribute("base-url", "http://localhost:8080");

// Change RPC endpoint
widget.setAttribute("rpc-url", "https://mainnet.fogo.io");

// Switch theme
widget.setAttribute("theme", "light");
```

When `api-key` or `base-url` change, the widget re-creates the internal SDK client. When `rpc-url` changes, subsequent balance queries use the new endpoint.

***

## Examples

### Minimal

```html theme={"theme":"github-dark"}
<vulcx-swap api-key="vulcx_your_api_key"></vulcx-swap>
```

### Pre-selected tokens (FOGO to USDC)

```html theme={"theme":"github-dark"}
<vulcx-swap
  api-key="vulcx_your_api_key"
  default-input-mint="So11111111111111111111111111111111111111112"
  default-output-mint="uSd2czE61Evaf76RNbq4KPpXnkiL3irdzgLFUMe3NoG"
></vulcx-swap>
```

### Self-hosted with custom RPC

```html theme={"theme":"github-dark"}
<vulcx-swap
  api-key="any-value"
  base-url="http://localhost:8080"
  rpc-url="https://mainnet.fogo.io"
  theme="light"
></vulcx-swap>
```


## Related topics

- [Widget quickstart](/widget/quickstart.md)
- [Widget wallet integration](/widget/wallet-integration.md)
- [Widget theming](/widget/theming.md)
- [Widget examples](/widget/examples.md)
- [Widget events](/widget/events.md)