Feature Flag Simulator
Preview the product under different feature flags and segments, no production access. Pro · Developer tools › Operations and releases
Preview a product under different feature-flag combinations: pick a segment, see which variant each flag serves and why (rule, rollout bucket, requirement, default), force variants locally, and compare every segment in a matrix. A sandbox — it never toggles real flags.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add feature-flag-simulatornpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { FeatureFlagSimulator } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
flags * | FeatureFlag[] | Flag configuration to simulate (as exported from your flag service). | |
segments * | FlagSegment[] | Audiences to preview, e.g. "Free plan", "EU enterprise", "Beta testers". | |
segment | string | Segment being previewed. | |
defaultSegment | string | Initial segment when uncontrolled. Default: the first. | |
onSegmentChange | (segment: string) => void | Called when the reader picks another segment. | |
overrides | Record<string, string> | Variants forced for the preview: flag key → variant. Local only, never sent anywhere. | |
defaultOverrides | Record<string, string> | Initial overrides when uncontrolled. | |
onOverridesChange | (overrides: Record<string, string>) => void | Called with all overrides after one is set or reset. | |
onVariantChange | (flag: string, variant: string | null, assignment: Record<string, string>) => void | Called when the reader sets (or resets, null) a flag's variant, with the resulting assignment. | |
renderPreview | (assignment: Record<string, string>, segment: FlagSegment | undefined) => ReactNode | Your product UI for an assignment (flag key → variant). Rendered on the server too: keep it pure. | |
view | 'preview' | 'matrix' | preview (default): one segment with its preview; matrix: every flag across every segment. | |
defaultView | 'preview' | 'matrix' | 'preview' | Initial view when uncontrolled. |
onViewChange | (view: FeatureFlagView) => void | Called when the reader switches the view. | |
loading | boolean | false | Flags are loading: skeleton. |
error | ReactNode | Loading failed: shown instead of the simulator. | |
title | ReactNode | Heading. Default: labels.title. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3). |
labels | Partial<FeatureFlagSimulatorLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Status Page — Status page: overall banner, 90-day uptime, incidents and subscriptions
- Storage Usage — Storage: usage by category and cleanup actions
- Download Center — Exports: file types, size, link expiry and re-request
- Code Block — Syntax-highlighted code
- Diff Viewer — Multi-file diff: file list with stats, unified and split views, word highlights
- Log Viewer — Streaming logs: levels, highlighted search, tail follow, JSON lines
- Request Inspector — HTTP request log: filters, headers, bodies and a timing waterfall
- API Key Manager — API keys: create with scopes and expiry, show the secret once, revoke
- Api Playground — API playground: model, parameters, prompts and JSON request/response
- Webhook Endpoints — Webhooks: endpoints, events, toggles and delivery rate
- Certificate List — SSL/TLS certificates: time to expiry, auto-renewal, legend
Previous: Download Center · Next: Hero Section · All Developer tools