Skip to main content
100%

Generated by XState Viz: https://xstate.js.org/viz

✓ Published0🌍 Public
Aafbroman
Last edited May 5, 2020
Created on May 4, 2020

XState Viz renders a statechart for an asynchronous data-fetching machine, showing transitions between idle, pending, failed, and successful states. The successful state contains nested substates (unknown, withData, withoutData) using conditional guards. The code defines the machine with XState's `Machine` API, including `invoke` for a `fetchData` promise, `assign` actions for setting results or error messages, and a guard `hasData` that always returns false. The visualization displays the full state graph with labeled transitions and event-driven flows.

AI-generated description

Similar vizzes

Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This example shows a finite-state machine for fetching data, with four states—idle, loading, success, and failure—and transitions triggered by FETCH, RESOLVE, REJECT, and RETRY events. The machine uses XState’s `Machine`, `assign`, and `interpret` APIs, with a `context` object tracking retry attempts. It demonstrates how statecharts handle asynchronous flows, incrementing a retry counter on each failed attempt before returning to loading. The visualization is generated by XState Viz, which renders the machine’s structure and event-driven transitions from the provided machine definition.

HHerbCaudill
85% match
Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This example shows a login state machine built with XState, modeled as an explicit statechart with idle, loading, success, and failure states. It demonstrates asynchronous data fetching by invoking a `fetchJwt` function that retrieves a JSON Web Token from a remote URL. The machine uses the `invoke` property with `onDone` and `onError` transitions, assigning the returned user data or an error to the context via the `assign` action. The visualization, generated by XState Viz, renders the statechart diagram from the `machine.js` source file, highlighting how state transitions and async side effects are encoded in the machine definition.

Aadamscott
82% match
Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This visualization shows a finite-state machine for a workstation’s connection and request lifecycle, modeled with XState’s `Machine` API. It begins in a `start` state, transitions through `connection` and `request`, and terminates in a `response` state where various success, cancellation, or error events lead to final states. The code assigns context values like `responseStatus`, `pedId`, and `approvalCode` using `assign` actions, and defines transitions for events such as `CONNECTING`, `PENDING`, `SUCCESS`, and `TIMED_OUT`. The machine is rendered by XState Viz, which visualizes states and transitions from the provided machine definition.

TTimeBandit
76% match
Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This example shows a finite-state machine for a display with two main states, hidden and visible, where visible runs three parallel substates for power, mode, and brightness. The machine uses XState’s `Machine` API with initial states, event transitions like `TURN_ON`, `TURN_OFF`, and `SWITCH`, and a delayed `TIMEOUT` transition after 5000 ms. The rendered diagram from XState Viz visually represents the state hierarchy, parallel regions, and event-driven edges, making the logic of state transitions and timing explicit.

Aafbroman
74% match
Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This visualization shows a state machine for a multi-step signup and onboarding flow, navigating through states like signup, sniffer, validate, industry, objective, and browse. It uses XState’s `Machine` API to define hierarchical states, transitions, guards (e.g., `hasNotSniffed`, `isNotValidated`), and actions like `goNext` and `goBack` that update the context’s direction. The rendered diagram, generated by XState Viz, illustrates conditional branching on events like `NEXT` and `BACK`, with exit actions assigning `hasSniffed: true` after leaving the sniffer state.

Aadamscott
74% match
Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This example shows a state machine for a display that can be hidden or visible, with the visible state running two parallel substates: a light/dark mode and a brightness level that automatically dims after a 5-second timeout. The machine, defined with the XState library’s `Machine` function, uses a hierarchical configuration with parallel states, transitions on events like `TURN_ON`, `TURN_OFF`, and `SWITCH`, and a `delays` option for the timeout. The visualization is rendered by XState Viz, which interprets the machine definition to generate an interactive diagram of the states and transitions.

Aafbroman
74% match
Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This example shows a parallel state machine for user management, with three concurrent sub-machines tracking login status, user data loading, and client data loading. XState Viz renders the machine definition into an interactive diagram, displaying each sub-machine’s states and transitions. The code uses the `Machine` and `interpret` APIs from XState to define a `userManagement` machine with parallel states, where events like `LOGIN_SUCCESS` and `LOGOUT` trigger coordinated transitions across all three regions. The visualization updates live to reflect the current state configuration.

Aadamscott
73% match
Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This example shows a finite-state machine for a light switch with a hidden mode and history state, visualized interactively. The machine defines states for hidden, visible (with light and dark substates), and a history pseudo-state that restores the last active substate. It uses the XState library’s `Machine` API to declare transitions like `TURN_ON` and `SWITCH`, and the visualization is rendered by XState Viz, which parses the JavaScript machine definition to generate a live statechart diagram. The code includes no external data sources, only the machine’s transition logic.

Aafbroman
73% match