XState logo

XState

State machines and statecharts for the modern web
61
41
+ 1
0

What is XState?

It is a library for creating, interpreting, and executing finite state machines and statecharts. It's a really powerful package that can be used to manage state in React Apps.
XState is a tool in the State Management Library category of a tech stack.
XState is an open source tool with GitHub stars and GitHub forks. Here’s a link to XState's open source repository on GitHub

Who uses XState?

Companies
13 companies reportedly use XState in their tech stacks, including WebTech Team, OpenWeb, and numa.

Developers
47 developers on StackShare have stated that they use XState.

XState Integrations

Decisions about XState

Here are some stack decisions, common use cases and reviews by companies and developers who chose XState in their tech stack.

Needs advice
on
GraphQLGraphQL
and
XStateXState

Hey, I'm new and I've come here because right now, I am so overwhelmed by all the available technologies and solutions that I have no idea where to start.

What I need is to create a very specific application for developers in my workplace. The workflow looks something like this: User enters his variables --> app creates a configuration --> Run a 'test' based on that configuration. I am talking about a lot of variables. The point of the application is to take in all that information and configure it. For example, one of the variables could be a file from which I take information by parsing its content. Now the user can run a test based on the configuration. The test itself is not my responsibility, it's in python and something I need to feed my configuration.

Things I am pretty sure about:

  1. Split the app up to frontend and backend

  2. backend needs to be Python 2.7 -> thinking about utilizing Django

  3. frontend is going to be web-based ->thinking about React (TypeScript, HTML, and some CSS framework like Bootstrap)

  4. Use WebSockets for bi-directional conversation between frontend and backend

  5. Run both server and client on the user's PC.

The problem I am facing is how to connect the different 'states' of the independent server and the client, in a programmatically correct way, with so many variables, tabs, components, etc.

I use WebSockets to move information between server and client. Let's say the user entered a new value in the client GUI, now I want to update the server so it can do its part. But I don't want to send a whole snapshot of the current state of the GUI to the server since this is not efficient. Is GraphQL the right solution for this job? After the GUI updates the server, the server parsed a few things and wants to send this back to the client. How can I take what the server sent, which could be a very deeply nested value, and update the corresponding part in the GUI? Is XState (or other state managers) the solution?

I know this is a very specific question, and I might be lost, but I would like to hear your advice because this is a new subject for me, and I am just learning right now.

See more

XState Alternatives & Comparisons

What are some alternatives to XState?
jQuery
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
React
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
AngularJS
AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.
Vue.js
It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.
jQuery UI
Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
See all alternatives

XState's Followers
41 developers follow XState to keep up with related blogs and decisions.