Skip to main content
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.
1

Install the package

npm install @stackone/hub
2

Register the element at app entry

The import is side-effecting — it registers <stackone-hub> on customElements.
// 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 });
3

Get a session token from your backend

4

Add the element and listen for events

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

​
Attribute reference

Svelte passes attribute bindings through directly. All scalar StackOneHub props map to kebab-case HTML attributes — see the vanilla guide for the full table.

​
Events

Native DOM CustomEvents on the element:
Eventevent.detail
success{ id: string; provider: string }
closeundefined
Svelte’s on:event shorthand does fire on native DOM CustomEvents, so <stackone-hub on:success={...} on:close={...}> works. We use addEventListener via bind:this here to keep the typing explicit.

​
Next steps

Backend setup

Generate session tokens from your backend.

Filter connectors

Restrict the Hub to a single provider or category.