Your first state machine

July 10th, 2023 — 8 min read


So let’s install xstate (they also support react, solid, svelt, vue, and vanilla)

npm i xstate

This is a simple state machine that toggles between two states: active and inactive.

import { createMachine } from 'xstate';

export const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: {
        toggle: 'active'
    active: {
      on: {
        toggle: 'inactive'
import * as React from 'react';

What I’ve accomplished

  1. Installing Astro: First, I created a new Astro project and set up my online accounts.
  2. Making Pages: I then learned how to make pages by creating new .astro files and placing them in the src/pages/ folder.
  3. Making Blog Posts: This is my first blog post! I now have Astro pages and Markdown posts!

What’s next

I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

Need a helping hand?

I'm here for you or your team. Together we'll tackle your issues and create a pragmatic solution.