Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/darrylhebbes/awesome_xstate

Everything awesome about XState
https://github.com/darrylhebbes/awesome_xstate
List: awesome_xstate
finite-state-machines statecharts xstate xstate-talks
Last synced: about 1 month ago
JSON representation
Everything awesome about XState
Host: GitHub
URL: https://github.com/darrylhebbes/awesome_xstate
Owner: darrylhebbes
Created: 2020-03-15T10:50:33.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2023-01-02T09:24:05.000Z (almost 2 years ago)
Last Synced: 2024-05-22T15:11:24.361Z (7 months ago)
Topics: finite-state-machines, statecharts, xstate, xstate-talks
Size: 134 KB
Stars: 182
Watchers: 7
Forks: 8
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

ultimate-awesome - awesome_xstate - Everything awesome about XState. (Other Lists / Monkey C Lists)
README

        ## Awesome XState

[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

A collection of awesome resources regarding the XState library and Statecharts.

[Official Code Repository](https://github.com/statelyai/xstate)

### 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](https://xstate.js.org)

- [XState Documentation](https://xstate.js.org/docs)

- [XState Resources](https://xstate.js.org/docs/about/resources.html)

- [XState on GitHub](https://github.com/davidkpiano/xstate)

- [XState Community / Forum](https://spectrum.chat/statecharts)

- [XState Catalogue](https://xstate-catalogue.com/) 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)?](https://stackoverflow.com/a/54521035)

- [Erik Mogensen - Welcome to the world of Statecharts](https://statecharts.github.io/)

- [Concepts, in official docs](https://github.com/davidkpiano/xstate/blob/master/docs/about/concepts.md) - Article touches on Finite State Machines, Statechart formailsm and the Actor model

### Projects

#### Vue

- [Glutnix/xstate-vue-calculator](https://github.com/Glutnix/xstate-vue-calculator) - Calculator

#### React

- [voloshchenkoal/shinkei-suijaku](https://github.com/voloshchenkoal/shinkei-suijaku) - Card game

- [davidkpiano/xstate-todomvc](https://github.com/davidkpiano/xstate-todomvc) - TodoMVC

### Articles

- [▶️ Front-end state management with Xstate - Amy Pellegrini | XConf Europe 2021](https://www.youtube.com/watch?v=Slb6M_rIn0M)

- [XState - a TypeScript state machine with a lot of features](http://realfiction.net/2019/01/30/xstate-a-typescript-state-machine-with-a-lot-of-features) by Frank Quednau

- [Creating a Complex IVR System with Ease with XState](https://www.nexmo.com/blog/2019/06/20/creating-a-complex-ivr-system-with-ease-with-xstate-dr) by Yonatan Mevorach

- [My love letter to XState and statecharts ♥](https://dev.to/timdeschryver/my-love-letter-to-xstate-and-statecharts-287b) by Tim Deschryver

- [StackOverflow: What is an actual difference between redux and a state machine (e.g. xstate)?](https://stackoverflow.com/questions/54482695/what-is-an-actual-difference-between-redux-and-a-state-machine-e-g-xstate/54521035#54521035)

- [Hyperapp demo with XState](https://github.com/johnkazer/hyperapp-xstate-demo) by [@johnkazer](https://github.com/johnkazer)

- [A series of examples showing how to model application state with statechart using xstate](https://github.com/coodoo/xstate-examples) by [@coodoo](https://github.com/coodoo/xstate-examples)

- [Finite State Machines in React JS using XState](https://www.skcript.com/svr/finite-state-machines-in-react-js-using-xstate/) by [Sooraj Nair](https://www.linkedin.com/in/sooraj-nair-a81543172/)

- [Vuex + XState](https://medium.com/@brockreece/vuex-xstate-4f9ea23bb24e) by [Brock Reece](https://medium.com/@brockreece)

- [CodePen - XState Vue Login Page](https://codepen.io/ryanzola/pen/PMwoqe) by [Ryan Zola](https://codepen.io/ryanzola)

- [▶️ Standing on the Shoulders of Giants. Development with XState](https://www.youtube.com/watch?v=GuzcWkVrqLg) by Brad Woods

  - [Slides and more](https://www.atlassian.com/atlascamp/watch-sessions/2019/advanced-app-development/standing-on-the-shoulders-of-giants-development-with-xstate)

- [Getting Started with XState](https://www.vietnguyen.site/getting-started-with-xstate/) by Viet Nguyen

- [How to Effortlessly Model Async (React) with XState's Invoke](https://medium.com/@tahini/how-to-effortlessly-model-async-react-with-xstates-invoke-4c36dc8547b3) by Matthew Jones

- [XState 新手教學 - Finite State Machine](https://blog.jerry-hong.com/posts/xstate-tutorials-state-machine/?fbclid=IwAR14AL6nwxR5lb78CSABY18rOm2EA7I5f7uaErgZGC0ISmcJFri0VL91_xA) by Jerry Hong

- [XState 状态管理](https://blog.zfanw.com/xstate-state-management/) by 陈三

- [▶️ Aplicaciones React usando XState](https://www.youtube.com/watch?v=9P3sLqSiswE) by Luis César Contreras

- [Replacing Vuex with XState](https://dev.to/felix/replacing-vuex-with-xstate-3097) by [Felix Guerin](https://dev.to/felix)

- [Communicating with spawned and invoked XState actors in React](https://itnext.io/communicating-with-spawned-and-invoked-xstate-actors-in-react-999cca56506b) by Ismayil Khayredinov

- [GitLab - TDDing XState](https://gitlab.com/danbunea/tdding-xstate) by Dan Bunea

- [GitHub - XState Sample Kit](https://github.com/rjdestigter/xstate-sample-kit) by [@rjdestigter](https://github.com/rjdestigter)

- [▶️ How to Build a simple React App with XState](https://www.youtube.com/watch?v=g_2lt7bBwpk) by Tim Ermilov

- [XState: The new opportunity for web development](https://medium.com/yakindu/statecharts-a-new-path-for-the-future-of-web-development-9c8a8fb85717) by [@mschulte](https://medium.com/@mschulte_69595)

- [Undo/Redo in React Using XState](https://dev.to/robertbroersma/undo-redo-in-react-using-xstate-23j8) by [Robert](https://dev.to/robertbroersma)

  - [CodeSandbox demo](https://codesandbox.io/s/xstate-undo-redo-i3eiu)

- [State-driven interfaces with XState](https://blog.logrocket.com/state-driven-interfaces-with-xstate/) by [Brad Woods](https://blog.logrocket.com/author/bradwoods/)

- [React Single File Components with XState](https://dev.to/robertbroersma/react-single-file-components-with-xstate-19k4) by [Robert](https://dev.to/robertbroersma)

- [An Introduction to State Machines using XState](https://keyholesoftware.com/2020/03/30/an-introduction-to-state-machines-using-xstate/) by [Mat Warger](https://keyholesoftware.com/author/mwarger/)

  - [GitHub Demo](https://github.com/in-the-keyhole/xstate-demo)

- [Webinar - Visualize Application State with XState in JavaScript](https://www.youtube.com/watch?v=GhHh_9I6CXQ) by Dani Akash

- [Modeling parallel states in XState](https://dev.to/jacobmparis/modelling-parallel-states-in-xstate-3pe0) by [Jacob Paris](https://dev.to/jacobmparis)

  - [XState Text Formatting Part 2](https://dev.to/jacobmparis/xstate-text-formatting-part-2-32ma)

- [GitHub - a flipping cards game using XState](https://github.com/lednhatkhanh/xstate-flipping-cards-game) by [@lednhatkhanh](https://github.com/lednhatkhanh)

  - [Playable demo](https://xstate-flipping-cards-game.now.sh/)

- [GitHub - A Pac Man game, built with React, TypeScript, MobX, styled-components, and XState](https://github.com/stefanwille/pacman-react)

  - [Playable demo](https://pacman-react.netlify.app/)

- [GitHub - a small React, XState and Framer Motion demo](https://github.com/tanem/state-machines-in-react) by [@tanem](https://github.com/tanem)

- [GitHub - Autocomplete example with XState](https://github.com/krzysztofzuraw/xstate-autocomplete) by [@krzysztofzuraw](https://github.com/krzysztofzuraw)

- [GitHub - a Markdown Editor in Vue.js and XState](https://github.com/sarahdayan/markdown-editor-vue-xstate) by [Sarah Dayan](https://github.com/sarahdayan)

  - [Live Demo](https://nifty-yalow-295db4.netlify.app/)

- [Guidelines for State Machines and XState](https://kyleshevlin.com/guidelines-for-state-machines-and-xstate/) by [Kyle Shevlin](https://kyleshevlin.com)

- [A simple calculator using React and XState (statecharts)](https://github.com/diegoperezm/react-xstate-calc) by [diegoperezm](https://github.com/diegoperezm)

- [XState Chart Traffic Lights](https://github.com/howardmann/xstate/tree/master/traffic-light) by [@howardmann](https://github.com/howardmann)

  - [Demo link](http://xstatetrafficlight.surge.sh/)

  - [XState visualization](https://xstate.js.org/viz/?gist=1b9e1bcf75b1fed19190adc9f39b895e)

- [XState Minesweeper](https://github.com/lednhatkhanh/xstate-minesweeper) by [@lednhatkhanh](https://github.com/lednhatkhanh/xstate-minesweeper)

  - [Playable demo](https://xstate-minesweeper.now.sh/)

- [Tips and tricks of using XState for UI development](https://github.com/farskid/xstate.tips) by [@farskid](https://github.com/farskid)

  - [Link: XState.Tips](https://xstate.tips/)

- [Tic-Tac-Toe with Crank, XState, and TypeScript](https://github.com/mwarger/tic-tac-toe-crank-xstate-typescript) by [@warger](https://github.com/mwarger)

- [How To Build Finite State Machines using XState and React](https://www.ibrahima-ndaw.com/blog/xstate-react-finite-state-machine/) by [Ibrahima Ndaw](https://www.ibrahima-ndaw.com)

  - [Post on Dev.to](https://dev.to/ibrahima92/how-to-build-finite-state-machines-using-xstate-and-react-1o8g)

- [GitHub - Practical examples of statechart-based solutions with XState](https://github.com/DevanB/xstate-examples) by [@DevanB](https://github.com/DevanB)

- [▶️ Improving Application Predictability with XState](https://www.youtube.com/watch?v=MbS2TQj4Xsc) by [Sam Edwards](https://twitter.com/sjoedwards)

- [A front-end journey into XState](https://medium.com/@roberthigdon/a-front-end-journey-into-xstate-d13691b9165d) by [Robert Higdon](https://medium.com/@roberthigdon)

- [ThoughtWorks - XState in the Technology Radar for Languages & Frameworks](https://www.thoughtworks.com/radar/languages-and-frameworks/xstate)

- [XState and Svelte: initial setup](https://geoexamples.com/svelte/2020/05/08/xstate-svelte-I.html)

- [GitHub - Stripe Machine Example](https://github.com/JacobParis/stripe-machine-example): An animated stripe checkout using XState and React by [@JacobParis](https://github.com/JacobParis)

- [▶️ Creating a `useAutoSave` Hook - Part 5: Using XState](https://www.youtube.com/watch?v=JPgd1RG-rOk) by [Brooks Lybrand](https://twitter.com/BrooksLybrand)

  - [CodeSandbox](https://codesandbox.io/s/useautosavefinal-xhsyx?file=/src/useAutoSave-5.js)

- [▶️ Authentication statechart in XState](https://www.youtube.com/watch?v=lIge4KWq6Xc) by [Brooks Lybrand](https://twitter.com/BrooksLybrand)

- [Drag & Drop State Machine! Learning XState with David](https://www.youtube.com/watch?v=osaszd2aU9U) on the [Keyframers](https://twitter.com/keyframers)

- [▶️ Isaac && Zack Code Jam #2: State Machines and XState](https://www.youtube.com/watch?v=emAUbr0XHqg)

  - [▶️ Part 3](https://www.youtube.com/watch?v=R2vzzuUkjV0)

- [Improving state representation by using XState in React](https://www.youtube.com/watch?v=hG3UHNCUdzQ) by [Jon Major Condon](https://www.youtube.com/channel/UCQB-QsEnKCvJX4e_ms9XvHA)

- [Remake of the 100 squares game](https://onehundred.now.sh/) by [@nikpundik](https://twitter.com/nikpundik)

  - [Tweet with demo](https://twitter.com/nikpundik/status/1268936078737670145)

- [Intro to XState - a true state management library for React](https://medium.com/@pavlo_lompas/intro-to-xstate-a-true-state-management-system-library-for-react-d8c0051c71e4) by [Pavlo Lompas](https://medium.com/@pavlo_lompas)

- [Multistep form handling with Finite State Machines, Formik and TypeScript](https://thewidlarzgroup.com/multistep-form-xstate-formik/) by Daniel Grychtoł

- [CodeSandbox - XState Login & Sign Up Forms](https://codesandbox.io/s/xstate-login-sign-up-forms-yzzoc) by [Jamie Mason](https://github.com/JamieMason)

- [Introduction to XState](https://flaviocopes.com/xstate/) by [Flavio Copes](https://flaviocopes.com/)

- [▶️ Autocomplete, XState, and anything in between](https://www.youtube.com/watch?v=7CP-OUcUq2Q) by [Krzysztof Żuraw](https://krzysztofzuraw.com)

- [▶️ How to add an XState machine conf to a project](https://www.youtube.com/watch?v=A0bLzjQdZPU) by [Diego Perez](https://www.youtube.com/channel/UCxr-10LjbO-CTiPRcCLyRyg)

- [▶️ Part 1: Tic-tac-toe - Let's build (using JavaScript, React, Cypress and XState)](https://www.youtube.com/watch?v=uVySNh6ud2w)

  - [▶️ Part 2](https://www.youtube.com/watch?v=LtqTNATLIlY)

  - [▶️ Part 3](https://www.youtube.com/watch?v=t5WU1oZeBQw)

- [Learn and Apply XState with Vonage Video](https://dev.to/vonagedev/learn-and-apply-xstate-with-vonage-video-5dfg) by [Kelly Andrews](https://dev.to/kellyjandrews)

  - [Article on Nexmo.com](https://www.nexmo.com/blog/2020/07/01/learn-and-apply-xstate-with-vonage-video)

- [Starting with State Machines and XState!](https://dev.to/jasmin/starting-with-state-machine-and-xstate-1972) by [Jasmin Virdi](https://dev.to/jasmin)

  - [Todo App with XState and Vue composition API](https://dev.to/jasmin/starting-with-state-machine-and-xstate-1972)

- [Comparing state machines: XState vs. Robot](https://blog.logrocket.com/comparing-state-machines-xstate-vs-robot/) by [Samaila Bala](https://blog.logrocket.com/author/samailabala/)

- [Hello XState Part 1: Learning state machines for frontend web development](https://dev.to/ekafyi/hello-xstate-learning-state-machines-for-frontend-web-development-5bin) by [Eka](https://dev.to/ekafyi)

  - [Hello XState Part 2: Exploring the XState Viz example](https://dev.to/ekafyi/hello-xstate-part-2-exploring-the-xstate-viz-example-1nc1)

  - [Hello XState Part 3: Writing my first state machines (and washing my hands)](https://dev.to/ekafyi/hello-xstate-part-3-writing-my-first-state-machines-and-washing-my-hands-for-20-seconds-23p)

- [▶️ The Actor Model | XState part 1](https://www.youtube.com/watch?v=4CLdNeetVHw) by [@bisvarup](https://bisvarup.me/)

  - [CodeSandbox example](https://codesandbox.io/s/ancient-framework-bvw61?file=/src/App.js)

- [Intro: XState and State Machines (React)](https://medium.com/@d_danailov/intro-sstate-and-state-machines-react-3b873a6a713d) by [Dimitar Danailov](https://medium.com/@d_danailov)

- [▶️ Learning XState with Lauren](https://www.youtube.com/watch?v=h5H1ZmjMDE4) on Lauren Learns Things

- [XState, React, and TypeScript - how to get it working](https://dev.to/mpocock1/xstate-react-and-typescript-how-to-get-it-working-4p18) by [Matt Pocock](https://dev.to/mpocock1)

- [XState Pizza Wizard!](https://www.youtube.com/watch?v=JauJhGTBFsc) by [Jack Herrington](https://github.com/jherr)

  - [GitHub - Code](https://github.com/jherr/xstate-pizza-orderer)

- [SWR-Style Fetching with XState State Machines](https://imfeld.dev/writing/swr_with_xstate) by [Daniel Imfeld](https://imfeld.dev)

- [Slides - Working with State Machines in Angular](https://slides.com/stli/xstate-angular-nl) with XState by [Stefanos Lignos](https://twitter.com/stefanos_lig)

- [Firebase authentication with XState and Svelte](https://codechips.me/firebase-authentication-with-xstate-and-svelte/) by [@codechips](https://github.com/codechips)

  - [GitHub - code](https://github.com/codechips/svelte-firebase-auth-xstate-example)

- [▶️ Model Based Testing with XState | Why It's Great | Part 1](https://www.youtube.com/watch?v=tkxH7o-n9sI) by [John Bales](https://www.youtube.com/channel/UCVYw7ad200ZmvsZ0BVC9YvA)

  - [▶️ Model Based Testing with XState | The Basics | Part 2](https://www.youtube.com/watch?v=9_dWCweA8Pk)

  - [▶️ Model Based Testing with XState | Path Generation with Context | Part 3](https://www.youtube.com/watch?v=9gQulfnG7HM)

- [▶️ Mini Introducción a XState](https://www.youtube.com/watch?v=brMpOOAOUZ4) by [Michell Ayala](https://www.youtube.com/channel/UCBXo5FFDCtNoddUOqZuWX7w)

  - [▶️ React + XState](https://www.youtube.com/watch?v=Z7LIsZfQ4LU)

- [Testing XState with React Testing Library](https://dev.to/joepurnell1/testing-xstate-with-react-testing-library-26kh) by [Joe Purnell](https://dev.to/joepurnell1)

- [▶️ Easy Introduction to XState in React | States, Transitions, Guards, and (Actions](https://www.youtube.com/watch?v=PRwDOSjIFg8) by [Bhargav Ponnapalli](https://www.youtube.com/channel/UC4gKWR53xDzybMwm8Y61ukA)

- [▶️ State-driven Interfaces with XState](https://www.youtube.com/watch?v=bPUgBHFfQdI) on [Mozilla Indonesia](https://www.youtube.com/channel/UCUwngm8TCj0mhsvKTO2q5fQ)

- [▶️ Virtual Lunch & Learn: Let's build an app using Svelte, TypeScript, XState and Tailwind](https://www.youtube.com/watch?v=-FiN2Svpk2s) by Anders Bech Mellson

- [▶️ Refactoring with XState - Part 1](https://www.youtube.com/watch?v=hZ1vaMJnKx0) by [VigsCodes](https://www.youtube.com/channel/UCAFlrYILud3-3MCs8nsDiAA)

- [State machines in Production](https://moduscreate.com/blog/state-machines-in-production/) by [Ivan Kovic](https://twitter.com/kobeljic)

- [When your brain is breaking, try XState](https://swizec.com/blog/when-your-brain-is-breaking-try-xstate) by [@swizec](https://swizec.com)

- [GitHub - Cypress Real-World App](https://github.com/cypress-io/cypress-realworld-app)

- [State Machines For Everyone](https://medium.com/well-red/state-machines-for-everyone-part-1-introduction-b7ac9aaf482e) by [Alex Dodge](https://medium.com/@alexmdodge)

- [My First Machine, Getting Started with XState and Angular](https://calebukle.com/blog/my-first-machine-getting-started-with-xstate-and-angular) by [Caleb Ukle](https://calebukle.com)

- [▶️ Reducing state complexity with XState](https://www.youtube.com/watch?v=CpxL-4oIZPw) by [Kishore](www.github.com/pkishoez)

- [Finite State Machines in React JS using XState JS](https://dev.to/soorajsnblaze333/finite-state-machines-in-react-js-using-xstate-36ho) by [Sooraj](https://dev.to/soorajsnblaze333)

- [▶️ Managing UI Complexity with Statecharts (playlist)](https://www.youtube.com/playlist?list=PLsVj0cy-DbErFraf3KeAUbzVl-OKyBZ0-)

- [How State Machines Saved Our Bacon 🥓](https://www.ianjones.us/xstate-saves-our-bacon) by [Ian Jones](https://www.ianjones.us/)

- [Refactoring a useReducer to XState, Part 1](https://swizec.com/blog/refactoring-a-usereducer-to-xstate-pt1-codewithswiz-11/) by [@swizec](https://swizec.com)

- [▶️ XState and React](https://www.youtube.com/watch?v=pclR8Q5mbNI) on [Leniolabs](https://www.youtube.com/channel/UCcRg2Au0LLtEcakG9fg6VXg)

  - [CodeSandbox example](https://codesandbox.io/s/small-sea-t5mce?file=/pages/index.js/)

- [How to write tests for XState](https://swizec.com/blog/how-to-write-tests-for-xstate-codewithswiz-12/) by [@swizec](https://swizec.com)

- [Create-React-App Template with XState](https://github.com/kwdowik/cra-template-xstate) by [Kacper Wdowik](https://github.com/kwdowik)

- [XState and State Machines in VueJS](https://www.youtube.com/watch?v=8y9wUwJvdGs) by [Constantin Druc](https://www.youtube.com/channel/UCsMdRMBnxIVO0K_YS0KHiMA)

- [Tes en Línea: React, TypeScript, XState, fp-ts & CSS Grid (esp)](https://medium.com/codingedgar/tes-en-l%C3%ADnea-react-typescript-xstate-fp-ts-css-grid-esp-1373236189d1) by [Edgar Rodriguez](https://medium.com/@codingedgar)

- [Supervising XState Machines with Redux](https://dev.to/rjdestigter/supervising-xstate-machines-with-redux-277d) by [John de Stigter](https://dev.to/rjdestigter)

- [Working with non-user asynchronous events in model based tests with XState](https://dev.to/rjdestigter/working-with-non-user-asynchronous-events-in-model-based-tests-with-xstate-58ek) by [John de Stigter](https://dev.to/rjdestigter)

- [Model based UI tests with XState, Cypress, Puppeteer & more](https://dev.to/rjdestigter/model-based-ui-tests-with-xstate-cypress-puppeteer-more-268d) by [John de Stigter](https://dev.to/rjdestigter)

- [Thoughts on State Management with XState and ReactJS](https://dev.to/rjdestigter/thoughts-on-state-management-with-xstate-and-reactjs-3d19) by [John de Stigter](https://dev.to/rjdestigter)

- [▶️ Tutorial of C++ Code Generator for XState State Machine engine](https://www.youtube.com/watch?v=DnuJFUR1SgA) by [Andrew Shuvalov](https://www.youtube.com/channel/UCHFfZT1QM-vnqSZKtrT0e6g)

  - [▶️ Part 2](https://www.youtube.com/watch?v=8TTfRrmNu0s)

  - [▶️ Part 3](https://www.youtube.com/watch?v=HoH68709Sq8)

  - [GitHub Project](https://github.com/shuvalov-mdb/xstate-cpp-generator)

- [React context without context, using XState – CodeWithSwiz 14, 15](https://swizec.com/blog/react-context-without-context-using-xstate-codewithswiz-14-15) by [@swizec](https://swizec.com)

- [State Machines Workshop with XState](https://github.com/ooade/state-machines-workshop) by [Ademola (@ooade)](https://github.com/ooade)

- [▶️ Finite State Machines in Vue 3](https://www.youtube.com/watch?v=fT9p9CCSrn8) by [Sarah Dayan](https://twitter.com/frontstuff_io)

- [▶️ Frontend is Rocket Science - How to use XState in Vue 3 Now!](https://www.youtube.com/watch?v=wRktleOGKS4) by [Aleksej Dix](https://twitter.com/aleksejdix)

- [▶️ React Wednesdays: XState and JavaScript State Machines](https://www.youtube.com/watch?v=1TT2ymkYGyM)

- [▶️ Declarative and manageable state management with XState](https://www.youtube.com/watch?v=jCbV5aELY6A) on Decoupled Days

- [▶️ Modeling a Voicemail Widget with XState](https://www.youtube.com/watch?v=D6LzWcV_-14) by [Constantin Druc](https://www.youtube.com/channel/UCsMdRMBnxIVO0K_YS0KHiMA)

- [XState Brain Teaser #1 - Auth Flow](https://dev.to/mpocock1/xstate-brain-teaser-1-auth-flow-2jhl) by [Matt Pocock](https://twitter.com/mpocock1)

- [▶️ Learning XState by refactoring an old project](https://fvsch.com/learning-xstate) by [Florens Verschelde](https://fvsch.com/)

  - [Article](https://fvsch.com/learning-xstate)

- [Creating State Machines in JavaScript with XState](https://nisimdor.medium.com/creating-state-machines-in-javascript-with-xstate-21e1599521be) by [Dor Nisim](https://nisimdor.medium.com/)

- ["Just Use Props": An opinionated guide to React and XState](https://dev.to/mpocock1/just-use-props-an-opinionated-guide-to-react-and-xstate-fc9) by [Matt Pocock](https://dev.to/mpocock1)

- [Usando XState y React para hacer peticiones HTTP (en español)](https://www.youtube.com/watch?v=Wo-rVyAsz-Q) by [GCD Coder](https://www.youtube.com/channel/UCwkisgTJdCx3mNZMaaHAaVA)

- [Infinite Scrolling con Svelte, IntersectionObserver & XState (en español)](https://www.youtube.com/watch?v=GMXrwrG0cL4) by [GCD Coder](https://www.youtube.com/channel/UCwkisgTJdCx3mNZMaaHAaVA)

- [▶️ Getting Started with XState in Vue 3](https://www.youtube.com/watch?v=g4YnmydXMP8) by [JacoboCode](https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q)

- [▶️ Typing XState in Vue 3](https://www.youtube.com/watch?v=7tT45eRmyJE) by [JacoboCode](https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q)

- [Infinite Scrolling with Svelte 3, XState and IntersectionObserver](https://dev.to/gcdcoder/infinite-scrolling-with-svelte-3-xstate-and-intersectionobserver-127j) by [Gustavo Castillo](https://dev.to/gcdcoder)

- [Untangle complex flows in your React Native app with XState](https://medium.com/welld-tech/untangle-complex-flows-in-your-react-native-app-with-xstate-1b11d0b8a91f) by [Simone D'Avico](https://sdavico.medium.com/)

- [Integrate XState with React Native and React Navigation](https://medium.com/welld-tech/integrate-xstate-with-react-native-and-react-navigation-21ead87391da) by [Simone D'Avico](https://sdavico.medium.com/)

- [Testing XState machines in your React Native app](https://medium.com/welld-tech/testing-xstate-machines-in-your-react-native-app-236fb01bf5b8) by [Simone D'Avico](https://sdavico.medium.com/)

- [An Introduction to Finite State Machines: Simplifying React State Management with State Machines](https://soshace.com/an-introduction-to-finite-state-machines-simplifying-react-state-management-with-state-machines/) by [Bradley Kofi](https://soshace.com/author/bradstarart/)

- [An Introduction to XState in TypeScript](https://medium.com/giant-machines/an-introduction-to-xstate-in-typescript-e71c7729ce88) by [Neeraj Khosla

  ](https://medium.com/@n.khosla91)

- [▶️ XState - Global state in React](https://www.youtube.com/watch?v=1kJcnFBrk2I) by [Matt Pocock](https://twitter.com/mpocock1)

- [▶️ XState Introduction](https://www.youtube.com/watch?v=clu2bqjk3c0) on [For Those Who Code](https://www.youtube.com/channel/UCS3-MF_4ADqglU2OSly4vIw)

- [Future of state management in React with XState](https://blog.jskoneczny.pl/post/future-of-state-management-in-react-with-xstate) by [Jakub Skoneczny](https://blog.jskoneczny.pl/)

- [▶️ Custom Svelte Store: XState as Svelte store](https://www.youtube.com/watch?v=NIfQsc5XAzU) by [lihautan](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ)

- [▶️ Finite State Machine on Frontend](https://www.youtube.com/watch?v=gCT-lCYYhf4) by [Eugenia Zigisova](https://twitter.com/jevgeniazi)

- [#1 Introduction to XState in React](https://blog.imbhargav5.com/1-introduction-to-xstate-in-react) by [Bhargav Ponnapalli](https://blog.imbhargav5.com/)

- [▶️ Modelling application behaviour with the XState library (in React)](https://www.youtube.com/watch?v=paZ4ImyI1YQ) by [Marc Klefter](https://twitter.com/marcklefter)

- [Rsvp to weddings with XState](https://dev.to/droopytersen/rsvp-to-weddings-with-xstate-55nl) by [Andrew Peterson](https://dev.to/droopytersen)

- [▶️ XState and State Machines in Vue](https://tallpad.com/series/xstate-misc/episode/1)

- [Github - XState with React and Angular in Nx Workspace](https://github.com/nartc/nx-state-machine-todos-mvc) by [Chau Tran](https://nartc.me)

- [Boost your React application's performance by XState](https://dev.to/alirezavalizade/boost-your-react-application-s-performance-by-xstate-42p8) by [Alireza Valizade](https://dev.to/alirezavalizade)

- [Getting Started with XState, React, and Typescript | Part 1](https://www.youtube.com/watch?v=po1YRAk7irY) by [Modus Create](https://www.youtube.com/channel/UCsKwL0-e2eHRNa6Ne99AESw)

- [Frontend is Rocket Science – Managing state in any JavaScript Application](https://blog.oddeven.ch/blog/frontend-is-rocket-science-managing-state-in-any-javascript-application/) by [Aleksej Dix](https://twitter.com/aleksejdix)

- [▶️ Use State Machines to Build a Queue for Custom Twitch Overlays — Learn With Jason](https://www.youtube.com/watch?v=UzA5Mvk587M) by [Jason Lengstorf](https://www.youtube.com/channel/UCnty0z0pNRDgnuoirYXnC5A)

- [How to Use Finite State Machines in React](https://www.telerik.com/blogs/how-to-use-finite-state-machines-react) by [Leonardo Maldonado](https://www.telerik.com/blogs/author/leonardo-maldonado)

- [▶️ Maquinas de estado finito y gráficas de estado en React ](https://www.youtube.com/watch?v=Rm6AMY6-Wqw) by José L Narajo

- [XState: Should this be an action, or a service?](https://dev.to/mpocock1/xstate-should-this-be-an-action-or-a-service-2cp0) by [Matt Pocock](https://twitter.com/mpocock1)

- [State Machines: Should this be a state, or in context?](https://dev.to/mpocock1/state-machines-should-this-be-a-state-or-in-context-1d7e) by [Matt Pocock](https://twitter.com/mpocock1)

- [XState: What's the difference between Machine and createMachine?](https://dev.to/mpocock1/xstate-what-s-the-difference-between-machine-and-createmachine-15h1) by [Matt Pocock](https://twitter.com/mpocock1)

- [Use an XState Machine with React](https://dev.to/jbranchaud/use-an-xstate-machine-with-react-326i) by [Josh Branchaud](https://twitter.com/jbrancha)

- [▶️ DevTrends: XState](https://devtrends.io/videos/xstate/) by [Anthony Gore](https://twitter.com/anthonygore)

- [XState: Street Lights with Pedestrian Crossing using Vue.js](https://codesandbox.io/s/stoic-thompson-ktzrl?file=/src/App.vue) by [Kevin Warrington](https://github.com/dubbs)

- [▶️ Front-end state management with XState](https://www.youtube.com/watch?v=Slb6M_rIn0M) by [Amy Pellegrini](https://twitter.com/amyvpellegrini)

- [▶️ Splitting the view and the brains in JS — state machines with XState (in French)](https://www.youtube.com/watch?v=yRB57CDvQuY) by [Aurelien Meunier](https://www.linkedin.com/in/aumeunier)

- [Using XState with Deno](https://gustavosantos.dev/a/using-xstate-with-deno) by [Bruno Quaresma](https://twitter.com/bruno__quaresma)

- [How to model application flows in React with finite state machines and XState](https://engineering.kablamo.com.au/posts/2021/finite-state-machines-and-xstate) by [Andrew McDowell](https://twitter.com/madole)

- [State-driven interfaces with XState](https://blog.logrocket.com/state-driven-interfaces-with-xstate/) - Brad Woods, Mar 2020

- [Redux is half of a pattern (1/2)](https://dev.to/davidkpiano/redux-is-half-of-a-pattern-1-2-1hd7) - David Khourshid, 2020

- [No, disabling a button is not app logic](https://dev.to/davidkpiano/no-disabling-a-button-is-not-app-logic-598i) - David Khourshid, 2019

- [The (Switch)-Case for State Machines in User Interfaces](https://24ways.org/2018/state-machines-in-user-interfaces/) - David Khourshid, 2018

- [Robust React User Interfaces with Finite State Machines](https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/) - David Khourshid, 2018

- [State Machines in React](https://mastery.games/post/state-machines-in-react/) - Dave Geddes

- [Finite State Machines in Vue](https://www.phillipparker.io/articles/finite-state-machines-in-vue) - Phillip Parker

- [24 days to learn statecharts #devadvent](https://dev.to/codingdive/introducing-state-machine-advent-24-bite-sized-blog-posts-about-state-machines-and-statecharts-2ce0) - series of 25 blog posts, Statecharts, Typescript

### Testing

- [Model-Based Testing in React with State Machines](https://css-tricks.com/model-based-testing-in-react-with-state-machines/) - David Khourshid, 2020

### Guides

- [Extensive examples of XState features with and without React.](https://bradwoods.io/guides/xstate-react) - Brad Woods ( Updated often )

### Usage & Examples

- [Examples modelling application state with statecharts](https://github.com/coodoo/xstate-examples)

- [XState Catalog - A collection of professionally designed state machines](https://xstate-catalogue.com/)

### Talks

- [▶️ David Khourshid - Coding Complex App Logic, Visually | Dec 7, 2022](https://www.youtube.com/watch?v=wgWwJSnhgDU) - Youtube, duration, 39:28

- [▶️ David Khourshid - XState: the Visual Future of State Management | Jul 4, 2021](https://www.youtube.com/watch?v=4Mue0Qr_apE) - Youtube, duration, 30:01

- [▶️ David Khourshid - Reactive State Machines and Statecharts | Uphill Conf 2019](https://www.youtube.com/watch?v=GSHQFx7PG20) - Youtube, duration 21:25

- [▶️ David Khourshid - Simplifying Complex UIs with Finite Automata & Statecharts | JSConf Iceland 2018](https://www.youtube.com/watch?v=RqTxtOXcv8Y) - Youtube, duration 34:27

- [▶️ David Khourshid - Reactive State Machines and Statecharts - ReactiveConf 2018](https://www.youtube.com/watch?v=DrHccvns-L0) Youtube, duration 28:50

- [▶️ David Khourshid - Infinitely Better UIs with Finite Automata - ReactRally 2017](https://www.youtube.com/watch?v=VU1NKX6Qkxc) Youtube, duration 25:32

- [▶️ XState - An introduction - Finite State Machines in React - Leigh Halliday](https://www.youtube.com/watch?v=iDZxjJYMOUQ) Youtube, duration 8:00

- [▶️ XState - Data Loading Service - Finite State Machines in React - Leigh Halliday](https://www.youtube.com/watch?v=XaHk9vhmus4) Youtube, duration 18:54

### Tools

- [XState PlantUML](https://github.com/mogsie/xstate-plantuml) by [Erik Mogensen](https://github.com/mogsie), given an XState definition (JS Object) of a statechart, this tool will output a plantuml source rendering of the statechart.

- [XState Chrome Devtool](https://chrome.google.com/webstore/detail/xstate-devtools/aamnodipnlopbknpklfoabalmobheehc) Inspect XState machines running in your app

- [XState Ninja](https://github.com/rlaffers/xstate-ninja) - a powerful devtool for inspecting multiple XState state machines at the same time

- [Sketch Systems](https://sketch.systems/) - design and understand state, export result to xState machine object

- [XState Codegen](https://github.com/mattpocock/xstate-codegen) - generate 100% typesafe Typescript code with a CLI

### Dig deeper into Statecharts

- [Statecharts - A Visual Formalism For Complex Systems](https://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/resources/statecharts.pdf) (PDF) - David Harel, 1984

- [World of Statecharts](https://statecharts.github.io/) a comprehensive guide by [Erik Mogensen](https://github.com/mogsie) in using statecharts in your applications

- [Statechart Autocoding for NASA's Curiosity Rover](https://blog.nomagic.com/statechart-autocoding-curiosity-rover/), model based systems engineering

- [A humble repo to collect knowledge on state machines.](https://github.com/achou11/state-machines) - Andrew Chou

### Dive deeper into State Machines

- [How I Learned to Stop Worrying and ❤️ the State Machine](http://raganwald.com/2018/02/23/forde.html) - Reginald Braithwaite, 2018

- [You are managing state? Think twice.](https://krasimirtsonev.com/blog/article/managing-state-in-javascript-with-state-machines-stent) - Krasimir Tsonev, 2017

- [A composable pattern for pure state machines with effects (draft v3) ](https://gist.github.com/andymatuschak/d5f0a8730ad601bcccae97e8398e25b2) - Andy Matuschak, 2016

- [Creating CSS State machines](https://gist.github.com/davidkpiano/e715b59bef817d2146164add26a134b0) - David Khourshid

- [Why Developers Never Use State Machines](https://skorks.com/2011/09/why-developers-never-use-state-machines/) - Alan Skorkin, 2018

- [Why developers should be force-fed state machines](https://engineering.shopify.com/blogs/engineering/17488160-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](https://gist.github.com/coodoo/0a7658a6c6580cb11101a9c22904d425) - Jeremy Lu (StateKit)

**Other great courses and guides:**

- [Egghead - Introduction to State Machines Using XState](https://egghead.io/courses/introduction-to-state-machines-using-xstate) by [Kyle Shevlin](https://twitter.com/kyleshevlin)

  - [GitHub - Course Notes](https://github.com/eggheadio-projects/introduction-to-state-machines-using-xstate-notes)

  - [GitHub - Workshop](https://github.com/kyleshevlin/intro-to-state-machines-and-xstate-workshop)

- [Egghead - Construct Sturdy UIs with XState](https://egghead.io/courses/construct-sturdy-uis-with-xstate) by [Isaac Mann](https://twitter.com/MannIsaac)

- [XState Guide](https://examples.bradwoods.io/xstate) by [Brad Woods](https://twitter.com/bradwoodsio)

## Podcasts

- [🎙 (React Podcast) 5: Finite State Machines with David Khourshid](https://reactpodcast.com/episodes/5)

- [🎙 (React Podcast) 83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration](https://reactpodcast.com/episodes/83)

- [🎙 (Full Stack Radio) 130: David Khourshid - Building Better UI Components with State Machines](https://fullstackradio.com/130)

- [🎙 (Chats with Kent) Make Your Apps Resilient Using Finite State Machines With David Khourshid](https://kentcdodds.com/chats-with-kent-podcast/seasons/01/episodes/make-your-apps-resilient-finite-state-machines-with-david-khourshid)

- [🎙 (React Round-Up) 069: The State Machines in React with David Khourshid](https://devchat.tv/react-round-up/rru-069-the-state-machines-in-react-with-david-khourshid/)

- [🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid](https://shoptalkshow.com/327-working-state-machines/)

- [🎙 (Egghead.io Podcast) 11: Introduction To State Machines And XState With Kyle Shevlin](https://egghead.io/podcasts/introduction-to-state-machines-and-xstate-with-kyle-shevlin)

- [🎙 (Syntax.FM) 206: State Machines, CSS and Animations with David K Piano](https://syntax.fm/show/206/state-machines-css-and-animations-with-david-k-piano)

- [🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid](https://modernweb.podbean.com/e/s07e20-modern-web-podcast-building-state-machines-using-xstate-with-david-khourshid/)

  - [▶️ Video](https://www.youtube.com/watch?v=uLlQjp5u2KQ)