awesome_xstate
Everything awesome about XState
https://github.com/darrylhebbes/awesome_xstate
Last synced: about 23 hours ago
JSON representation
-
Awesome XState
-
Articles
- Communicating with spawned and invoked XState actors in React
- How to Effortlessly Model Async (React) with XState's Invoke
- XState 状态管理
- XState: The new opportunity for web development
- An Introduction to State Machines using XState
- Demo link
- A front-end journey into XState
- Tweet with demo
- Intro to XState - a true state management library for React
- My First Machine, Getting Started with XState and Angular
- ▶️ Managing UI Complexity with Statecharts (playlist)
- How State Machines Saved Our Bacon 🥓
- An Introduction to XState in TypeScript
- ▶️ XState and State Machines in Vue
- XState Minesweeper - minesweeper)
- Tips and tricks of using XState for UI development
- Hyperapp demo with XState
- Communicating with spawned and invoked XState actors in React
- GitLab - TDDing XState
- GitHub - XState Sample Kit
- GitHub Demo
- GitHub - a flipping cards game using XState
- GitHub - A Pac Man game, built with React, TypeScript, MobX, styled-components, and XState
- GitHub - a small React, XState and Framer Motion demo
- GitHub - Autocomplete example with XState
- GitHub - a Markdown Editor in Vue.js and XState
- A simple calculator using React and XState (statecharts)
- Tic-Tac-Toe with Crank, XState, and TypeScript
- GitHub - Practical examples of statechart-based solutions with XState
- GitHub - Stripe Machine Example
- GitHub - Code
- GitHub - code
- GitHub - Cypress Real-World App
- How State Machines Saved Our Bacon 🥓
- Create-React-App Template with XState
- GitHub Project
- State Machines Workshop with XState
- Communicating with spawned and invoked XState actors in React
- Github - XState with React and Angular in Nx Workspace
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- An Introduction to Finite State Machines: Simplifying React State Management with State Machines
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- ▶️ Standing on the Shoulders of Giants. Development with XState
- ▶️ Aplicaciones React usando XState
- My love letter to XState and statecharts ♥
- Creating a Complex IVR System with Ease with XState
- StackOverflow: What is an actual difference between redux and a state machine (e.g. xstate)?
- Vuex + XState
- CodePen - XState Vue Login Page
- Slides and more
- Getting Started with XState
- How to Effortlessly Model Async (React) with XState's Invoke
- XState 新手教學 - Finite State Machine
- XState 状态管理
- Replacing Vuex with XState
- Hello XState Part 2: Exploring the XState Viz example
- Communicating with spawned and invoked XState actors in React
- ▶️ Improving Application Predictability with XState
- XState: The new opportunity for web development
- Undo/Redo in React Using XState
- CodeSandbox demo
- React Single File Components with XState
- An Introduction to State Machines using XState
- Webinar - Visualize Application State with XState in JavaScript
- Modeling parallel states in XState
- XState Text Formatting Part 2
- Playable demo
- Playable demo
- ▶️ Creating a `useAutoSave` Hook - Part 5: Using XState
- Live Demo
- Guidelines for State Machines and XState
- ▶️ Authentication statechart in XState
- XState Chart Traffic Lights
- Demo link
- XState visualization
- Playable demo
- Link: XState.Tips
- ▶️ How to Build a simple React App with XState
- How To Build Finite State Machines using XState and React - ndaw.com)
- Post on Dev.to
- ▶️ Isaac && Zack Code Jam #2: State Machines and XState
- ▶️ Part 3
- ▶️ Autocomplete, XState, and anything in between
- A front-end journey into XState
- ThoughtWorks - XState in the Technology Radar for Languages & Frameworks
- ▶️ Part 1: Tic-tac-toe - Let's build (using JavaScript, React, Cypress and XState)
- ▶️ Part 2
- ▶️ Part 3
- CodeSandbox
- Drag & Drop State Machine! Learning XState with David
- Improving state representation by using XState in React - QsEnKCvJX4e_ms9XvHA)
- Remake of the 100 squares game
- Tweet with demo
- Intro to XState - a true state management library for React
- Multistep form handling with Finite State Machines, Formik and TypeScript
- CodeSandbox - XState Login & Sign Up Forms
- Introduction to XState
- Learn and Apply XState with Vonage Video
- Article on Nexmo.com
- Comparing state machines: XState vs. Robot
- Hello XState Part 1: Learning state machines for frontend web development
- Hello XState Part 3: Writing my first state machines (and washing my hands)
- ▶️ Learning XState with Lauren
- CodeSandbox example
- Intro: XState and State Machines (React)
- ▶️ Mini Introducción a XState
- XState, React, and TypeScript - how to get it working
- XState Pizza Wizard!
- ▶️ The Actor Model | XState part 1
- SWR-Style Fetching with XState State Machines
- Slides - Working with State Machines in Angular
- Firebase authentication with XState and Svelte
- ▶️ React + XState
- ▶️ Easy Introduction to XState in React | States, Transitions, Guards, and (Actions
- ▶️ State-driven Interfaces with XState
- ▶️ Virtual Lunch & Learn: Let's build an app using Svelte, TypeScript, XState and Tailwind
- ▶️ Refactoring with XState - Part 1 - 3MCs8nsDiAA)
- Testing XState with React Testing Library
- ▶️ Reducing state complexity with XState
- ▶️ XState and React
- Tes en Línea: React, TypeScript, XState, fp-ts & CSS Grid (esp)
- ▶️ Tutorial of C++ Code Generator for XState State Machine engine - vnqSZKtrT0e6g)
- State machines in Production
- When your brain is breaking, try XState
- State Machines For Everyone
- My First Machine, Getting Started with XState and Angular
- ▶️ Part 2
- Finite State Machines in React JS using XState JS
- ▶️ Managing UI Complexity with Statecharts (playlist)
- How State Machines Saved Our Bacon 🥓
- Refactoring a useReducer to XState, Part 1
- ▶️ Part 3
- How to write tests for XState
- ▶️ Finite State Machines in Vue 3
- XState and State Machines in VueJS
- ▶️ Frontend is Rocket Science - How to use XState in Vue 3 Now!
- Working with non-user asynchronous events in model based tests with XState
- Model based UI tests with XState, Cypress, Puppeteer & more
- Thoughts on State Management with XState and ReactJS
- ▶️ React Wednesdays: XState and JavaScript State Machines
- ▶️ Declarative and manageable state management with XState
- ▶️ Modeling a Voicemail Widget with XState
- React context without context, using XState – CodeWithSwiz 14, 15
- XState Brain Teaser #1 - Auth Flow
- Creating State Machines in JavaScript with XState
- "Just Use Props": An opinionated guide to React and XState
- ▶️ Getting Started with XState in Vue 3
- ▶️ Typing XState in Vue 3
- ▶️ XState - Global state in React
- ▶️ XState Introduction - MF_4ADqglU2OSly4vIw)
- Infinite Scrolling with Svelte 3, XState and IntersectionObserver
- Untangle complex flows in your React Native app with XState
- Integrate XState with React Native and React Navigation
- Testing XState machines in your React Native app
- An Introduction to XState in TypeScript
- ▶️ Custom Svelte Store: XState as Svelte store
- ▶️ Finite State Machine on Frontend
- Future of state management in React with XState
- ▶️ Modelling application behaviour with the XState library (in React)
- Frontend is Rocket Science – Managing state in any JavaScript Application
- #1 Introduction to XState in React
- ▶️ Use State Machines to Build a Queue for Custom Twitch Overlays — Learn With Jason
- Rsvp to weddings with XState
- ▶️ XState and State Machines in Vue
- Boost your React application's performance by XState
- Getting Started with XState, React, and Typescript | Part 1 - e2eHRNa6Ne99AESw)
- ▶️ Maquinas de estado finito y gráficas de estado en React
- ▶️ DevTrends: XState
- How to Use Finite State Machines in React - maldonado)
- XState: Should this be an action, or a service?
- State Machines: Should this be a state, or in context?
- XState: What's the difference between Machine and createMachine?
- Use an XState Machine with React
- ▶️ Splitting the view and the brains in JS — state machines with XState (in French)
- XState: Street Lights with Pedestrian Crossing using Vue.js
- Using XState with Deno
- How to model application flows in React with finite state machines and XState
- State-driven interfaces with XState - Brad Woods, Mar 2020
- Redux is half of a pattern (1/2) - David Khourshid, 2020
- No, disabling a button is not app logic - David Khourshid, 2019
- The (Switch)-Case for State Machines in User Interfaces - David Khourshid, 2018
- Robust React User Interfaces with Finite State Machines - David Khourshid, 2018
- State Machines in React - Dave Geddes
- Finite State Machines in Vue - Phillip Parker
- 24 days to learn statecharts #devadvent - series of 25 blog posts, Statecharts, Typescript
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- CodeSandbox example
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- A series of examples showing how to model application state with statechart using xstate - examples)
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- ▶️ How to add an XState machine conf to a project - 10LjbO-CTiPRcCLyRyg)
- ▶️ Model Based Testing with XState | Why It's Great | Part 1
- ▶️ Model Based Testing with XState | The Basics | Part 2
- ▶️ Model Based Testing with XState | Path Generation with Context | Part 3
- How State Machines Saved Our Bacon 🥓
- Infinite Scrolling con Svelte, IntersectionObserver & XState (en español)
- Usando XState y React para hacer peticiones HTTP (en español)
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Article
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Todo App with XState and Vue composition API
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Creating a Complex IVR System with Ease with XState
- Communicating with spawned and invoked XState actors in React
- Article on Nexmo.com
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- How State Machines Saved Our Bacon 🥓
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- An Introduction to State Machines using XState
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- ▶️ Front-end state management with Xstate - Amy Pellegrini | XConf Europe 2021
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Communicating with spawned and invoked XState actors in React
- Finite State Machines in React JS using XState - nair-a81543172/)
-
XState
-
Concepts
- Concepts, in official docs - Article touches on Finite State Machines, Statechart formailsm and the Actor model
- Concepts, in official docs - Article touches on Finite State Machines, Statechart formailsm and the Actor model
- Stackoverflow: What is an actual difference between redux and a state machine (e.g. xstate)?
- Erik Mogensen - Welcome to the world of Statecharts
-
Dive deeper into State Machines
- GitHub - Course Notes
- GitHub - Workshop
- XState Guide
- How I Learned to Stop Worrying and ❤️ the State Machine - Reginald Braithwaite, 2018
- You are managing state? Think twice. - Krasimir Tsonev, 2017
- Creating CSS State machines - David Khourshid
- Why Developers Never Use State Machines - Alan Skorkin, 2018
- Why developers should be force-fed state machines - Willem van Bergen (engineering at shopify) 2011
- The case for statechart and xstate -- why it matters and how we can benefit from it - Jeremy Lu (StateKit)
- Egghead - Introduction to State Machines Using XState
- Egghead - Construct Sturdy UIs with XState
- XState Guide
- A composable pattern for pure state machines with effects (draft v3) - Andy Matuschak, 2016
-
Projects
- Glutnix/xstate-vue-calculator - Calculator
- voloshchenkoal/shinkei-suijaku - Card game
- davidkpiano/xstate-todomvc - TodoMVC
-
Tools
- XState PlantUML
- XState Ninja - a powerful devtool for inspecting multiple XState state machines at the same time
- XState Codegen - generate 100% typesafe Typescript code with a CLI
- XState Chrome Devtool
- Sketch Systems - design and understand state, export result to xState machine object
-
Dig deeper into Statecharts
-
Talks
- ▶️ David Khourshid - Coding Complex App Logic, Visually | Dec 7, 2022 - Youtube, duration, 39:28
- ▶️ David Khourshid - XState: the Visual Future of State Management | Jul 4, 2021 - Youtube, duration, 30:01
- ▶️ David Khourshid - Reactive State Machines and Statecharts | Uphill Conf 2019 - Youtube, duration 21:25
- ▶️ David Khourshid - Infinitely Better UIs with Finite Automata - ReactRally 2017
- ▶️ XState - An introduction - Finite State Machines in React - Leigh Halliday
- ▶️ XState - Data Loading Service - Finite State Machines in React - Leigh Halliday
- ▶️ David Khourshid - Simplifying Complex UIs with Finite Automata & Statecharts | JSConf Iceland 2018 - Youtube, duration 34:27
- ▶️ David Khourshid - Reactive State Machines and Statecharts - ReactiveConf 2018
-
Testing
- Model-Based Testing in React with State Machines - David Khourshid, 2020
-
Guides
- Extensive examples of XState features with and without React. - Brad Woods ( Updated often )
-
-
Podcasts
-
Dive deeper into State Machines
- 🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid
- 🎙 (React Podcast) 5: Finite State Machines with David Khourshid
- 🎙 (React Podcast) 83: David Khourshid on XState, Statecharts, and the Future of Designer—Coder Collaboration
- 🎙 (Full Stack Radio) 130: David Khourshid - Building Better UI Components with State Machines
- 🎙 (Chats with Kent) Make Your Apps Resilient Using Finite State Machines With David Khourshid
- 🎙 (React Round-Up) 069: The State Machines in React with David Khourshid
- 🎙 (ShopTalk Show) 327: Working with State Machines with Jon Bellah and David Khourshid
- 🎙 (Egghead.io Podcast) 11: Introduction To State Machines And XState With Kyle Shevlin
- 🎙 (Syntax.FM) 206: State Machines, CSS and Animations with David K Piano
- 🎙 (Modern Web) S07E20: Building State Machines using XState with David Khourshid
- ▶️ Video
-
Programming Languages
Categories
Sub Categories
Keywords
xstate
12
typescript
7
state-machine
7
react
6
statecharts
3
statechart
3
state-management
3
state-machines
3
fsm
3
state
2
scxml
2
javascript
2
interpreter
2
visualizer
2
vue
2
component-testing
1
reactjs
1
rmwc
1
rxjs
1
storybook
1
typedoc
1
code-coverage
1
xstate-test
1
api-testing
1
puppeteer-jest
1
puppeteer
1
material-components-web
1
jest
1
io-ts
1
i18next
1
fp-ts
1
workflow
1
orchestration
1
finite-state-machine
1
background-jobs
1
pacman
1
styled-components
1
animation
1
framer-motion
1
autocomplete
1
playground
1
tips
1
state-charts
1
svelte
1
cpp
1
fsm-library
1
xstate-cpp
1
angular
1
nx
1
devtools-extension
1