@guidelytech/svelte

Svelte 4/5 stores, actions and context helpers for Guidely (wraps @guidelytech/sdk-core).

pnpm add @guidelytech/svelte

<script>
  import { onMount } from "svelte";
  import { createGuidely, guidely, activeGuide, guideTrigger } from "@guidelytech/svelte";
  onMount(() => {
    const client = createGuidely({ projectId: "pk_dev_…", apiUrl: "http://localhost:3000" });
    return () => client.destroy();
  });
</script>

<button use:guideTrigger={"new-user-onboarding"}>Restart tour</button>
{#if $activeGuide}<p>Showing {$activeGuide.name}</p>{/if}

| Export | Description | |---|---| | createGuidely(options) | Creates the client (browser only; throws a helpful error on the server) and stores it in guidely. Returns the existing client when called twice with the same key. | | destroyGuidely() | Destroys the client and clears the store. | | syncGuidelyUser(user \| null \| undefined) | Idempotently mirrors your signed-in user: identifies when id/traits/account change, reset()s on null (sign-out), ignores undefined (still loading). Call from a $effect / $:; no-op on the server. | | guidely | Writable<GuidelyClient \| null>. | | guidelyReady | Readable<boolean>. | | activeGuide | Readable<PublishedGuide \| null>. | | checklistProgress(idOrKey) | Readable<ChecklistProgressState>. | | guideCompleted(idOrKey) | Readable<boolean>. | | setGuidelyContext(client) / getGuidelyContext() | Component context helpers (fall back to the store). | | use:guideTrigger={"guide-key"} | Clicking the element starts the guide. | | use:guidelyTarget={"id"} | Marks the element with data-tour="id" (no runtime behaviour). | | flag(key, fallback = false, source?) | Readable<boolean>: is the boolean flag on? | | featureValue(key, fallback, source?) | Readable of a flag's value (string, number, JSON); fallback when missing or of another type. | | flagDetails(key, fallback, source?) | Readable of the value plus reason, ruleId, variationId, experiment. | | allFlags(source?) / flagsReady(source?) | Every flag's value / whether flags have loaded. | | createFlags(options) | A flags-only client (no guides or analytics); pass it as source or to setFlagsContext. | | setFlagsContext(source) | Flags for this component tree: a Guidely client, a flags client, createStaticFlags(…) or a store of one. |

Feature flags

<script lang="ts">
  import { flag, featureValue } from "@guidelytech/svelte";
  const newBanner = flag("new-dashboard-banner");
  const color = featureValue("checkout-button-color", "blue");
</script>

{#if $newBanner}<NewBanner />{/if}
<button class={$color === "green" ? "bg-emerald-600" : "bg-blue-600"}>Checkout</button>

The stores read, in order: the source argument, the component context (setFlagsContext, or initGuidely in SvelteKit), then the global guidely client's flags — the same public key, with identity, page and device attributes maintained for you. They notify only when a value changes and give the fallback until flags load. Call them during component initialisation (or pass a source) and subscribe with $. Works with Svelte 4 and 5.