Svelte SDK

@cstar.help/svelte provides Svelte 5 rune classes for reactive data fetching. Uses $state and $derived for automatic reactivity — no stores, no boilerplate.

Installation

npm install @cstar.help/svelte

This automatically installs @cstar.help/js (the core client) as a dependency. Requires Svelte 5+ and SvelteKit 2+.

Setup

Initialize the client in your root layout.

+layout.svelte

<script>
			  import { setCStarClient } from '@cstar.help/svelte';
			
			  setCStarClient({
			    apiKey: import.meta.env.VITE_CSTAR_KEY
			  });
			
			  let { children } = $props();
			</script>
			
			{@render children()}

Rune Classes

Tickets

<script>
			  import { Tickets } from '@cstar.help/svelte';
			
			  // Creates a reactive query — data updates automatically
			  const tickets = new Tickets({
			    status: 'open',
			    priority: 'high'
			  });
			</script>
			
			{#if tickets.loading}
			  <p>Loading...</p>
			{:else if tickets.error}
			  <p>Error: {tickets.error.message}</p>
			{:else}
			  <p>{tickets.pagination.total} tickets found</p>
			
			  {#each tickets.data as ticket (ticket.id)}
			    <div>
			      <h3>{ticket.title}</h3>
			      <span>{ticket.priority}</span>
			    </div>
			  {/each}
			{/if}
			
			<button onclick={() => tickets.refetch()}>Refresh</button>

Ticket (single)

<script>
			  import { Ticket } from '@cstar.help/svelte';
			
			  let { ticketId } = $props();
			  const ticket = new Ticket(ticketId);
			</script>
			
			{#if ticket.data}
			  <h2>{ticket.data.title}</h2>
			  <p>Status: {ticket.data.status}</p>
			
			  {#each ticket.data.messages ?? [] as msg (msg.id)}
			    <div class="message">
			      <strong>{msg.sender_name}</strong>
			      <p>{msg.content}</p>
			    </div>
			  {/each}
			{/if}

Customers

<script>
			  import { Customers } from '@cstar.help/svelte';
			
			  const customers = new Customers({
			    status: 'active',
			    search: 'enterprise'
			  });
			</script>
			
			{#each customers.data as customer (customer.id)}
			  <div>{customer.name} — {customer.email}</div>
			{/each}

Articles

<script>
			  import { Articles } from '@cstar.help/svelte';
			
			  const articles = new Articles({
			    status: 'published',
			    isPublic: true
			  });
			</script>
			
			{#each articles.data as article (article.id)}
			  <a href="/kb/{article.id}">{article.title}</a>
			{/each}

Mutations

Use the client directly for write operations.

<script>
			  import { getCStarClient } from '@cstar.help/svelte';
			
			  const cstar = getCStarClient();
			  let title = $state('');
			  let creating = $state(false);
			
			  async function createTicket() {
			    creating = true;
			    try {
			      const ticket = await cstar.tickets.create({
			        title,
			        priority: 'normal'
			      });
			      title = '';
			    } finally {
			      creating = false;
			    }
			  }
			</script>
			
			<form onsubmit={createTicket}>
			  <input bind:value={title} placeholder="Ticket title" />
			  <button disabled={creating}>
			    {creating ? 'Creating...' : 'Create'}
			  </button>
			</form>

Real-Time Subscriptions

<script>
			  import { subscribe } from '@cstar.help/svelte';
			  import { onDestroy } from 'svelte';
			
			  const sub = subscribe('ticket.*', (event) => {
			    console.log('Event:', event.type, event.data);
			  });
			
			  onDestroy(() => sub.unsubscribe());
			</script>

SvelteKit SSR

Load data server-side in +page.server.js and pass to rune classes.

+page.server.js

import { CStarClient } from '@cstar.help/js';
			
			export async function load() {
			  const cstar = new CStarClient({
			    apiKey: import.meta.env.CSTAR_SECRET_KEY
			  });
			
			  const { data } = await cstar.tickets.list({ status: 'open' });
			
			  return { tickets: data };
			}