State machines meet component libraries
summary
Diagrams become the source of truth: a state machine drawn in the Stately visual editor compiles to runnable code, wired into Storybook via useMachine, and drives UI behaviors like click selection, meta-key multi-select, Escape to clear, Command‑A select all and a drag-to-select variant. Model based testing shows the impact numerically — an initial model yields 7 paths while adding drag raises combinatorics to 240 paths — and the live demo generates, debugs and executes the component successfully.
AI-written summary · about
chapters (6)
- 0:00Introduction
- 3:55Component libraries need state machines
- 8:12Live diagramming with state machines
- 18:57Connecting state machines to React
- 27:20Testing with state machines
- 34:42Executable diagrams future
related talks
29mReactive State Machines and Statecharts
45mState of the Art User Interfaces with State Machines
38mState of the Art Web User Interfaces with State Machines
25mMastering UIs with Finite State Machines
40mCoding Complex App Logic, Visually
31mTame the Component Multiverse
31mModel-Based E2E Testing With State Machines
22mStates: A Product Love Language