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 for CSS variable overrides. |
Dynamic Updates
All attributes are reactive. Changing them after mount updates the widget:
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");
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
<vulcx-swap api-key="vulcx_your_api_key"></vulcx-swap>
Pre-selected tokens (FOGO to USDC)
<vulcx-swap
api-key="vulcx_your_api_key"
default-input-mint="So11111111111111111111111111111111111111112"
default-output-mint="uSd2czE61Evaf76RNbq4KPpXnkiL3irdzgLFUMe3NoG"
></vulcx-swap>
Self-hosted with custom RPC
<vulcx-swap
api-key="any-value"
base-url="http://localhost:8080"
rpc-url="https://mainnet.fogo.io"
theme="light"
></vulcx-swap>
Last modified on July 5, 2026