`@mushi-mushi/svelte`

Svelte stores + context. Wraps @mushi-mushi/web — everything in the web SDK is available, with an idiomatic Svelte surface.


npm install @mushi-mushi/svelte

See Quickstart → Svelte for the full setup walkthrough.

API surface


import { setMushiContext, getMushi, mushiStore } from '@mushi-mushi/svelte'

Export	Purpose
`setMushiContext(config)`	Call in root layout `onMount` to boot the SDK and set the Svelte context
`getMushi()`	Retrieve the SDK instance from context inside any component
`mushiStore`	Svelte readable store — reactive access to session state and submission status

Setup (SvelteKit)


<!-- +layout.svelte -->
<script lang="ts">
  import { onMount } from 'svelte'
  import { setMushiContext } from '@mushi-mushi/svelte'
 
  onMount(() => {
    setMushiContext({
      projectId: 'YOUR_PROJECT_ID',
      apiKey: 'YOUR_PUBLIC_API_KEY',
    })
  })
</script>
 
<slot />

Identifying users


<script lang="ts">
  import { getMushi } from '@mushi-mushi/svelte'
  import { page } from '$app/stores'
 
  const mushi = getMushi()
 
  $: if ($page.data.user) {
    mushi?.identify($page.data.user.id, {
      email: $page.data.user.email,
      name: $page.data.user.name,
    })
  }
</script>

Submitting a report


<script lang="ts">
  import { getMushi } from '@mushi-mushi/svelte'
 
  const mushi = getMushi()
 
  async function report() {
    await mushi?.submit({ title: 'Something feels off', severity: 'p2' })
  }
</script>
 
<button on:click={report}>Report issue</button>