***
title: Demo walkthrough
description: >-
Follow along in the Unleash demo instance to learn how to create and control
feature flags, from simple toggles to targeted rollouts.
--------------------------------------------------------
This walkthrough is designed to follow along in the [Unleash demo instance](https://app.unleash-hosted.com/demo). 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](https://www.getunleash.io/plans/enterprise-payg) 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.
Scan the QR code with your phone or open [hello.unleash.run](https://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](/concepts/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](/concepts/environments) 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](/concepts/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](/concepts/activation-strategies) on the same flag use OR logic: the flag activates if **any** strategy evaluates to true. [Constraints](/concepts/activation-strategies#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](/concepts/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](/concepts/stickiness#calculation): 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](/concepts/strategy-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.