Building a white noise machine with state machines
summary
Builds a working white‑noise web app using XState and the Stately visual editor to model and simulate the statechart, then exports runnable JS to StackBlitz. Features include power on/off with entry/exit actions, three sounds (white noise, waves, fan), concurrent light and volume regions, guarded self‑transitions for volume limits, and a separate audio player actor. Exports as JS/TS/JSON, walks the machine to find and fix a lighting bug, and demonstrates the model driving the implemented UI.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 0:30My biggest pet peeve
- 1:44Communication tools
- 2:15Complexity
- 3:33White Noise
- 5:08State Machines
- 6:39White Noise Machine
- 12:49Actor Model
- 15:57Benefits of diagrams
- 17:42Exporting the code
- 21:10Do you always need a state machine
- 21:27When do you need state machines
- 21:47State charts
- 22:28Outro
related talks
35mBuilding a White Noise Machine with State Machines
38mInto the Visual World of State Machines
38mState of the Art Web User Interfaces with State Machines
45mState of the Art User Interfaces with State Machines
28mState machines for frontend state management
33mWorking with State Machines in Angular
40mVisualize your State Management with XState
27mXState: the Visual Future of State Management