Demo walkthrough | Unleash Documentation

This walkthrough is designed to follow along in the Unleash demo instance. It takes you from a simple on/off flag to targeted rollouts for specific users and percentages, using pre-configured feature flags in the demo project.

The demo instance is a shared environment with limited features. For the best experience with the full feature set and your own applications, we recommend that you start a free 14-day Unleash Enterprise trial instead.

Open the demo app

Before you begin, open the demo app in a separate tab. You’ll use it to see your changes take effect in real time.

Open the demo app

Scan the QR code with your phone or open hello.unleash.run in another tab. For the best experience, keep the demo app and the Unleash instance side by side.

Enable a feature flag

Feature flags are the central concept of Unleash. They let you turn features on or off for your users without redeploying code.

Flag	What you’ll see
`demoApp.step1`	An expenses graph appears on the demo page when the flag is enabled, and disappears when it’s disabled.

In the sidebar, go to Projects > Demo Application and find the feature flag demoApp.step1.

Toggle the dev environment switch to on to enable the flag for everyone in development.

Look at the demo app to see your change take effect.

Feature flags are always evaluated per environment. Enabling a flag in dev does not affect production.

Enable a flag for a specific user

Activation strategies give you fine-grained control over when and for whom a feature is enabled. Here, you’ll use a constraint to target a specific user by their userId.

Flag	What you’ll see
`demoApp.step2`	The app’s background color changes on the demo page for the `userId` you specify.

Open the feature flag demoApp.step2.

In the dev environment, click Add strategy > Default strategy > Configure. In the Targeting tab, go to the Constraints section and click Add constraint.

Set the context field to userId, the operator to is one of, then click + Add values. Find your user ID on the demo page (displayed as userId: xxxxxx), enter it in the input field, and click Add.

Click Save strategy, then toggle the environment on.

Confirm the demo page shows the background color change for your user. Toggle the environment off to revert the color change.

Multiple strategies on the same flag use OR logic: the flag activates if any strategy evaluates to true. Constraints within a single strategy use AND logic: all constraints must be met for that strategy to activate.

Roll out to a percentage of users

Use a gradual rollout to safely expose a feature to a portion of your user base.

Flag	What you’ll see
`demoApp.step3`	A chatbot button appears for a percentage of users. Because stickiness is based on `userId`, the same user always gets the same result.

Open the feature flag demoApp.step3.

In the dev environment, click Add strategy > Default strategy > Configure. Set the rollout percentage to 25% using the slider.

Leave stickiness as default to ensure each user consistently sees the same experience.

Click Save strategy, then toggle the environment on.

Check the demo page. Depending on your userId, you may or may not see the chatbot button (this is expected). Increase the percentage to 100% to guarantee you see it.

Gradual rollout relies on stickiness: a concept that uses a hash of the userId (or sessionId, or a random value) to decide whether a user falls within the rollout percentage. This means the same user always gets the same experience, even across sessions.

Change the UI with variant payloads

Variants extend what a feature flag returns beyond a simple on/off. Each variant has a name, a weight (how often it’s shown), and an optional payload.

Flag	What you’ll see
`demoApp.step4`	Different users see a different accent color on the demo page, depending on which variant they are assigned.

Open demoApp.step4.

In the dev environment, click Add strategy > Default strategy > Configure.

Go to the Variants tab and click Add variant. Give the variant a name, set the payload type to String, and enter a hex color value as the payload, for example #6366f1.

Click Add variant again, give it a different name, and enter a different hex color, for example #22c55e. The weights automatically split to 50/50.

Click Save strategy.

Check the demo page. The accent color reflects the hex value from whichever variant your userId was assigned.

Your userId always maps to the same variant, so you will only see one of the two colors. To see the other variant, open the demo app in a different browser or an incognito window. This generates a new userId, but since it is still a 50/50 split, you may need to try a few times.