# Resources
Below is an incomplete collection of many resources for learning and applying XState in real-world applications. Check out the Awesome XState (opens new window) collection on GitHub for even more resources!
# Courses
Official Course
Watch the official State Machines in JavaScript with XState (opens new window) course by @davidkpiano (opens new window) on Frontend Masters! In this course, you’ll learn the fundamentals of state machines and statecharts, from building your own without any libraries in pure JavaScript, up to using XState to take advantage of a wide variety of other features.
The workshop code examples are open-sourced and available on GitHub (opens new window).
There is also a follow-up course: State Modeling with React and XState (opens new window). Once you've gone through the first course, be sure to take this one too so you can learn how to apply state machines and statecharts to real-world apps and master advanced concepts such as spawning/invoking actors and model-based testing.
Other great courses and guides:
- Egghead - Introduction to State Machines Using XState (opens new window) by Kyle Shevlin (opens new window)
- Egghead - Construct Sturdy UIs with XState (opens new window) by Isaac Mann (opens new window)
- XState Guide (opens new window) by Brad Woods (opens new window)
# Podcasts
- 🎙 (React Podcast) 5: Finite State Machines with David Khourshid (opens new window)
- 🎙 (React Podcast) 83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration (opens new window)
- 🎙 (Full Stack Radio) 130: David Khourshid - Building Better UI Components with State Machines (opens new window)
- 🎙 (Chats with Kent) Make Your Apps Resilient Using Finite State Machines With David Khourshid (opens new window)
- 🎙 (React Round-Up) 069: The State Machines in React with David Khourshid (opens new window)
- 🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid (opens new window)
- 🎙 (Egghead.io Podcast) 11: Introduction To State Machines And XState With Kyle Shevlin (opens new window)
- 🎙 (Syntax.FM) 206: State Machines, CSS and Animations with David K Piano (opens new window)
- 🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid (opens new window)
# Articles and Videos
- XState - a TypeScript state machine with a lot of features (opens new window) by Frank Quednau
- Creating a Complex IVR System with Ease with XState (opens new window) by Yonatan Mevorach
- My love letter to XState and statecharts ♥ (opens new window) by Tim Deschryver
- StackOverflow: What is an actual difference between redux and a state machine (e.g. xstate)? (opens new window)
- Hyperapp demo with XState (opens new window) by @johnkazer (opens new window)
- A series of examples showing how to model application state with statechart using xstate (opens new window) by @coodoo (opens new window)
- Finite State Machines in React JS using XState (opens new window) by Sooraj Nair (opens new window)
- Vuex + XState (opens new window) by Brock Reece (opens new window)
- CodePen - XState Vue Login Page (opens new window) by Ryan Zola (opens new window)
- ▶️ Standing on the Shoulders of Giants. Development with XState (opens new window) by Brad Woods
- Getting Started with XState (opens new window) by Viet Nguyen
- How to Effortlessly Model Async (React) with XState's Invoke (opens new window) by Matthew Jones
- XState 新手教學 - Finite State Machine (opens new window) by Jerry Hong
- XState 状态管理 (opens new window) by 陈三
- ▶️ Aplicaciones React usando XState (opens new window) by Luis César Contreras
- Replacing Vuex with XState (opens new window) by Felix Guerin (opens new window)
- Communicating with spawned and invoked XState actors in React (opens new window) by Ismayil Khayredinov
- GitLab - TDDing XState (opens new window) by Dan Bunea
- GitHub - XState Sample Kit (opens new window) by @rjdestigter (opens new window)
- ▶️ How to Build a simple React App with XState (opens new window) by Tim Ermilov
- XState: The new opportunity for web development (opens new window) by @mschulte (opens new window)
- Undo/Redo in React Using XState (opens new window) by Robert (opens new window)
- State-driven interfaces with XState (opens new window) by Brad Woods (opens new window)
- React Single File Components with XState (opens new window) by Robert (opens new window)
- An Introduction to State Machines using XState (opens new window) by Mat Warger (opens new window)
- Webinar - Visualize Application State with XState in JavaScript (opens new window) by Dani Akash
- Modeling parallel states in XState (opens new window) by Jacob Paris (opens new window)
- GitHub - a flipping cards game using XState (opens new window) by @lednhatkhanh (opens new window)
- GitHub - A Pac Man game, built with React, TypeScript, MobX, styled-components, and XState (opens new window)
- GitHub - a small React, XState and Framer Motion demo (opens new window) by @tanem (opens new window)
- GitHub - Autocomplete example with XState (opens new window) by @krzysztofzuraw (opens new window)
- GitHub - a Markdown Editor in Vue.js and XState (opens new window) by Sarah Dayan (opens new window)
- Guidelines for State Machines and XState (opens new window) by Kyle Shevlin (opens new window)
- A simple calculator using React and XState (statecharts) (opens new window) by diegoperezm (opens new window)
- XState Chart Traffic Lights (opens new window) by @howardmann (opens new window)
- XState Minesweeper (opens new window) by @lednhatkhanh (opens new window)
- Tips and tricks of using XState for UI development (opens new window) by @farskid (opens new window)
- Tic-Tac-Toe with Crank, XState, and TypeScript (opens new window) by @warger (opens new window)
- How To Build Finite State Machines using XState and React (opens new window) by Ibrahima Ndaw (opens new window)
- GitHub - Practical examples of statechart-based solutions with XState (opens new window) by @DevanB (opens new window)
- ▶️ Improving Application Predictability with XState (opens new window) by Sam Edwards (opens new window)
- A front-end journey into XState (opens new window) by Robert Higdon (opens new window)
- ThoughtWorks - XState in the Technology Radar for Languages & Frameworks (opens new window)
- XState and Svelte: initial setup (opens new window)
- GitHub - Stripe Machine Example (opens new window): An animated stripe checkout using XState and React by @JacobParis (opens new window)
- ▶️ Creating a
useAutoSaveHook - Part 5: Using XState (opens new window) by Brooks Lybrand (opens new window) - ▶️ Authentication statechart in XState (opens new window) by Brooks Lybrand (opens new window)
- Drag & Drop State Machine! Learning XState with David (opens new window) on the Keyframers (opens new window)
- ▶️ Isaac && Zack Code Jam #2: State Machines and XState (opens new window)
- Improving state representation by using XState in React (opens new window) by Jon Major Condon (opens new window)
- Remake of the 100 squares game (opens new window) by @nikpundik (opens new window)
- Intro to XState - a true state management library for React (opens new window) by Pavlo Lompas (opens new window)
- Multistep form handling with Finite State Machines, Formik and TypeScript (opens new window) by Daniel Grychtoł
- Introduction to XState (opens new window) by Flavio Copes (opens new window)
- ▶️ Autocomplete, XState, and anything in between (opens new window) by Krzysztof Żuraw (opens new window)
- ▶️ How to add an XState machine conf to a project (opens new window) by Diego Perez (opens new window)
- ▶️ Part 1: Tic-tac-toe - Let's build (using JavaScript, React, Cypress and XState) (opens new window)
- Learn and Apply XState with Vonage Video (opens new window) by Kelly Andrews (opens new window)
- Starting with State Machines and XState! (opens new window) by Jasmin Virdi (opens new window)
- Comparing state machines: XState vs. Robot (opens new window) by Samaila Bala (opens new window)
- Hello XState Part 1: Learning state machines for frontend web development (opens new window) by Eka (opens new window)
- ▶️ The Actor Model | XState part 1 (opens new window) by @bisvarup (opens new window)
- Intro: XState and State Machines (React) (opens new window) by Dimitar Danailov (opens new window)
- ▶️ Learning XState with Lauren (opens new window) on Lauren Learns Things
- XState, React, and TypeScript - how to get it working (opens new window) by Matt Pocock (opens new window)
- XState Pizza Wizard! (opens new window) by Jack Herrington (opens new window)
- SWR-Style Fetching with XState State Machines (opens new window) by Daniel Imfeld (opens new window)
- Slides - Working with State Machines in Angular (opens new window) with XState by Stefanos Lignos (opens new window)
- Firebase authentication with XState and Svelte (opens new window) by @codechips (opens new window)
- ▶️ Model Based Testing with XState | Why It's Great | Part 1 (opens new window) by John Bales (opens new window)
- ▶️ Mini Introducción a XState (opens new window) by Michell Ayala (opens new window)
- Testing XState with React Testing Library (opens new window) by Joe Purnell (opens new window)
- ▶️ Easy Introduction to XState in React | States, Transitions, Guards, and (Actions (opens new window) by Bhargav Ponnapalli (opens new window)
- ▶️ State-driven Interfaces with XState (opens new window) on Mozilla Indonesia (opens new window)
- ▶️ Virtual Lunch & Learn: Let's build an app using Svelte, TypeScript, XState and Tailwind (opens new window) by Anders Bech Mellson
- ▶️ Refactoring with XState - Part 1 (opens new window) by VigsCodes (opens new window)
- State machines in Production (opens new window) by Ivan Kovic (opens new window)
- When your brain is breaking, try XState (opens new window) by @swizec (opens new window)
- GitHub - Cypress Real-World App (opens new window)
- State Machines For Everyone (opens new window) by Alex Dodge (opens new window)
- My First Machine, Getting Started with XState and Angular (opens new window) by Caleb Ukle (opens new window)
- ▶️ Reducing state complexity with XState (opens new window) by Kishore
- Finite State Machines in React JS using XState JS (opens new window) by Sooraj (opens new window)
- ▶️ Managing UI Complexity with Statecharts (playlist) (opens new window)
- How State Machines Saved Our Bacon 🥓 (opens new window) by Ian Jones (opens new window)
- Refactoring a useReducer to XState, Part 1 (opens new window) by @swizec (opens new window)
- ▶️ XState and React (opens new window) on Leniolabs (opens new window)
- How to write tests for XState (opens new window) by @swizec (opens new window)
- Create-React-App Template with XState (opens new window) by Kacper Wdowik (opens new window)
- XState and State Machines in VueJS (opens new window) by Constantin Druc (opens new window)
- Tes en Línea: React, TypeScript, XState, fp-ts & CSS Grid (esp) (opens new window) by Edgar Rodriguez (opens new window)
- Supervising XState Machines with Redux (opens new window) by John de Stigter (opens new window)
- Working with non-user asynchronous events in model based tests with XState (opens new window) by John de Stigter (opens new window)
- Model based UI tests with XState, Cypress, Puppeteer & more (opens new window) by John de Stigter (opens new window)
- Thoughts on State Management with XState and ReactJS (opens new window) by John de Stigter (opens new window)
- ▶️ Tutorial of C++ Code Generator for XState State Machine engine (opens new window) by Andrew Shuvalov (opens new window)
- React context without context, using XState – CodeWithSwiz 14, 15 (opens new window) by @swizec (opens new window)
- State Machines Workshop with XState (opens new window) by Ademola (@ooade) (opens new window)
- ▶️ Finite State Machines in Vue 3 (opens new window) by Sarah Dayan (opens new window)
- ▶️ Frontend is Rocket Science - How to use XState in Vue 3 Now! (opens new window) by Aleksej Dix (opens new window)
- ▶️ React Wednesdays: XState and JavaScript State Machines (opens new window)
- ▶️ Declarative and manageable state management with XState (opens new window) on Decoupled Days
- ▶️ Modeling a Voicemail Widget with XState (opens new window) by Constantin Druc (opens new window)
- XState Brain Teaser #1 - Auth Flow (opens new window) by Matt Pocock (opens new window)
- ▶️ Learning XState by refactoring an old project (opens new window) by Florens Verschelde (opens new window)
- Creating State Machines in JavaScript with XState (opens new window) by Dor Nisim (opens new window)
- "Just Use Props": An opinionated guide to React and XState (opens new window) by Matt Pocock (opens new window)
- Usando XState y React para hacer peticiones HTTP (en español) (opens new window) by GCD Coder (opens new window)
- Infinite Scrolling con Svelte, IntersectionObserver & XState (en español) (opens new window) by GCD Coder (opens new window)
- ▶️ Getting Started with XState in Vue 3 (opens new window) by JacoboCode (opens new window)
- ▶️ Typing XState in Vue 3 (opens new window) by JacoboCode (opens new window)
- Infinite Scrolling with Svelte 3, XState and IntersectionObserver (opens new window) by Gustavo Castillo (opens new window)
- Untangle complex flows in your React Native app with XState (opens new window) by Simone D'Avico (opens new window)
- Integrate XState with React Native and React Navigation (opens new window) by Simone D'Avico (opens new window)
- An Introduction to Finite State Machines: Simplifying React State Management with State Machines (opens new window) by Bradley Kofi (opens new window)
- An Introduction to XState in TypeScript (opens new window) by Neeraj Khosla (opens new window)
- ▶️ XState - Global state in React (opens new window) by Matt Pocock (opens new window)
- ▶️ XState Introduction (opens new window) on For Those Who Code (opens new window)
- Future of state management in React with XState (opens new window) by Jakub Skoneczny (opens new window)
- ▶️ Custom Svelte Store: XState as Svelte store (opens new window) by lihautan (opens new window)
- ▶️ Finite State Machine on Frontend (opens new window) by Eugenia Zigisova (opens new window)
- #1 Introduction to XState in React (opens new window) by Bhargav Ponnapalli (opens new window)
- ▶️ Modelling application behaviour with the XState library (in React) (opens new window) by Marc Klefter (opens new window)
- Rsvp to weddings with XState (opens new window) by Andrew Peterson (opens new window)
- ▶️ XState and State Machines in Vue (opens new window)
- Github - XState with React and Angular in Nx Workspace (opens new window) by Chau Tran (opens new window)