Flex UI 2.0 Enhancements Overview

This summary of features will continue to evolve as we make further enhancements to Flex UI 2.0. For details on how to migrate from Flex UI 1.x.x, see our migration guide. Also refer to the Flex UI Release Notes for v2.x.x for changes not outlined in this table.

Feature	Flex UI 1.0	Flex UI 2.0	Enhancements in UI 2.0
Component library	MaterialUI	Twilio Paste	Built using Twilio Paste tokens, primitives, components, and compositions that are completely composable.
State management	Redux	Redux Toolkit	New tools provide some guardrails for your state management, helping you set up boilerplate code more easily and with better defaults.
Theme and branding	`config.colorTheme` `config.colorTheme.overrides`	`config.theme` `config.theme.componentThemeOverride`	New theming structure promotes consistency, customization, and web accessibility. See Theme and Branding for a list of configuration and property changes.
Plugin development	Example Flex UI 1.x.x package.json Flex CLI `4.1.2` or lower React v16 or higher	Example Flex UI 2.x package.json Flex CLI `4.1.3` or higher React v17 or higher React & ReactDOM are now peer dependencies	Built on upgraded components and dependencies. Click on respective Flex version tab to view the example *package.json* files. You can now use the Flex Plugin Library which includes ready-to-install plugins.
Messaging channels	Programmable Chat and Proxy Channel attachments (web chat only)	Conversations SDK Attachments configurable for each messaging channel WhatsApp as a native channel	While UI 2.0 supports Legacy Messaging, you will need to use Flex Conversations and the new Interactions API. Issues with stale or 1-participant chats have been resolved by Flex Conversations. Read the Getting Started guide for a list of enhanced messaging features. For a list of identified Chat SDK properties and methods that have changed, been removed or deprecated, see Conversations SDK in the Migration Guide.
Web accessibility	N/A	WCAG 2.1 AA	Enables customers to conform with Web Content Accessibility Guidelines (WCAG) 2.1 AA with limited development work. See Flex UI web accessibility for more details.
Degraded mode	Introduced in `1.31.0`	Enabled for all minor versions	Flex UI will initialize with limited capabilities, even if some of the components like SDKs (TaskRouter, Conversations, Voice or Sync) are down. See Degraded mode for more details.
User and Activity Controls	Activity controls in the `MainHeader` component Theme for user activity controls Activity controls in the NoTaskCanvas	Programmable component Activity added to MainHeader Deprecated theme for user activity controls Removed Activity controls from the NoTaskCanvas	The User Controls component was split out into two components: `user-controls` now just refers to the little profile pic widget which opens up a popover with the Logout button, and `activity` displays the current activity and drops down to allow for selecting a different activity. These controls have been updated for easier access and improved programmability. As this is a potentially breaking change, see the migration guide for more detailed steps on working with UI 2.0.
Messaging UI	MessageInput	MessageInputV2	Moving to Flex Conversations offers more customization options for the Messaging UI. There is a new dynamic Component structure and default props. See Flex Messaging UI v2 changes for more details.
TaskRouter SDK wrappers	N/A	New Actions and Flex Events TaskRouter SDK upgraded to `^0.5.9`	In Flex UI 2.0, new Flex actions and events have been added to the Flex UI Actions Framework saving the need to access the TaskRouter SDK directly. See New Actions and Flex Events for TaskRouter SDK.
AppConfig	`Notifications.browser` `warmTransfer` `colorTheme`	`Notifications.enabled` `warmTransfer` is removed `theme`	You need to update your AppConfig structure to utilize the new config structure’s names and capabilities.
DownloadMedia Action	Requires a message object in the payload	Requires a media file as it uses Twilio Conversations	Uses Twilio Conversations under the hood.
InsightsPlayer Actions	Convention: `InsightsPlayer:<action>`	Convention: `InsightsPlayer<action>`	See Renamed actions for the full list of renamed Insights Player actions.
Other Flex Actions	`ApplyListFilters` and `ApplyListFiltersPayload` `RemoveListFilters` `SendMediaMessage` and `ChatActionSendMediaMessagePayload` `AttachFile`	`ApplyListFilters` and `ApplyListFiltersPayload` removed `RemoveListFilters` removed `SendMediaMessage` deprecated new `AttachFiles` allows an array of files to be passed	Some Flex actions have been removed, deprecated, and updated for flexibility.
Voice SDK	twilio-client	twilio-voice	Uses the Voice SDK which allows you to set Opus as your preferred codec. Opus generally requires less bandwidth and provides better audio quality in restrained network conditions. See Voice SDK on the Migration Guide for details on what's changed.
Flex Events	`yticaTokenUpdated`	`yticaTokenUpdated` removed	Some Flex events have been removed.
Dialpad	Legacy Dialpad Native Dialpad introduced in `1.18.0`	Flex Dialpad	Legacy Dialpad implementations are no longer supported. Please migrate to the native Flex Dialpad.

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 Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.

Need some help?

Thank you for your feedback!

Need help? Talk to Support

Thanks for your feedback!