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

# Svelte 5

> Embed StackOne Hub in a Svelte 5 app using the <stackone-hub> custom element

Use the `<stackone-hub>` custom element from `@stackone/hub` directly in Svelte markup. Svelte treats unknown tags as custom elements automatically — no extra config required.

<Steps>
  <Step title="Install the package">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @stackone/hub
      ```

      ```bash yarn theme={null}
      yarn add @stackone/hub
      ```

      ```bash pnpm theme={null}
      pnpm add @stackone/hub
      ```
    </CodeGroup>
  </Step>

  <Step title="Register the element at app entry">
    The import is side-effecting — it registers `<stackone-hub>` on `customElements`.

    ```ts theme={null}
    // src/main.ts
    import '@stackone/hub/webcomponent';
    import { mount } from 'svelte';
    import App from './App.svelte';

    const target = document.getElementById('app');
    if (!target) {
      throw new Error('#app element not found');
    }
    mount(App, { target });
    ```
  </Step>

  <Step title="Get a session token from your backend">
    <Snippet file="guides/web-component-token-step.mdx" />
  </Step>

  <Step title="Add the element and listen for events">
    ```svelte theme={null}
    <script lang="ts">
        let token = $state('');
        let hubEl: HTMLElement | undefined = $state();

        $effect(() => {
            retrieveConnectSessionToken().then((t) => {
                token = t;
            });
        });

        $effect(() => {
            if (!hubEl) return;
            const onSuccess = (event: Event) => {
                const detail = (event as CustomEvent).detail;
                console.log('Connected:', detail.id, detail.provider);
            };
            const onClose = () => console.log('Closed');
            hubEl.addEventListener('success', onSuccess);
            hubEl.addEventListener('close', onClose);
            return () => {
                hubEl?.removeEventListener('success', onSuccess);
                hubEl?.removeEventListener('close', onClose);
            };
        });
    </script>

    <stackone-hub
        bind:this={hubEl}
        {token}
        mode="integration-picker"
        height="600px"
    ></stackone-hub>
    ```
  </Step>
</Steps>

## Attribute reference

Svelte passes attribute bindings through directly. All scalar `StackOneHub` props map to kebab-case HTML attributes — see the [vanilla guide](/guides/web-component-vanilla#attribute-reference) for the full table.

## Events

Native DOM `CustomEvent`s on the element:

| Event     | `event.detail`                     |
| --------- | ---------------------------------- |
| `success` | `{ id: string; provider: string }` |
| `close`   | `undefined`                        |

Svelte's `on:event` shorthand **does** fire on native DOM `CustomEvent`s, so `<stackone-hub on:success={...} on:close={...}>` works. We use `addEventListener` via `bind:this` here to keep the typing explicit.

## Next steps

<CardGroup cols={2}>
  <Card title="Backend setup" icon="server" href="/platform/connect-your-backend-with-stackone">
    Generate session tokens from your backend.
  </Card>

  <Card title="Filter connectors" icon="filter" href="/guides/embedding-stackone-hub#hub-behavior-customization">
    Restrict the Hub to a single provider or category.
  </Card>
</CardGroup>