A Turing machine visualizer built with XState, Vue 3 and TailwindCSS. All the logic code of the visualizer lives in a XState machine.
The configuration of the machine and its input can be edited, and once submitted, they are sent to an Erlang server that computes the execution.
The visualizer displays the steps of the execution with smooth animations.
An iOS, Android and Web application to listen to music collaboratively in real-time.
Client-side the application is built with React Native (Expo) and XState. The backend is built with AdonisJS.
The logic of the music player and the collaborative part are managed by XState.
Temporal is a tool to create workflows with plain code. They released the alpha version of their TypeScript SDK in November 2021. The great thing is that if TypeScript code can run, XState can too.
I created a fake electronic signature application where the workflow of the signature is managed by a XState machine, and I had the chance to present it during an official Temporal meetup.
The front-end part is built with Svelte and the whole logic code lives inside a XState machine too.
An online interpreter for SCXML state machines powered by XState, and using @xstate/inspect to visualize their execution.
It uses some core functions of XState to compile a SCXML machine – as a string – into a real XState machine.
The application is built with Vue 3 and all the logic code that powers the interpreter lives in a XState machine.
A little game to demonstrate how XState can be used front-end with a back-end framework such as Laravel, Ruby on Rails or AdonisJS, that renders plain HTML pages, and where JavaScript is only used to enhance them.
The XState machine that makes the game work is started when the page renders in the browser, and it interacts with Petite Vue – a minimal version of Vue – to listen to click events and to update the DOM.
A Tetris multiplayer game built with XState, Vue 3, TailwindCSS and Node.js.
Each client is connected to the backend through a WebSocket (Socket.io) to enable real-time. Client-side the WebSocket connection is orchestrated by XState.
All the front-end logic of the game is managed by XState, from username selection form to keypresses during a game.
Get monthly insights, personal stories, and in-depth information about what I find helpful in web development as a freelancer.
Email advice once a month + Free XState report + Free course on XState
Want to see what it looks like? View the previous issues.