Skip to content

55 posts tagged with “xstate”

View all tags
15 minute read

Nick Hehr

The term "robots" invokes a fascinating range of ideas, from manually controlled machines to automated software that crawls the web. One of the prime examples in this area is robotic arms, traditionally used to aid and extend the reach of humans in manufacturing, surgery, and space exploration. Each of these use cases require some way of programming and controlling the arm to perform their dedicated task, usually with proprietary software developed by the manufacturer. The UI is tightly coupled to the hardware through a touchscreen device or desktop application physically connected to the arm, which makes it tough to put online securely and using modern technology.

Viam provides an open source software stack and set of cloud services that makes managing all types of robots (and other smart machines) accessible to developers without any prior hardware experience. To help demonstrate the types of experience that can be built with Viam, the developer advocacy team built an arcade claw game that used an industrial robot arm and arcade claw that could be operated using a single-page web application powered by TypeScript SDK.

8 minute read

David Khourshid

Does the world need another state management library? Probably not, but if you've been interested in XState, you're going to want to check this one out.

XState Store is a simple & tiny state management library largely inspired by XState. If you just need a way to update data in a store and subscribe to changes in the store, XState Store is for you. It is:

  • Extremely simple. Provide initial context and transition functions to the createStore(…) function, and you're good to go.
  • Extremely small. Less than 1kb minified and gzipped.
  • XState compatible. Shares actor APIs with XState, making integration/migration easy if (when) you need to handle more complexity.
  • Extra type-safe. Written in TypeScript, it provides strong event and snapshot types, automatically inferred from your context and transitions.
  • Event-based. Works just like XState; send events to trigger transitions.
  • Immer ready. Easily add Immer for "mutable" context updates with createStoreWithProducer(producer, …).
2 minute read

Laura Kalbag

Watch our latest office hours live stream where we cover single file GitHub pull requests, sorting machines, Stately Agent, updates to XState and more.

5 minute read

David Khourshid

XState is a versatile state management & orchestration library that works with any framework, including React with the @xstate/react package. For many apps, managing global state is a requirement, and there are many options for sharing global state in React, like using React Context or libraries like Redux, MobX, and Zustand.

The @xstate/react package makes it simple to manage component-level state with hooks like useMachine() and useActor(), but it works equally well for managing global state 🌎

17 minute read

Kevin Maes

We recently announced the release of XState v5! During its beta phase, we created a migration guide, specifically to call out breaking changes and to give developers onging updates regarding API changes. This post is a walkthrough of migrating existing XState machines from v4 to v5 and is intended to be more of a step-by-step companion to the migration guide. It also focuses on migrating XState machines that are using TypeScript.

10 minute read

Kevin Maes

State machines and visual diagrams are such a powerful way to organize, and convey information. All of those lovely “boxes and arrows” convey meaningful relationships, indicate sequential order, and direct flows in a way that’s easier to understand since it's visual. Add to that the ability to attach assets to your diagrams and you’re well on your way towards creating truly expressive, executable software diagrams. But there’s still one thing that state machines have that should make them easy to understand. Text.