{"id":13601493,"url":"https://github.com/darrylhebbes/awesome_xstate","last_synced_at":"2025-04-11T04:30:59.876Z","repository":{"id":49562748,"uuid":"247447471","full_name":"darrylhebbes/awesome_xstate","owner":"darrylhebbes","description":"Everything awesome about XState","archived":false,"fork":false,"pushed_at":"2023-01-02T09:24:05.000Z","size":137,"stargazers_count":182,"open_issues_count":0,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-22T15:11:24.361Z","etag":null,"topics":["finite-state-machines","statecharts","xstate","xstate-talks"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/darrylhebbes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-15T10:50:33.000Z","updated_at":"2024-05-07T13:14:20.000Z","dependencies_parsed_at":"2023-02-01T02:16:10.240Z","dependency_job_id":null,"html_url":"https://github.com/darrylhebbes/awesome_xstate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrylhebbes%2Fawesome_xstate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrylhebbes%2Fawesome_xstate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrylhebbes%2Fawesome_xstate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darrylhebbes%2Fawesome_xstate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darrylhebbes","download_url":"https://codeload.github.com/darrylhebbes/awesome_xstate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223382008,"owners_count":17136292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["finite-state-machines","statecharts","xstate","xstate-talks"],"created_at":"2024-08-01T18:01:03.573Z","updated_at":"2024-11-07T04:30:57.397Z","avatar_url":"https://github.com/darrylhebbes.png","language":null,"funding_links":[],"categories":["Others","Other Lists"],"sub_categories":["TeX Lists"],"readme":"## Awesome XState\n\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\nA collection of awesome resources regarding the XState library and Statecharts.\n\n[Official Code Repository](https://github.com/statelyai/xstate)\n\n### XState\n\n\u003e XState is a library for creating, interpreting, and executing statecharts. Statecharts are a formalism for modeling stateful, reactive systems. - David Khourshid\n\n#### Main Resources\n\n- [XState Official Website](https://xstate.js.org)\n- [XState Documentation](https://xstate.js.org/docs)\n- [XState Resources](https://xstate.js.org/docs/about/resources.html)\n- [XState on GitHub](https://github.com/davidkpiano/xstate)\n- [XState Community / Forum](https://spectrum.chat/statecharts)\n- [XState Catalogue](https://xstate-catalogue.com/) a collection of professionally designed state machines you can drop into your projects\n\n### Concepts\n\n- [Stackoverflow: What is an actual difference between redux and a state machine (e.g. xstate)?](https://stackoverflow.com/a/54521035)\n- [Erik Mogensen - Welcome to the world of Statecharts](https://statecharts.github.io/)\n- [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\n\n### Projects\n\n#### Vue\n\n- [Glutnix/xstate-vue-calculator](https://github.com/Glutnix/xstate-vue-calculator) - Calculator\n\n#### React\n\n- [voloshchenkoal/shinkei-suijaku](https://github.com/voloshchenkoal/shinkei-suijaku) - Card game\n- [davidkpiano/xstate-todomvc](https://github.com/davidkpiano/xstate-todomvc) - TodoMVC\n\n### Articles\n\n- [▶️ Front-end state management with Xstate - Amy Pellegrini | XConf Europe 2021](https://www.youtube.com/watch?v=Slb6M_rIn0M)\n- [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\n- [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\n- [My love letter to XState and statecharts ♥](https://dev.to/timdeschryver/my-love-letter-to-xstate-and-statecharts-287b) by Tim Deschryver\n- [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)\n- [Hyperapp demo with XState](https://github.com/johnkazer/hyperapp-xstate-demo) by [@johnkazer](https://github.com/johnkazer)\n- [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)\n- [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/)\n- [Vuex + XState](https://medium.com/@brockreece/vuex-xstate-4f9ea23bb24e) by [Brock Reece](https://medium.com/@brockreece)\n- [CodePen - XState Vue Login Page](https://codepen.io/ryanzola/pen/PMwoqe) by [Ryan Zola](https://codepen.io/ryanzola)\n- [▶️ Standing on the Shoulders of Giants. Development with XState](https://www.youtube.com/watch?v=GuzcWkVrqLg) by Brad Woods\n  - [Slides and more](https://www.atlassian.com/atlascamp/watch-sessions/2019/advanced-app-development/standing-on-the-shoulders-of-giants-development-with-xstate)\n- [Getting Started with XState](https://www.vietnguyen.site/getting-started-with-xstate/) by Viet Nguyen\n- [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\n- [XState 新手教學 - Finite State Machine](https://blog.jerry-hong.com/posts/xstate-tutorials-state-machine/?fbclid=IwAR14AL6nwxR5lb78CSABY18rOm2EA7I5f7uaErgZGC0ISmcJFri0VL91_xA) by Jerry Hong\n- [XState 状态管理](https://blog.zfanw.com/xstate-state-management/) by 陈三\n- [▶️ Aplicaciones React usando XState](https://www.youtube.com/watch?v=9P3sLqSiswE) by Luis César Contreras\n- [Replacing Vuex with XState](https://dev.to/felix/replacing-vuex-with-xstate-3097) by [Felix Guerin](https://dev.to/felix)\n- [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\n- [GitLab - TDDing XState](https://gitlab.com/danbunea/tdding-xstate) by Dan Bunea\n- [GitHub - XState Sample Kit](https://github.com/rjdestigter/xstate-sample-kit) by [@rjdestigter](https://github.com/rjdestigter)\n- [▶️ How to Build a simple React App with XState](https://www.youtube.com/watch?v=g_2lt7bBwpk) by Tim Ermilov\n- [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)\n- [Undo/Redo in React Using XState](https://dev.to/robertbroersma/undo-redo-in-react-using-xstate-23j8) by [Robert](https://dev.to/robertbroersma)\n  - [CodeSandbox demo](https://codesandbox.io/s/xstate-undo-redo-i3eiu)\n- [State-driven interfaces with XState](https://blog.logrocket.com/state-driven-interfaces-with-xstate/) by [Brad Woods](https://blog.logrocket.com/author/bradwoods/)\n- [React Single File Components with XState](https://dev.to/robertbroersma/react-single-file-components-with-xstate-19k4) by [Robert](https://dev.to/robertbroersma)\n- [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/)\n  - [GitHub Demo](https://github.com/in-the-keyhole/xstate-demo)\n- [Webinar - Visualize Application State with XState in JavaScript](https://www.youtube.com/watch?v=GhHh_9I6CXQ) by Dani Akash\n- [Modeling parallel states in XState](https://dev.to/jacobmparis/modelling-parallel-states-in-xstate-3pe0) by [Jacob Paris](https://dev.to/jacobmparis)\n  - [XState Text Formatting Part 2](https://dev.to/jacobmparis/xstate-text-formatting-part-2-32ma)\n- [GitHub - a flipping cards game using XState](https://github.com/lednhatkhanh/xstate-flipping-cards-game) by [@lednhatkhanh](https://github.com/lednhatkhanh)\n  - [Playable demo](https://xstate-flipping-cards-game.now.sh/)\n- [GitHub - A Pac Man game, built with React, TypeScript, MobX, styled-components, and XState](https://github.com/stefanwille/pacman-react)\n  - [Playable demo](https://pacman-react.netlify.app/)\n- [GitHub - a small React, XState and Framer Motion demo](https://github.com/tanem/state-machines-in-react) by [@tanem](https://github.com/tanem)\n- [GitHub - Autocomplete example with XState](https://github.com/krzysztofzuraw/xstate-autocomplete) by [@krzysztofzuraw](https://github.com/krzysztofzuraw)\n- [GitHub - a Markdown Editor in Vue.js and XState](https://github.com/sarahdayan/markdown-editor-vue-xstate) by [Sarah Dayan](https://github.com/sarahdayan)\n  - [Live Demo](https://nifty-yalow-295db4.netlify.app/)\n- [Guidelines for State Machines and XState](https://kyleshevlin.com/guidelines-for-state-machines-and-xstate/) by [Kyle Shevlin](https://kyleshevlin.com)\n- [A simple calculator using React and XState (statecharts)](https://github.com/diegoperezm/react-xstate-calc) by [diegoperezm](https://github.com/diegoperezm)\n- [XState Chart Traffic Lights](https://github.com/howardmann/xstate/tree/master/traffic-light) by [@howardmann](https://github.com/howardmann)\n  - [Demo link](http://xstatetrafficlight.surge.sh/)\n  - [XState visualization](https://xstate.js.org/viz/?gist=1b9e1bcf75b1fed19190adc9f39b895e)\n- [XState Minesweeper](https://github.com/lednhatkhanh/xstate-minesweeper) by [@lednhatkhanh](https://github.com/lednhatkhanh/xstate-minesweeper)\n  - [Playable demo](https://xstate-minesweeper.now.sh/)\n- [Tips and tricks of using XState for UI development](https://github.com/farskid/xstate.tips) by [@farskid](https://github.com/farskid)\n  - [Link: XState.Tips](https://xstate.tips/)\n- [Tic-Tac-Toe with Crank, XState, and TypeScript](https://github.com/mwarger/tic-tac-toe-crank-xstate-typescript) by [@warger](https://github.com/mwarger)\n- [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)\n  - [Post on Dev.to](https://dev.to/ibrahima92/how-to-build-finite-state-machines-using-xstate-and-react-1o8g)\n- [GitHub - Practical examples of statechart-based solutions with XState](https://github.com/DevanB/xstate-examples) by [@DevanB](https://github.com/DevanB)\n- [▶️ Improving Application Predictability with XState](https://www.youtube.com/watch?v=MbS2TQj4Xsc) by [Sam Edwards](https://twitter.com/sjoedwards)\n- [A front-end journey into XState](https://medium.com/@roberthigdon/a-front-end-journey-into-xstate-d13691b9165d) by [Robert Higdon](https://medium.com/@roberthigdon)\n- [ThoughtWorks - XState in the Technology Radar for Languages \u0026 Frameworks](https://www.thoughtworks.com/radar/languages-and-frameworks/xstate)\n- [XState and Svelte: initial setup](https://geoexamples.com/svelte/2020/05/08/xstate-svelte-I.html)\n- [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)\n- [▶️ Creating a `useAutoSave` Hook - Part 5: Using XState](https://www.youtube.com/watch?v=JPgd1RG-rOk) by [Brooks Lybrand](https://twitter.com/BrooksLybrand)\n  - [CodeSandbox](https://codesandbox.io/s/useautosavefinal-xhsyx?file=/src/useAutoSave-5.js)\n- [▶️ Authentication statechart in XState](https://www.youtube.com/watch?v=lIge4KWq6Xc) by [Brooks Lybrand](https://twitter.com/BrooksLybrand)\n- [Drag \u0026 Drop State Machine! Learning XState with David](https://www.youtube.com/watch?v=osaszd2aU9U) on the [Keyframers](https://twitter.com/keyframers)\n- [▶️ Isaac \u0026\u0026 Zack Code Jam #2: State Machines and XState](https://www.youtube.com/watch?v=emAUbr0XHqg)\n  - [▶️ Part 3](https://www.youtube.com/watch?v=R2vzzuUkjV0)\n- [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)\n- [Remake of the 100 squares game](https://onehundred.now.sh/) by [@nikpundik](https://twitter.com/nikpundik)\n  - [Tweet with demo](https://twitter.com/nikpundik/status/1268936078737670145)\n- [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)\n- [Multistep form handling with Finite State Machines, Formik and TypeScript](https://thewidlarzgroup.com/multistep-form-xstate-formik/) by Daniel Grychtoł\n- [CodeSandbox - XState Login \u0026 Sign Up Forms](https://codesandbox.io/s/xstate-login-sign-up-forms-yzzoc) by [Jamie Mason](https://github.com/JamieMason)\n- [Introduction to XState](https://flaviocopes.com/xstate/) by [Flavio Copes](https://flaviocopes.com/)\n- [▶️ Autocomplete, XState, and anything in between](https://www.youtube.com/watch?v=7CP-OUcUq2Q) by [Krzysztof Żuraw](https://krzysztofzuraw.com)\n- [▶️ 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)\n- [▶️ Part 1: Tic-tac-toe - Let's build (using JavaScript, React, Cypress and XState)](https://www.youtube.com/watch?v=uVySNh6ud2w)\n  - [▶️ Part 2](https://www.youtube.com/watch?v=LtqTNATLIlY)\n  - [▶️ Part 3](https://www.youtube.com/watch?v=t5WU1oZeBQw)\n- [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)\n  - [Article on Nexmo.com](https://www.nexmo.com/blog/2020/07/01/learn-and-apply-xstate-with-vonage-video)\n- [Starting with State Machines and XState!](https://dev.to/jasmin/starting-with-state-machine-and-xstate-1972) by [Jasmin Virdi](https://dev.to/jasmin)\n  - [Todo App with XState and Vue composition API](https://dev.to/jasmin/starting-with-state-machine-and-xstate-1972)\n- [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/)\n- [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)\n  - [Hello XState Part 2: Exploring the XState Viz example](https://dev.to/ekafyi/hello-xstate-part-2-exploring-the-xstate-viz-example-1nc1)\n  - [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)\n- [▶️ The Actor Model | XState part 1](https://www.youtube.com/watch?v=4CLdNeetVHw) by [@bisvarup](https://bisvarup.me/)\n  - [CodeSandbox example](https://codesandbox.io/s/ancient-framework-bvw61?file=/src/App.js)\n- [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)\n- [▶️ Learning XState with Lauren](https://www.youtube.com/watch?v=h5H1ZmjMDE4) on Lauren Learns Things\n- [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)\n- [XState Pizza Wizard!](https://www.youtube.com/watch?v=JauJhGTBFsc) by [Jack Herrington](https://github.com/jherr)\n  - [GitHub - Code](https://github.com/jherr/xstate-pizza-orderer)\n- [SWR-Style Fetching with XState State Machines](https://imfeld.dev/writing/swr_with_xstate) by [Daniel Imfeld](https://imfeld.dev)\n- [Slides - Working with State Machines in Angular](https://slides.com/stli/xstate-angular-nl) with XState by [Stefanos Lignos](https://twitter.com/stefanos_lig)\n- [Firebase authentication with XState and Svelte](https://codechips.me/firebase-authentication-with-xstate-and-svelte/) by [@codechips](https://github.com/codechips)\n  - [GitHub - code](https://github.com/codechips/svelte-firebase-auth-xstate-example)\n- [▶️ 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)\n  - [▶️ Model Based Testing with XState | The Basics | Part 2](https://www.youtube.com/watch?v=9_dWCweA8Pk)\n  - [▶️ Model Based Testing with XState | Path Generation with Context | Part 3](https://www.youtube.com/watch?v=9gQulfnG7HM)\n- [▶️ Mini Introducción a XState](https://www.youtube.com/watch?v=brMpOOAOUZ4) by [Michell Ayala](https://www.youtube.com/channel/UCBXo5FFDCtNoddUOqZuWX7w)\n  - [▶️ React + XState](https://www.youtube.com/watch?v=Z7LIsZfQ4LU)\n- [Testing XState with React Testing Library](https://dev.to/joepurnell1/testing-xstate-with-react-testing-library-26kh) by [Joe Purnell](https://dev.to/joepurnell1)\n- [▶️ 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)\n- [▶️ State-driven Interfaces with XState](https://www.youtube.com/watch?v=bPUgBHFfQdI) on [Mozilla Indonesia](https://www.youtube.com/channel/UCUwngm8TCj0mhsvKTO2q5fQ)\n- [▶️ Virtual Lunch \u0026 Learn: Let's build an app using Svelte, TypeScript, XState and Tailwind](https://www.youtube.com/watch?v=-FiN2Svpk2s) by Anders Bech Mellson\n- [▶️ Refactoring with XState - Part 1](https://www.youtube.com/watch?v=hZ1vaMJnKx0) by [VigsCodes](https://www.youtube.com/channel/UCAFlrYILud3-3MCs8nsDiAA)\n- [State machines in Production](https://moduscreate.com/blog/state-machines-in-production/) by [Ivan Kovic](https://twitter.com/kobeljic)\n- [When your brain is breaking, try XState](https://swizec.com/blog/when-your-brain-is-breaking-try-xstate) by [@swizec](https://swizec.com)\n- [GitHub - Cypress Real-World App](https://github.com/cypress-io/cypress-realworld-app)\n- [State Machines For Everyone](https://medium.com/well-red/state-machines-for-everyone-part-1-introduction-b7ac9aaf482e) by [Alex Dodge](https://medium.com/@alexmdodge)\n- [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)\n- [▶️ Reducing state complexity with XState](https://www.youtube.com/watch?v=CpxL-4oIZPw) by [Kishore](www.github.com/pkishoez)\n- [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)\n- [▶️ Managing UI Complexity with Statecharts (playlist)](https://www.youtube.com/playlist?list=PLsVj0cy-DbErFraf3KeAUbzVl-OKyBZ0-)\n- [How State Machines Saved Our Bacon 🥓](https://www.ianjones.us/xstate-saves-our-bacon) by [Ian Jones](https://www.ianjones.us/)\n- [Refactoring a useReducer to XState, Part 1](https://swizec.com/blog/refactoring-a-usereducer-to-xstate-pt1-codewithswiz-11/) by [@swizec](https://swizec.com)\n- [▶️ XState and React](https://www.youtube.com/watch?v=pclR8Q5mbNI) on [Leniolabs](https://www.youtube.com/channel/UCcRg2Au0LLtEcakG9fg6VXg)\n  - [CodeSandbox example](https://codesandbox.io/s/small-sea-t5mce?file=/pages/index.js/)\n- [How to write tests for XState](https://swizec.com/blog/how-to-write-tests-for-xstate-codewithswiz-12/) by [@swizec](https://swizec.com)\n- [Create-React-App Template with XState](https://github.com/kwdowik/cra-template-xstate) by [Kacper Wdowik](https://github.com/kwdowik)\n- [XState and State Machines in VueJS](https://www.youtube.com/watch?v=8y9wUwJvdGs) by [Constantin Druc](https://www.youtube.com/channel/UCsMdRMBnxIVO0K_YS0KHiMA)\n- [Tes en Línea: React, TypeScript, XState, fp-ts \u0026 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)\n- [Supervising XState Machines with Redux](https://dev.to/rjdestigter/supervising-xstate-machines-with-redux-277d) by [John de Stigter](https://dev.to/rjdestigter)\n- [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)\n- [Model based UI tests with XState, Cypress, Puppeteer \u0026 more](https://dev.to/rjdestigter/model-based-ui-tests-with-xstate-cypress-puppeteer-more-268d) by [John de Stigter](https://dev.to/rjdestigter)\n- [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)\n- [▶️ 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)\n  - [▶️ Part 2](https://www.youtube.com/watch?v=8TTfRrmNu0s)\n  - [▶️ Part 3](https://www.youtube.com/watch?v=HoH68709Sq8)\n  - [GitHub Project](https://github.com/shuvalov-mdb/xstate-cpp-generator)\n- [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)\n- [State Machines Workshop with XState](https://github.com/ooade/state-machines-workshop) by [Ademola (@ooade)](https://github.com/ooade)\n- [▶️ Finite State Machines in Vue 3](https://www.youtube.com/watch?v=fT9p9CCSrn8) by [Sarah Dayan](https://twitter.com/frontstuff_io)\n- [▶️ 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)\n- [▶️ React Wednesdays: XState and JavaScript State Machines](https://www.youtube.com/watch?v=1TT2ymkYGyM)\n- [▶️ Declarative and manageable state management with XState](https://www.youtube.com/watch?v=jCbV5aELY6A) on Decoupled Days\n- [▶️ Modeling a Voicemail Widget with XState](https://www.youtube.com/watch?v=D6LzWcV_-14) by [Constantin Druc](https://www.youtube.com/channel/UCsMdRMBnxIVO0K_YS0KHiMA)\n- [XState Brain Teaser #1 - Auth Flow](https://dev.to/mpocock1/xstate-brain-teaser-1-auth-flow-2jhl) by [Matt Pocock](https://twitter.com/mpocock1)\n- [▶️ Learning XState by refactoring an old project](https://fvsch.com/learning-xstate) by [Florens Verschelde](https://fvsch.com/)\n  - [Article](https://fvsch.com/learning-xstate)\n- [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/)\n- [\"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)\n- [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)\n- [Infinite Scrolling con Svelte, IntersectionObserver \u0026 XState (en español)](https://www.youtube.com/watch?v=GMXrwrG0cL4) by [GCD Coder](https://www.youtube.com/channel/UCwkisgTJdCx3mNZMaaHAaVA)\n- [▶️ Getting Started with XState in Vue 3](https://www.youtube.com/watch?v=g4YnmydXMP8) by [JacoboCode](https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q)\n- [▶️ Typing XState in Vue 3](https://www.youtube.com/watch?v=7tT45eRmyJE) by [JacoboCode](https://www.youtube.com/channel/UCcE2YngHoargpdjIzkCNY2Q)\n- [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)\n- [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/)\n- [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/)\n- [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/)\n- [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/)\n- [An Introduction to XState in TypeScript](https://medium.com/giant-machines/an-introduction-to-xstate-in-typescript-e71c7729ce88) by [Neeraj Khosla\n  ](https://medium.com/@n.khosla91)\n- [▶️ XState - Global state in React](https://www.youtube.com/watch?v=1kJcnFBrk2I) by [Matt Pocock](https://twitter.com/mpocock1)\n- [▶️ XState Introduction](https://www.youtube.com/watch?v=clu2bqjk3c0) on [For Those Who Code](https://www.youtube.com/channel/UCS3-MF_4ADqglU2OSly4vIw)\n- [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/)\n- [▶️ Custom Svelte Store: XState as Svelte store](https://www.youtube.com/watch?v=NIfQsc5XAzU) by [lihautan](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ)\n- [▶️ Finite State Machine on Frontend](https://www.youtube.com/watch?v=gCT-lCYYhf4) by [Eugenia Zigisova](https://twitter.com/jevgeniazi)\n- [#1 Introduction to XState in React](https://blog.imbhargav5.com/1-introduction-to-xstate-in-react) by [Bhargav Ponnapalli](https://blog.imbhargav5.com/)\n- [▶️ Modelling application behaviour with the XState library (in React)](https://www.youtube.com/watch?v=paZ4ImyI1YQ) by [Marc Klefter](https://twitter.com/marcklefter)\n- [Rsvp to weddings with XState](https://dev.to/droopytersen/rsvp-to-weddings-with-xstate-55nl) by [Andrew Peterson](https://dev.to/droopytersen)\n- [▶️ XState and State Machines in Vue](https://tallpad.com/series/xstate-misc/episode/1)\n- [Github - XState with React and Angular in Nx Workspace](https://github.com/nartc/nx-state-machine-todos-mvc) by [Chau Tran](https://nartc.me)\n- [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)\n- [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)\n- [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)\n- [▶️ 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)\n- [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)\n- [▶️ Maquinas de estado finito y gráficas de estado en React ](https://www.youtube.com/watch?v=Rm6AMY6-Wqw) by José L Narajo\n- [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)\n- [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)\n- [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)\n- [Use an XState Machine with React](https://dev.to/jbranchaud/use-an-xstate-machine-with-react-326i) by [Josh Branchaud](https://twitter.com/jbrancha)\n- [▶️ DevTrends: XState](https://devtrends.io/videos/xstate/) by [Anthony Gore](https://twitter.com/anthonygore)\n- [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)\n- [▶️ Front-end state management with XState](https://www.youtube.com/watch?v=Slb6M_rIn0M) by [Amy Pellegrini](https://twitter.com/amyvpellegrini)\n- [▶️ 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)\n- [Using XState with Deno](https://gustavosantos.dev/a/using-xstate-with-deno) by [Bruno Quaresma](https://twitter.com/bruno__quaresma)\n- [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)\n- [State-driven interfaces with XState](https://blog.logrocket.com/state-driven-interfaces-with-xstate/) - Brad Woods, Mar 2020\n- [Redux is half of a pattern (1/2)](https://dev.to/davidkpiano/redux-is-half-of-a-pattern-1-2-1hd7) - David Khourshid, 2020\n- [No, disabling a button is not app logic](https://dev.to/davidkpiano/no-disabling-a-button-is-not-app-logic-598i) - David Khourshid, 2019\n- [The (Switch)-Case for State Machines in User Interfaces](https://24ways.org/2018/state-machines-in-user-interfaces/) - David Khourshid, 2018\n- [Robust React User Interfaces with Finite State Machines](https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/) - David Khourshid, 2018\n- [State Machines in React](https://mastery.games/post/state-machines-in-react/) - Dave Geddes\n- [Finite State Machines in Vue](https://www.phillipparker.io/articles/finite-state-machines-in-vue) - Phillip Parker\n- [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\n\n### Testing\n\n- [Model-Based Testing in React with State Machines](https://css-tricks.com/model-based-testing-in-react-with-state-machines/) - David Khourshid, 2020\n\n### Guides\n\n- [Extensive examples of XState features with and without React.](https://bradwoods.io/guides/xstate-react) - Brad Woods ( Updated often )\n\n### Usage \u0026 Examples\n\n- [Examples modelling application state with statecharts](https://github.com/coodoo/xstate-examples)\n- [XState Catalog - A collection of professionally designed state machines](https://xstate-catalogue.com/)\n\n### Talks\n\n- [▶️ David Khourshid - Coding Complex App Logic, Visually | Dec 7, 2022](https://www.youtube.com/watch?v=wgWwJSnhgDU) - Youtube, duration, 39:28\n- [▶️ David Khourshid - XState: the Visual Future of State Management | Jul 4, 2021](https://www.youtube.com/watch?v=4Mue0Qr_apE) - Youtube, duration, 30:01\n- [▶️ David Khourshid - Reactive State Machines and Statecharts | Uphill Conf 2019](https://www.youtube.com/watch?v=GSHQFx7PG20) - Youtube, duration 21:25\n- [▶️ David Khourshid - Simplifying Complex UIs with Finite Automata \u0026 Statecharts | JSConf Iceland 2018](https://www.youtube.com/watch?v=RqTxtOXcv8Y) - Youtube, duration 34:27\n- [▶️ David Khourshid - Reactive State Machines and Statecharts - ReactiveConf 2018](https://www.youtube.com/watch?v=DrHccvns-L0) Youtube, duration 28:50\n- [▶️ David Khourshid - Infinitely Better UIs with Finite Automata - ReactRally 2017](https://www.youtube.com/watch?v=VU1NKX6Qkxc) Youtube, duration 25:32\n- [▶️ XState - An introduction - Finite State Machines in React - Leigh Halliday](https://www.youtube.com/watch?v=iDZxjJYMOUQ) Youtube, duration 8:00\n- [▶️ XState - Data Loading Service - Finite State Machines in React - Leigh Halliday](https://www.youtube.com/watch?v=XaHk9vhmus4) Youtube, duration 18:54\n\n### Tools\n\n- [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.\n- [XState Chrome Devtool](https://chrome.google.com/webstore/detail/xstate-devtools/aamnodipnlopbknpklfoabalmobheehc) Inspect XState machines running in your app\n- [XState Ninja](https://github.com/rlaffers/xstate-ninja) - a powerful devtool for inspecting multiple XState state machines at the same time\n- [Sketch Systems](https://sketch.systems/) - design and understand state, export result to xState machine object\n- [XState Codegen](https://github.com/mattpocock/xstate-codegen) - generate 100% typesafe Typescript code with a CLI\n\n### Dig deeper into Statecharts\n\n- [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\n- [World of Statecharts](https://statecharts.github.io/) a comprehensive guide by [Erik Mogensen](https://github.com/mogsie) in using statecharts in your applications\n- [Statechart Autocoding for NASA's Curiosity Rover](https://blog.nomagic.com/statechart-autocoding-curiosity-rover/), model based systems engineering\n- [A humble repo to collect knowledge on state machines.](https://github.com/achou11/state-machines) - Andrew Chou\n\n### Dive deeper into State Machines\n\n- [How I Learned to Stop Worrying and ❤️ the State Machine](http://raganwald.com/2018/02/23/forde.html) - Reginald Braithwaite, 2018\n- [You are managing state? Think twice.](https://krasimirtsonev.com/blog/article/managing-state-in-javascript-with-state-machines-stent) - Krasimir Tsonev, 2017\n- [A composable pattern for pure state machines with effects (draft v3) ](https://gist.github.com/andymatuschak/d5f0a8730ad601bcccae97e8398e25b2) - Andy Matuschak, 2016\n- [Creating CSS State machines](https://gist.github.com/davidkpiano/e715b59bef817d2146164add26a134b0) - David Khourshid\n- [Why Developers Never Use State Machines](https://skorks.com/2011/09/why-developers-never-use-state-machines/) - Alan Skorkin, 2018\n- [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\n- [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)\n\n**Other great courses and guides:**\n\n- [Egghead - Introduction to State Machines Using XState](https://egghead.io/courses/introduction-to-state-machines-using-xstate) by [Kyle Shevlin](https://twitter.com/kyleshevlin)\n  - [GitHub - Course Notes](https://github.com/eggheadio-projects/introduction-to-state-machines-using-xstate-notes)\n  - [GitHub - Workshop](https://github.com/kyleshevlin/intro-to-state-machines-and-xstate-workshop)\n- [Egghead - Construct Sturdy UIs with XState](https://egghead.io/courses/construct-sturdy-uis-with-xstate) by [Isaac Mann](https://twitter.com/MannIsaac)\n- [XState Guide](https://examples.bradwoods.io/xstate) by [Brad Woods](https://twitter.com/bradwoodsio)\n\n## Podcasts\n\n- [🎙 (React Podcast) 5: Finite State Machines with David Khourshid](https://reactpodcast.com/episodes/5)\n- [🎙 (React Podcast) 83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration](https://reactpodcast.com/episodes/83)\n- [🎙 (Full Stack Radio) 130: David Khourshid - Building Better UI Components with State Machines](https://fullstackradio.com/130)\n- [🎙 (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)\n- [🎙 (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/)\n- [🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid](https://shoptalkshow.com/327-working-state-machines/)\n- [🎙 (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)\n- [🎙 (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)\n- [🎙 (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/)\n  - [▶️ Video](https://www.youtube.com/watch?v=uLlQjp5u2KQ)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarrylhebbes%2Fawesome_xstate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarrylhebbes%2Fawesome_xstate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarrylhebbes%2Fawesome_xstate/lists"}