# URL feature toggles

*Category:* Utilities
*Section:* Helper
*Source:* https://uikit.developers.rio.cloud/#/utilities/featureToggles
*Captured:* 2026-04-27T14:59:29.244Z

URL-based feature toggles (also known as feature flags) are a powerful development technique that allows you to enable or disable features in your application dynamically, without deploying new code.

## URL feature toggles

## Feature toggles detection

The feature toggle detection system in your application is designed to handle the dynamic activation and retrieval of feature toggles from two primary sources:

- URL Query Parameters Toggles can be passed through the URL as query parameters (e.g., ?ft_demo=true), allowing for easy testing or overriding of features without modifying code
- LocalStorage If a toggle is not present in the URL, the system falls back to using stored values in the browser's localStorage, ensuring that user preferences or feature states are preserved across sessions

Toggles can be passed through the URL as query parameters (e.g., ?ft_demo=true), allowing for easy testing or overriding of features without modifying code

If a toggle is not present in the URL, the system falls back to using stored values in the browser's localStorage, ensuring that user preferences or feature states are preserved across sessions

## Defining feature toggles

Feature toggles are defined in a centralized configuration map, with each toggle specifying its corresponding query parameter name, its data type (boolean, string, or number) and an optional default value. This allows you to easily configure new toggles.

**Type transformers**

- asBoolean and asBooleanWithDefault: Interprets the parameter as a boolean (e.g., true, false, 1, 0)
- asString and asStringWithDefault: Treats the parameter as a string
- asNumber and asNumberWithDefault: Converts the parameter into a number

The detectFeatureToggles function first checks if the specified toggle exists in the URL by extracting and parsing the query string (i.e., everything after the ? in the URL). If the parameter is found, its value is transformed using the appropriate type transformer (boolean, string, number), saved in localStorage, and returned.

```typescript
import { detectFeatureToggles, asString, asBoolean, asNumber } from '@rio-cloud/rio-uikit/urlFeatureToggles';

// Define old toggles to clean up
const oldToggles = ['ft_eventTeaser', 'ft_survey', 'ft_menu'];

// Define toggle transformation functions with their respective names and
// export the detected feature toggles as a singleton
export const featureToggles = detectFeatureToggles(
{
enforcedLocale: asString('ft_enforceLocale'),
tracing: asBoolean('ft_tracing'),
demo: asBooleanWithDefault('ft_demo', false),
maxItems: asNumberWithDefault('ft_maxItems', 10),
},
oldToggles
);
```

import

{

,

,

,

}

from

'@rio-cloud/rio-uikit/urlFeatureToggles'

;

// Define old toggles to clean up

const

=

[

'ft_eventTeaser'

,

'ft_survey'

,

'ft_menu'

]

;

// Define toggle transformation functions with their respective names and

// export the detected feature toggles as a singleton

export

const

=

detectFeatureToggles

(

{

:

asString

(

'ft_enforceLocale'

)

,

:

asBoolean

(

'ft_tracing'

)

,

:

asBooleanWithDefault

(

'ft_demo'

,

false

)

,

:

asNumberWithDefault

(

'ft_maxItems'

,

10

)

,

}

,

)

;

**Default values**

For each type of transformer there is a *WithDefault variant. This function accepts a default value as second parameter. The default value is only returned if neither the query parameter nor the local storage contain a value for the feature toggle. A feature toggle with a default value will never be null. This fact is also reflected in the type of the feature toggle properties in the object returned by detectFeatureToggles.

**Customizable prefix**

Feature toggles are stored in localStorage with a predefined prefix (default: featureToggle.), which can be customized as needed. This prefix helps to avoid naming collisions with other items stored in localStorage and makes it clear which items are related to feature toggles.

```typescript
export const featureToggles = detectFeatureToggles(
{ demo: asBoolean('ft_demo') },
oldToggles,
'myCustomPrefix.'
);
```

export

const

=

detectFeatureToggles

(

{

:

asBoolean

(

'ft_demo'

)

}

,

,

'myCustomPrefix.'

)

;

## Usage

Suppose you want to enable or disable a demo mode in your application. You can pass ?ft_demo=true in the URL or rely on the value previously stored in localStorage.

- URL: http://example.com/#?ft_demo=true&ft_enforceLocale=de-DE
- Expected behavior: The system detects the ft_demo parameter and interprets it as true (boolean) The ft_enforceLocale is stored as a string ("de-DE") If a value like ft_maxItems is not provided in the URL, the system will try to fetch it from localStorage

- The system detects the ft_demo parameter and interprets it as true (boolean)
- The ft_enforceLocale is stored as a string ("de-DE")
- If a value like ft_maxItems is not provided in the URL, the system will try to fetch it from localStorage

To use a feature toggle, simply reference it in your code

```typescript
if (featureToggles.demo) {
// Render demo feature
}
```

if

(

.

)

{

// Render demo feature

}

## Benefits

- Flexibility This approach allows toggles to be easily overridden via URL for testing or debugging purposes without changing the codebase
- Persistence By leveraging localStorage, feature toggles persist across browser sessions, ensuring a consistent experience for users
- Type safety Type transformation functions (asBoolean, asString, asNumber) ensure that toggles are correctly interpreted based on the expected data type
- Clean state management Unused toggles can be cleaned up from localStorage, ensuring there is no unnecessary buildup of outdated data

This approach allows toggles to be easily overridden via URL for testing or debugging purposes without changing the codebase

By leveraging localStorage, feature toggles persist across browser sessions, ensuring a consistent experience for users

Type transformation functions (asBoolean, asString, asNumber) ensure that toggles are correctly interpreted based on the expected data type

Unused toggles can be cleaned up from localStorage, ensuring there is no unnecessary buildup of outdated data