How to Implement Feature Flags in SvelteKit

Hello and welcome to another tutorial. This is about adding feature flags to an app made with SvelteKit, Unleash and the official Unleash Svelte SDK.

We’ll make a paired-down habits app to keep track of your new year’s resolutions. The feature flag will be used to change the number of habits a user can add.

While this is not meant to be a complete product, we can leverage feature flags using a full stack framework like Next.js or SvelteKit. The completed code for this implementation is available in a Github repository.

1. Setup

Create a skeleton SvelteKit project named “habits”.

1 npm create svelte@latest habits

We’ll need a few more dependencies. You can install these in one command below:

1 npm i date-fns @unleash/proxy-client-svelte

2. Create a basic habits app

We’ll use Svelte stores to keep track of a global array of habits. For the sake of simplicity, we won’t store these habits anywhere yet (feel free to add localStorage or a database). Our basic habit app will only consist of 3 files.

First, a global store that will contain our habits and their completion dates. Just JavaScript, no Svelte yet.

1 // src/lib/stores.js
2 
3 export const habitStore = writable([
4     {
5         id: 1,
6         name: "Walk 10k steps",
7         completedDays: [],
8     },
9 ]);

Then, we’ll create an App.svelte file for our main logic.

1 <script>
2   // src/lib/App.svelte
3   import { format, addDays } from 'date-fns';
4   import Habit from '$lib/Habit.svelte';
5   import { habitStore } from '$lib/stores.js';
6   import AddHabit from '../lib/AddHabit.svelte';
7   let maxHabits = 2;
8 
9   // go back 5 days
10   const dates = new Array(5).fill(0).map((_, i) => {
11     let today = new Date();
12     return addDays(today, -i);
13   });
14 </script>
15 
16 <AddHabit {maxHabits} />
17 
18 <table>
19   <thead>
20     <tr>
21       <th>Habit</th>
22       {#each dates as date}
23         <th>{format(date, 'MMM do')}</th>
24       {/each}
25     </tr>
26   </thead>
27 
28   <tbody>
29     {#each $habitStore as habit}
30       <Habit {habit} {dates} />
31     {/each}
32   </tbody>
33 </table>

Next, update the +page.svelte file (our index route) to include our app.

1 <script>
2   // src/routes/+page.svelte
3   import App from '../lib/App.svelte';
4 </script>
5 
6 <App />

To complete the basic setup of the app, add a component for each habit that be checked on and off using this code snippet:

1 <script>
2   // src/lib/Habit.svelte
3   import { habitStore } from '$lib/stores.js';
4   import { format } from 'date-fns';
5 
6   export let habit;
7   export let dates;
8 
9   function toggleDay(day) {
10     let updatedDays = [...habit.completedDays];
11 
12     const index = updatedDays.indexOf(day);
13     if (index !== -1) {
14       updatedDays.splice(index, 1);
15     } else {
16       updatedDays.push(day);
17     }
18 
19     habitStore.update((items) => {
20       return items.map((item) => {
21         if (item.id === habit.id) {
22           return { ...item, completedDays: updatedDays };
23         }
24         return item;
25       });
26     });
27   }
28 </script>
29 
30 <tr>
31   <td>{habit.name}</td>
32 
33   {#each dates as date}
34     <td>
35       <input
36         type="checkbox"
37         on:click={() => toggleDay(date)}
38         checked={habit.completedDays.includes(date)}
39       />
40       {format(date, 'MMM do')}
41     </td>
42   {/each}
43 </tr>

Now we have a fully functioning Svelte app in all its glory! Essentially, it’s a table with checkboxes.

Our habits app, a table with each habit as a row

3. Add habits and premium features

We have the basics of the app set up, but we could make it more user-friendly. Let’s add some more functionality:

Add the ability for users create their own habits
Limit the number of habits a user can create to a certain amount so we can turn this into a commercial product.

Let’s do all of this in another component named AddHabit.svelte.

1 <script>
2   // src/lib/AddHabit.svelte
3   import { habitStore } from '$lib/stores.js';
4 
5   export let maxHabits = 3;
6 
7   let habitsFull = false;
8 
9   function addHabit(e) {
10     let numHabits = $habitStore.length;
11 
12     if (numHabits === maxHabits) {
13       habitsFull = true;
14     } else {
15       let form = e.target;
16       const formData = new FormData(e.target);
17 
18       habitStore.update((items) => {
19         items.push({ id: items.length + 1, name: formData.get('name'), completedDays: [] });
20         return items;
21       });
22 
23       // reset the form
24       form.reset();
25     }
26   }
27 </script>
28 
29 <dialog open={habitsFull}>
30   <h2>❌ Maximum Habits Reached</h2>
31   <p>You can only have up to {maxHabits} on the free tier. Purchase a premium version to unlock more.</p>
32   <form method="dialog">
33     <button>OK</button>
34   </form>
35 </dialog>
36 
37 <form on:submit|preventDefault={addHabit}>
38   <input type="text" name="name" />
39   <button type="submit"> Add new habit </button>
40 </form>

What’s happening here? A few things:

An input and a button to add new habits to the store, until an arbitrary limit is reached
A maxHabits prop is used to determine that limit
When this maximum limit is reached, a modal dialog opens
We reset the form after submission to clear the input

4. Show a different component based on the feature flag

On to the main topic, adding feature flags.

Go to your Unleash dashboard, and create new project (you’re welcome to use the default project here).

Next, create a feature flag called maxHabitsIncreased.

Based on whether this flag is enabled or not, we’ll set the maxHabits value to either 6 or 2. You could set this directly in a flag value if you wanted as well.

Configure your app with Svelke SDK

We’ll use the Svelte SDK to wrap a context provider around App.svelte like so:

1 <script>
2   // src/routes/+page.svelte
3   import App from '../lib/App.svelte';
4   import { FlagProvider } from '@unleash/proxy-client-svelte';
5 
6   const config = {
7     url: 'https://eu.app.unleash-hosted.com/jdfkdjfkd/api/frontend', // Your Front-end API
8     clientKey: '', // Front-end API token (or proxy client key)
9     appName: 'habits'
10   };
11 </script>
12 
13 <FlagProvider {config}>
14   <App />
15 </FlagProvider>

Note that I’m using the URL and API key directly in the code right now, but you’d want to put these in an env file.

Now that our SDK is setup, we can modify our App.svelte to set the value of the variable based on the feature flag.

1 +  import { useFlag } from '@unleash/proxy-client-svelte';
2 +  const maxHabitsIncreased = useFlag('maxHabitsIncreased');
3 +  let maxHabits = $maxHabitsIncreased ? 6 : 2;
4 -  lex maxHabits = 3;

Conclusion

You now have a SvelteKit app with feature flags. More precisely, you’ve learned:

How to make a habit tracking app with SvelteKit
How to add a feature flag to a full stack app using Unleash
The different approaches to feature flagging on a static vs SSR context