# Quickstart — Svelte / SvelteKit

Integrate `@ios-web-bluetooth/core` with a Svelte 4/5 component.

## Prerequisites

- The WebBLE Safari Web Extension enabled on your origin. See the [base quickstart](quickstart.md).
- Svelte 4+ or SvelteKit. Works with Vite-based tooling.

## 1. Install

```bash
npm install @ios-web-bluetooth/core
```

## 2. Mount the polyfill

For a plain Svelte app, import once at the entry point:

```ts
// main.ts
import '@ios-web-bluetooth/core/auto';
import App from './App.svelte';

const app = new App({ target: document.getElementById('app')! });
export default app;
```

For **SvelteKit**, load it only in the browser — SSR must not touch `window`:

```ts
// src/routes/+layout.ts
export const ssr = false; // or per-page

// src/routes/+layout.svelte
<script lang="ts">
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';
  onMount(async () => {
    if (browser) await import('@ios-web-bluetooth/core/auto');
  });
</script>
```

## 3. Read a heart-rate monitor

```svelte
<!-- HeartRate.svelte -->
<script lang="ts">
  let bpm: number | null = null;
  let err: string | null = null;

  async function connect() {
    try {
      const device = await navigator.bluetooth.requestDevice({
        filters: [{ services: ['heart_rate'] }]
      });
      const server = await device.gatt!.connect();
      const service = await server.getPrimaryService('heart_rate');
      const char = await service.getCharacteristic('heart_rate_measurement');
      await char.startNotifications();
      char.addEventListener('characteristicvaluechanged', (ev) => {
        const v = (ev.target as BluetoothRemoteGATTCharacteristic).value!;
        bpm = v.getUint8(0) & 0x01 ? v.getUint16(1, true) : v.getUint8(1);
      });
    } catch (e) {
      err = (e as Error).message;
    }
  }
</script>

<button on:click={connect}>Connect</button>
{#if err}<p>Error: {err}</p>
{:else}<p>{bpm ?? '—'} bpm</p>
{/if}
```

## Next

- [API reference](api-reference.md)
- [Recipes](recipes.md)
- [Premium APIs](premium.md)