Flick

A simple, flexible, and reactive feature flag management system for Svelte apps. Flick helps you toggle features dynamically during development or in production, enabling controlled rollouts, A/B testing, and experimental UI activation with minimal setup.

Features

• Reactive Svelte store for feature flags
• Easy toggle UI component
• Conditional rendering with FeatureFlag wrapper component
• Lightweight and 0 dependencies
• Supports dynamic updates without page reloads

Installation

Install via npm:

npm install svelte-flick

Usage

1. Set up the feature flag store

Within your main component or layout, initialize the feature flags using the initFeatureFlags function. This sets up the initial state of your flags.

<script lang="ts">
import { initFeatureFlags } from 'svelte-flick';

initFeatureFlags({
    'feature-a': true,
    'feature-b': false,
    'experimental-ui': false,
    'beta-content': true
});
</script>

<slot />

2. Add the toggle popup UI

Use the provided FlagPopup.svelte component to toggle flags interactively:

<script>
  import FlagPopup from 'svelte-flick';
</script>

<FlagPopup />

3. Conditionally render features

Wrap feature-specific UI inside the FeatureFlag component:

<script>
  import FeatureFlag from 'svelte-flick';
</script>

<FeatureFlag on="feature-a">
  <p>Feature A is enabled</p>
</FeatureFlag>

Or use the store directly:

{#if $featureFlags['feature-b']}
  <p>Feature B is enabled</p>
{:else}
  <p>Feature B is disabled</p>
{/if}

Example

-- src/routes/+layout.svelte --

<script lang="ts">
    import { initFeatureFlags } from 'svelte-flick';

    initFeatureFlags({
        'feature-a': true,
        'feature-b': false,
        'experimental-ui': false,
        'beta-content': true
    });
</script>

<slot />

-- src/routes/+page.svelte --

<script>
    import FlagPopup from 'svelte-flick';
    import FeatureFlag from 'svelte-flick';
    import { featureFlags } from 'svelte-flick';
</script>

<FlagPopup />

<main>
  <FeatureFlag on="feature-a">
    <h2>Feature A Content</h2>
  </FeatureFlag>

  {#if $featureFlags['feature-b']}
    <p>Feature B Enabled</p>
  {:else}
    <p>Feature B Disabled</p>
  {/if}
</main>

Advanced Usage

You could create your own custom toggle UI or integrate Flick with your backend to fetch feature flags dynamically. The store is reactive, so any changes to the flags will automatically update the UI without needing a page reload.

The featureFlags store can be used directly in any Svelte component to check the status of flags or to toggle them programmatically.

This is a snippet from FlagPopup.svelte which demonstrates how to use the store

import { featureFlags } from 'svelte-flick';
import { onMount } from 'svelte';

let flags = {};

const toggleFlag = (key: string) => {
    featureFlags.toggle(key);
};

const unsubscribe = featureFlags.subscribe(v => {
    flags = v;
});

onMount(() => {
    return () => unsubscribe();
});