# Resources
Below is an incomplete collection of many resources for learning and applying XState in real-world applications. Check out the Awesome XState collection on GitHub for even more resources!
# Courses
Official Course
Watch the official State Machines in JavaScript with XState course by @davidkpiano 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.
Other great courses:
- Egghead - Introduction to State Machines Using XState by Kyle Shevlin
- Egghead - Construct Sturdy UIs with XState by Isaac Mann
# Articles and Videos
- 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 a
useAutoSaveHook - 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ł
- 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 Machiens (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