Skip to main content

Quickstart / Svelte

Svelte Quickstart

Build a cStar integration with Svelte in under 5 minutes. This guide covers installation, setup, listing tickets, creating tickets, and subscribing to real-time events.

1. Install

npm install @cstar.help/svelte

2. Set Up the Client

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

3. Fetch Data

List open tickets with built-in loading and error states.

+page.svelte 
<!-- src/routes/tickets/+page.svelte -->
			<script>
			  import { Tickets } from '@cstar.help/svelte';
			
			  const tickets = new Tickets({ status: 'open' });
			</script>
			
			<h2>Open Tickets ({tickets.data?.length ?? 0})</h2>
			
			{#if tickets.loading}
			  <p>Loading tickets...</p>
			{:else if tickets.error}
			  <p>Error: {tickets.error.message}</p>
			{:else}
			  {#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>

4. Create a Resource

Create a new ticket from your application.

CreateTicket.svelte 
<!-- src/lib/components/CreateTicket.svelte -->
			<script>
			  import { getCStarClient } from '@cstar.help/svelte';
			
			  const cstar = getCStarClient();
			  let title = $state('');
			
			  async function handleSubmit() {
			    const ticket = await cstar.tickets.create({
			      title,
			      priority: 'normal'
			    });
			    console.log('Created:', ticket.id);
			    title = '';
			  }
			</script>
			
			<form onsubmit={handleSubmit}>
			  <input bind:value={title} placeholder="Ticket title" />
			  <button type="submit">Create Ticket</button>
			</form>

5. Real-Time Events

Subscribe to webhook events for real-time updates.

<!-- Real-time events -->
			<script>
			  import { subscribe } from '@cstar.help/svelte';
			
			  subscribe('ticket.*', (event) => {
			    console.log('New event:', event.type);
			  });
			</script>

What's Next?