Skip to main content

​
Overview

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

​
Installation

npm install @timeback/sdk

​
Setup

Initialize Timeback in your root layout:
src/routes/+layout.svelte
<script>
  import { initTimeback } from '@timeback/sdk/svelte'

  initTimeback()

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

{@render children()}

​
Stores

​
timeback

Access the Timeback client: 
<script>
  import { timeback } from '@timeback/sdk/svelte'
</script>

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

​
timebackVerification

Check authentication status: 
<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: 
<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: 
<script>
  import { SignInButton } from '@timeback/sdk/svelte'
</script>

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

​
Props

​
size
'sm' | 'md' | 'lg'
default:"'md'"
Button size
​
variant
'default' | 'outline'
default:"'default'"
Button style variant
​
showLoading
boolean
default:"true"
Show loading spinner on click
Show Timeback logo
​
disabled
boolean
default:"false"
Disable the button

​
Custom Activities

The SDK supports two activity models that capture how students spend time in your app and whether they complete what they started, producing TimeSpentEvents and ActivityCompletedEvents 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.

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

​
Next Steps

SvelteKit Server

Server-side setup

Custom Activities

Learn more about tracking