---
title: "Read feature flags before the first paint · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/resilience/feature-flags-in-ui
id: APP-49
level: Recommended
updated: 2026-10-22
build: a2a6bdfed830
tokens: 960
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Read feature flags before the first paint

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Resilience](https://agentwranglers.se/playbook/app-ui/resilience.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-22.

- ID: APP-49
- Level: Recommended
- Chapter: [Resilience](https://agentwranglers.se/playbook/app-ui/resilience.md)
- Rule: Decide feature flags on the server and send them with the first page or data load. A flagged feature then never flashes in or out. The API checks the same flag.
- Check: A browser test loads the screen with the flag off and records every frame for one second. The flagged control never appears. A direct API call to the flagged route gets 404.
- How: Follow [deploy is not release](https://agentwranglers.se/playbook/engineering/running-in-production/deploy-is-not-release.md) for how flags work. Evaluate them per user on the server, for example with an OpenFeature provider, and pass the results to the client. A flagged API route checks the flag too, so a hidden button is no way around it. Remove flags when they are done, as [stale flags](https://agentwranglers.se/playbook/architecture/structure/remove-stale-flags.md) describes. Every flag the screen reads is listed in [Keep every flag in one register](https://agentwranglers.se/playbook/engineering/feature-flags/flag-register.md).

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### Python example

```python
@app.get("/api/session")
def session_info():
    user = current_user()
    return {
        "user": {"id": user.id, "name": user.display_name},
        "flags": {"newReports": flags.is_enabled("new-reports", user=user, default=False)},
    }
```

### TypeScript example

```ts
const session = await api.get('/api/session');
const app = createApp({ flags: session.flags });
if (session.flags.newReports) app.addRoute({ path: '/reports', load: () => import('./reports/ReportsScreen') });
```

## Related rules

- ENG-25 [Separate deploying from releasing](https://agentwranglers.se/playbook/engineering/running-in-production/deploy-is-not-release.md) in Engineering
- ENG-47 [Keep serving when the flag service is down](https://agentwranglers.se/playbook/engineering/feature-flags/flag-service-outage.md) in Engineering
- ARC-60 [Remove flags that never change](https://agentwranglers.se/playbook/architecture/structure/remove-stale-flags.md) in Clean code and architecture
- ENG-45 [Keep every flag in one register](https://agentwranglers.se/playbook/engineering/feature-flags/flag-register.md) in Engineering
- MOB-12 [Plan to fix forward](https://agentwranglers.se/playbook/mobile-apps/signing-and-release/fix-forward.md) in Mobile apps
- IOT-30 [Keep a signed remote switch for each risky feature](https://agentwranglers.se/playbook/connected-devices/fleet-monitoring-and-control/remote-kill-switch.md) in Connected devices

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/app-ui/resilience/feature-flags-in-ui">Agent Wranglers web app interface playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Recover when a new release replaces the old files](https://agentwranglers.se/playbook/app-ui/resilience/new-release-reload.md)
- Next: [Show which environment a tool is connected to](https://agentwranglers.se/playbook/app-ui/resilience/environment-label.md)
- [Resilience](https://agentwranglers.se/playbook/app-ui/resilience.md)