Awesome XState
A collection of awesome resources regarding the XState library and Statecharts.
XState
XState is a library for creating, interpreting, and executing statecharts. Statecharts are a formalism for modeling stateful, reactive systems. - David Khourshid
Main Resources
- XState Official Website
- XState Documentation
- XState Resources
- XState on GitHub
- XState Community / Forum
- XState Catalogue a collection of professionally designed state machines you can drop into your projects
Concepts
- Stackoverflow: What is an actual difference between redux and a state machine (e.g. xstate)?
- Erik Mogensen - Welcome to the world of Statecharts
- Concepts, in official docs - Article touches on Finite State Machines, Statechart formailsm and the Actor model
Projects
Vue
- Glutnix/xstate-vue-calculator - Calculator
React
- voloshchenkoal/shinkei-suijaku - Card game
- davidkpiano/xstate-todomvc - TodoMVC
Articles
▶️ Front-end state management with Xstate - Amy Pellegrini | XConf Europe 2021- XState - a TypeScript state machine with a lot of features by Frank Quednau
- Creating a Complex IVR System with Ease with XState by Yonatan Mevorach
- My love letter to XState and statecharts
♥ by Tim Deschryver - StackOverflow: What is an actual difference between redux and a state machine (e.g. xstate)?
- Hyperapp demo with XState by @johnkazer
- A series of examples showing how to model application state with statechart using xstate by @coodoo
- Finite State Machines in React JS using XState by Sooraj Nair
- Vuex + XState by Brock Reece
- CodePen - XState Vue Login Page by Ryan Zola
▶️ Standing on the Shoulders of Giants. Development with XState by Brad Woods- Getting Started with XState by Viet Nguyen
- How to Effortlessly Model Async (React) with XState's Invoke by Matthew Jones
- XState 新手教學 - Finite State Machine by Jerry Hong
- XState 状态管理 by 陈三
▶️ Aplicaciones React usando XState by Luis César Contreras- Replacing Vuex with XState by Felix Guerin
- Communicating with spawned and invoked XState actors in React by Ismayil Khayredinov
- GitLab - TDDing XState by Dan Bunea
- GitHub - XState Sample Kit by @rjdestigter
▶️ How to Build a simple React App with XState by Tim Ermilov- XState: The new opportunity for web development by @mschulte
- Undo/Redo in React Using XState by Robert
- State-driven interfaces with XState by Brad Woods
- React Single File Components with XState by Robert
- An Introduction to State Machines using XState by Mat Warger
- Webinar - Visualize Application State with XState in JavaScript by Dani Akash
- Modeling parallel states in XState by Jacob Paris
- GitHub - a flipping cards game using XState by @lednhatkhanh
- GitHub - A Pac Man game, built with React, TypeScript, MobX, styled-components, and XState
- GitHub - a small React, XState and Framer Motion demo by @tanem
- GitHub - Autocomplete example with XState by @krzysztofzuraw
- GitHub - a Markdown Editor in Vue.js and XState by Sarah Dayan
- Guidelines for State Machines and XState by Kyle Shevlin
- A simple calculator using React and XState (statecharts) by diegoperezm
- XState Chart Traffic Lights by @howardmann
- XState Minesweeper by @lednhatkhanh
- Tips and tricks of using XState for UI development by @farskid
- Tic-Tac-Toe with Crank, XState, and TypeScript by @warger
- How To Build Finite State Machines using XState and React by Ibrahima Ndaw
- GitHub - Practical examples of statechart-based solutions with XState by @DevanB
▶️ Improving Application Predictability with XState by Sam Edwards- A front-end journey into XState by Robert Higdon
- ThoughtWorks - XState in the Technology Radar for Languages & Frameworks
- XState and Svelte: initial setup
- GitHub - Stripe Machine Example: An animated stripe checkout using XState and React by @JacobParis
▶️ Creating auseAutoSaveHook - Part 5: Using XState by Brooks Lybrand▶️ Authentication statechart in XState by Brooks Lybrand- Drag & Drop State Machine! Learning XState with David on the Keyframers
▶️ Isaac && Zack Code Jam #2: State Machines and XState- Improving state representation by using XState in React by Jon Major Condon
- Remake of the 100 squares game by @nikpundik
- Intro to XState - a true state management library for React by Pavlo Lompas
- Multistep form handling with Finite State Machines, Formik and TypeScript by Daniel Grychtoł
- CodeSandbox - XState Login & Sign Up Forms by Jamie Mason
- Introduction to XState by Flavio Copes
▶️ Autocomplete, XState, and anything in between by Krzysztof Żuraw▶️ How to add an XState machine conf to a project by Diego Perez▶️ Part 1: Tic-tac-toe - Let's build (using JavaScript, React, Cypress and XState)- Learn and Apply XState with Vonage Video by Kelly Andrews
- Starting with State Machines and XState! by Jasmin Virdi
- Comparing state machines: XState vs. Robot by Samaila Bala
- Hello XState Part 1: Learning state machines for frontend web development by Eka
▶️ The Actor Model | XState part 1 by @bisvarup- Intro: XState and State Machines (React) by Dimitar Danailov
▶️ Learning XState with Lauren on Lauren Learns Things- XState, React, and TypeScript - how to get it working by Matt Pocock
- XState Pizza Wizard! by Jack Herrington
- SWR-Style Fetching with XState State Machines by Daniel Imfeld
- Slides - Working with State Machines in Angular with XState by Stefanos Lignos
- Firebase authentication with XState and Svelte by @codechips
▶️ Model Based Testing with XState | Why It's Great | Part 1 by John Bales▶️ Mini Introducción a XState by Michell Ayala- Testing XState with React Testing Library by Joe Purnell
▶️ Easy Introduction to XState in React | States, Transitions, Guards, and (Actions by Bhargav Ponnapalli▶️ State-driven Interfaces with XState on Mozilla Indonesia▶️ Virtual Lunch & Learn: Let's build an app using Svelte, TypeScript, XState and Tailwind by Anders Bech Mellson▶️ Refactoring with XState - Part 1 by VigsCodes- State machines in Production by Ivan Kovic
- When your brain is breaking, try XState by @swizec
- GitHub - Cypress Real-World App
- State Machines For Everyone by Alex Dodge
- My First Machine, Getting Started with XState and Angular by Caleb Ukle
▶️ Reducing state complexity with XState by Kishore- Finite State Machines in React JS using XState JS by Sooraj
▶️ Managing UI Complexity with Statecharts (playlist)- How State Machines Saved Our Bacon
🥓 by Ian Jones - Refactoring a useReducer to XState, Part 1 by @swizec
▶️ XState and React on Leniolabs- How to write tests for XState by @swizec
- Create-React-App Template with XState by Kacper Wdowik
- XState and State Machines in VueJS by Constantin Druc
- Tes en Línea: React, TypeScript, XState, fp-ts & CSS Grid (esp) by Edgar Rodriguez
- Supervising XState Machines with Redux by John de Stigter
- Working with non-user asynchronous events in model based tests with XState by John de Stigter
- Model based UI tests with XState, Cypress, Puppeteer & more by John de Stigter
- Thoughts on State Management with XState and ReactJS by John de Stigter
▶️ Tutorial of C++ Code Generator for XState State Machine engine by Andrew Shuvalov- React context without context, using XState – CodeWithSwiz 14, 15 by @swizec
- State Machines Workshop with XState by Ademola (@ooade)
▶️ Finite State Machines in Vue 3 by Sarah Dayan▶️ Frontend is Rocket Science - How to use XState in Vue 3 Now! by Aleksej Dix▶️ React Wednesdays: XState and JavaScript State Machines▶️ Declarative and manageable state management with XState on Decoupled Days▶️ Modeling a Voicemail Widget with XState by Constantin Druc- XState Brain Teaser #1 - Auth Flow by Matt Pocock
▶️ Learning XState by refactoring an old project by Florens Verschelde- Creating State Machines in JavaScript with XState by Dor Nisim
- "Just Use Props": An opinionated guide to React and XState by Matt Pocock
- Usando XState y React para hacer peticiones HTTP (en español) by GCD Coder
- Infinite Scrolling con Svelte, IntersectionObserver & XState (en español) by GCD Coder
▶️ Getting Started with XState in Vue 3 by JacoboCode▶️ Typing XState in Vue 3 by JacoboCode- Infinite Scrolling with Svelte 3, XState and IntersectionObserver by Gustavo Castillo
- Untangle complex flows in your React Native app with XState by Simone D'Avico
- Integrate XState with React Native and React Navigation by Simone D'Avico
- Testing XState machines in your React Native app by Simone D'Avico
- An Introduction to Finite State Machines: Simplifying React State Management with State Machines by Bradley Kofi
- An Introduction to XState in TypeScript by Neeraj Khosla
▶️ XState - Global state in React by Matt Pocock▶️ XState Introduction on For Those Who Code- Future of state management in React with XState by Jakub Skoneczny
▶️ Custom Svelte Store: XState as Svelte store by lihautan▶️ Finite State Machine on Frontend by Eugenia Zigisova- #1 Introduction to XState in React by Bhargav Ponnapalli
▶️ Modelling application behaviour with the XState library (in React) by Marc Klefter- Rsvp to weddings with XState by Andrew Peterson
▶️ XState and State Machines in Vue- Github - XState with React and Angular in Nx Workspace by Chau Tran
- Boost your React application's performance by XState by Alireza Valizade
- Getting Started with XState, React, and Typescript | Part 1 by Modus Create
- Frontend is Rocket Science – Managing state in any JavaScript Application by Aleksej Dix
▶️ Use State Machines to Build a Queue for Custom Twitch Overlays — Learn With Jason by Jason Lengstorf- How to Use Finite State Machines in React by Leonardo Maldonado
▶️ Maquinas de estado finito y gráficas de estado en React by José L Narajo- XState: Should this be an action, or a service? by Matt Pocock
- State Machines: Should this be a state, or in context? by Matt Pocock
- XState: What's the difference between Machine and createMachine? by Matt Pocock
- Use an XState Machine with React by Josh Branchaud
▶️ DevTrends: XState by Anthony Gore- XState: Street Lights with Pedestrian Crossing using Vue.js by Kevin Warrington
▶️ Front-end state management with XState by Amy Pellegrini▶️ Splitting the view and the brains in JS — state machines with XState (in French) by Aurelien Meunier- Using XState with Deno by Bruno Quaresma
- How to model application flows in React with finite state machines and XState by Andrew McDowell
- State-driven interfaces with XState - Brad Woods, Mar 2020
- Redux is half of a pattern (1/2) - David Khourshid, 2020
- No, disabling a button is not app logic - David Khourshid, 2019
- The (Switch)-Case for State Machines in User Interfaces - David Khourshid, 2018
- Robust React User Interfaces with Finite State Machines - David Khourshid, 2018
- State Machines in React - Dave Geddes
- Finite State Machines in Vue - Phillip Parker
- 24 days to learn statecharts #devadvent - series of 25 blog posts, Statecharts, Typescript
Testing
- Model-Based Testing in React with State Machines - David Khourshid, 2020
Guides
- Extensive examples of XState features with and without React. - Brad Woods ( Updated often )
Usage & Examples
- Examples modelling application state with statecharts
- XState Catalog - A collection of professionally designed state machines
Talks
▶️ David Khourshid - Coding Complex App Logic, Visually | Dec 7, 2022 - Youtube, duration, 39:28▶️ David Khourshid - XState: the Visual Future of State Management | Jul 4, 2021 - Youtube, duration, 30:01▶️ David Khourshid - Reactive State Machines and Statecharts | Uphill Conf 2019 - Youtube, duration 21:25▶️ David Khourshid - Simplifying Complex UIs with Finite Automata & Statecharts | JSConf Iceland 2018 - Youtube, duration 34:27▶️ David Khourshid - Reactive State Machines and Statecharts - ReactiveConf 2018 Youtube, duration 28:50▶️ David Khourshid - Infinitely Better UIs with Finite Automata - ReactRally 2017 Youtube, duration 25:32▶️ XState - An introduction - Finite State Machines in React - Leigh Halliday Youtube, duration 8:00▶️ XState - Data Loading Service - Finite State Machines in React - Leigh Halliday Youtube, duration 18:54
Tools
- XState PlantUML by Erik Mogensen, given an XState definition (JS Object) of a statechart, this tool will output a plantuml source rendering of the statechart.
- XState Chrome Devtool Inspect XState machines running in your app
- XState Ninja - a powerful devtool for inspecting multiple XState state machines at the same time
- Sketch Systems - design and understand state, export result to xState machine object
- XState Codegen - generate 100% typesafe Typescript code with a CLI
Dig deeper into Statecharts
- Statecharts - A Visual Formalism For Complex Systems (PDF) - David Harel, 1984
- World of Statecharts a comprehensive guide by Erik Mogensen in using statecharts in your applications
- Statechart Autocoding for NASA's Curiosity Rover, model based systems engineering
- A humble repo to collect knowledge on state machines. - Andrew Chou
Dive deeper into State Machines
- How I Learned to Stop Worrying and
❤️ the State Machine - Reginald Braithwaite, 2018 - You are managing state? Think twice. - Krasimir Tsonev, 2017
- A composable pattern for pure state machines with effects (draft v3) - Andy Matuschak, 2016
- Creating CSS State machines - David Khourshid
- Why Developers Never Use State Machines - Alan Skorkin, 2018
- Why developers should be force-fed state machines - Willem van Bergen (engineering at shopify) 2011
- The case for statechart and xstate -- why it matters and how we can benefit from it - Jeremy Lu (StateKit)
Other great courses and guides:
- Egghead - Introduction to State Machines Using XState by Kyle Shevlin
- Egghead - Construct Sturdy UIs with XState by Isaac Mann
- XState Guide by Brad Woods
Podcasts
🎙 (React Podcast) 5: Finite State Machines with David Khourshid🎙 (React Podcast) 83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration🎙 (Full Stack Radio) 130: David Khourshid - Building Better UI Components with State Machines🎙 (Chats with Kent) Make Your Apps Resilient Using Finite State Machines With David Khourshid🎙 (React Round-Up) 069: The State Machines in React with David Khourshid🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid🎙 (Egghead.io Podcast) 11: Introduction To State Machines And XState With Kyle Shevlin🎙 (Syntax.FM) 206: State Machines, CSS and Animations with David K Piano🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid