The Flex UI

The Flex UI allows developers to build a custom user experience and custom behaviors for the Flex Agent Desktop and Flex Supervisor Desktop.

Flex User Interface example

Auto-Generated Documentation for the Flex UI is now available as a beta distribution. The auto-generated documentation is accurate and comprehensive, and so may differ from what you see in the official Flex UI documentation.

The Flex UI Component Library is built in React and published on NPM. @twilio/flex-ui is a node package that provides all the individual elements of the UI at the component level. It also provides a high-level API to interact with bundled SDKs such as Twilio Client, Programmable Chat, and TaskRouter.


This documentation provides information about:

  1. Configure the UI or manipulate default properties for standard Flex components
  2. Customize themes and styles
  3. Control localization and templates
  4. Add, replace or remove components
  5. Take advantage of UI actions by listening, intercepting and manipulating UI events
  6. Customize agent desktop notifications using Notifications Framework
  7. Alter behavior and appearance for native channels and define custom ones with Task Channel Definition API
  8. Mix-in Task or Theme context to your custom components
  9. Leverage the Flex Manager object to get access and control underlying SDKs
  10. Programmatically customize the UI using Plugin Builder

Building with Plugins

If you're building with the Flex UI, chances are you're also using Flex Plugins. The Flex UI documentation will provide you with the programming interfaces and best practices you need to augment the Flex UI. The Plugin docs will explain the development environment, and help set you up to take advantage of the Flex UI's programmability.

Next Steps

Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Community Forums or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

We are always striving to improve our documentation quality, and your feedback is valuable to us. Please select the reason(s) for your feedback or provide additional information about how we can improve:

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

Refer us and get $10 in 3 simple steps!

Step 1

Get link

Get a free personal referral link here

Step 2

Give $10

Your user signs up and upgrade using link

Step 3

Get $10

1,250 free SMSes
OR 1,000 free voice mins
OR 12,000 chats
OR more