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

# Svelte

> Client-side Svelte integration with Timeback

## Overview

The Timeback SDK provides Svelte stores, components, and initialization for client-side integration.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @timeback/sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @timeback/sdk
  ```

  ```bash yarn theme={null}
  yarn add @timeback/sdk
  ```

  ```bash bun theme={null}
  bun add @timeback/sdk
  ```
</CodeGroup>

## Setup

Initialize Timeback in your root layout:

```svelte src/routes/+layout.svelte theme={null}
<script>
  import { initTimeback } from '@timeback/sdk/svelte'

  initTimeback()

  let { children } = $props()
</script>

{@render children()}
```

## Stores

### `timeback`

Access the Timeback client:

```svelte theme={null}
<script>
  import { timeback } from '@timeback/sdk/svelte'
</script>

{#if !$timeback}
  <div>Please sign in</div>
{:else}
  <div>Welcome!</div>
{/if}
```

### `timebackVerification`

Check authentication status:

```svelte theme={null}
<script>
  import { timebackVerification, refreshTimebackVerification } from '@timeback/sdk/svelte'
</script>

{#if $timebackVerification.status === 'loading'}
  <div>Loading...</div>
{:else if $timebackVerification.status !== 'verified'}
  <div>Please sign in</div>
{:else}
  <slot />
{/if}

<button onclick={refreshTimebackVerification}>Refresh</button>
```

The store value has a `status` property that can be:

* `'loading'` - Verification in progress
* `'verified'` - User is verified (includes `timebackId`)
* `'unverified'` - User is not verified
* `'error'` - Verification failed (includes `message`)

### `timebackProfile`

Fetch user profile data:

```svelte theme={null}
<script>
  import {
    timebackProfile,
    timebackProfileCanFetch,
    fetchTimebackProfile
  } from '@timeback/sdk/svelte'
</script>

{#if $timebackProfile.status === 'loaded'}
  <p>Welcome, {$timebackProfile.profile.name}</p>
  <p>XP Today: {$timebackProfile.profile.xp.today}</p>
  <p>Total XP: {$timebackProfile.profile.xp.all}</p>
{:else}
  <button onclick={fetchTimebackProfile} disabled={!$timebackProfileCanFetch}>
    {$timebackProfile.status === 'loading' ? 'Loading...' : 'Load Profile'}
  </button>
{/if}
```

## Components

### `SignInButton`

Pre-built sign-in button:

```svelte theme={null}
<script>
  import { SignInButton } from '@timeback/sdk/svelte'
</script>

<div>
  <h1>Welcome</h1>
  <SignInButton size="lg">Sign in with Timeback</SignInButton>
</div>
```

#### Props

<ParamField body="size" type="'sm' | 'md' | 'lg'" default="'md'">
  Button size
</ParamField>

<ParamField body="variant" type="'default' | 'outline'" default="'default'">
  Button style variant
</ParamField>

<ParamField body="showLoading" type="boolean" default="true">
  Show loading spinner on click
</ParamField>

<ParamField body="showLogo" type="boolean" default="true">
  Show Timeback logo
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Disable the button
</ParamField>

## Custom Activities

The SDK supports two [activity models](/beta/about-timeback/concepts/activity-models) that capture how students spend time in your app and whether they complete what they started, producing [TimeSpentEvents](/beta/build-on-timeback/reference/events#timespentevent) and [ActivityCompletedEvents](/beta/build-on-timeback/reference/events#activitycompletedevent) that feed into dashboards, XP, and learning analytics.

### Single-session

A quiz, flashcard deck, or short lesson that a student completes in one sitting. The client tracks time and reports completion. Learn more about [single-session activities](/beta/build-on-timeback/sdk/activity-tracking/single-session).

### Stateful

A multi-part course or long-form project where students leave and come back across multiple sessions. The client tracks time per visit while the server records completion. Learn more about [stateful activities](/beta/build-on-timeback/sdk/activity-tracking/stateful).

## Next Steps

<CardGroup cols={2}>
  <Card title="SvelteKit Server" href="/beta/build-on-timeback/sdk/server/sveltekit">
    Server-side setup
  </Card>

  <Card title="Custom Activities" href="/beta/build-on-timeback/sdk/activity-tracking/intro">
    Learn more about tracking
  </Card>
</CardGroup>