Have you ever worked on an app that started off simple, but as the number of features, states, and edge cases grew, it became much more difficult to maintain? Most of us know this struggle all too well. As the number of possible states in your app grows, developing UIs can become exponentially more complex. With the help of finite state machines (FSMs) and statecharts, you will be able to manage your app's states in a simple, robust way, and even visualize them, and interpret them reactively, with the help of xstate and RxJS From traffic lights to avionics systems and space missions, FSMs and statecharts have been used in many critical systems and user interfaces worldwide for decades. By taking a top-down approach of formalizing your app's states and actions into declarative statecharts, you can develop apps that are robust, testable, extendable, and easily communicable with project managers and designers. In this session, we'll learn what FSMs and statecharts are and how they can take your UIs to the next level, with innovative techniques for implementing, testing, and visualizing your app's finite states in a robust, automated way. There will plenty of use cases, resources, and real-life examples that work in any framework, or even plain JS.