PostHog Flags SDK Example

This example uses PostHog for feature flags with the Flags SDK along with the @flags-sdk/posthog PostHog adapter and the Flags Explorer.

Demo

https://flags-sdk-posthog.vercel.app/

How it works

This demo uses two feature flags in PostHog to control the visibility of two banners on the page. Both gates are configured to show/hide each banner 50% of the time.

If you deploy your own and configure the feature flags in PostHog, you can also use the Flags Explorer to enabled/disabled the features.

Deploy this template

Step 1: Link the project

In order to use the Flags Explorer, you need to link the project on your local machine.

1
vercel link

Select the project from the list you just deployed.

Step 2: Pull all environment variables

This allows the Flags SDK and the Flags Explorer to work correctly, by getting additional metadata.

1
vercel env pull

Step 3: Create Feature Flags

Head over to PostHog and create the feature flags required by this template.

Feature Flags:

• Summer Sale with the key summer_sale
• Free Shipping with the key free_delivery

You can also find the feature flag keys in the flags.ts file.

Set both feature flags to rollout to 50% of users.