Need help with xstate-codegen?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

152 Stars 8 Forks MIT License 171 Commits 18 Opened issues


A codegen tool for 100% TS type-safety in XState

Services available


Need anything else?

Contributors list

Type Safe State Machines

gives you 100% type-safe usage of XState in Typescript. Try it out at this codesandbox!

You get type safety on:

  • Transition targets:
    on: {EVENT: 'deep.nested.state'}
  • Services
  • Guards
  • Activities
  • Actions
  • The
  • state.matches('deep.nested.state')

This works by introspecting your machine in situ in your code. With this Thanos-level power, we can click our fingers and give you 100% type safety in your state machines.



xstate-codegen "src/**/**.machine.ts"

Inside code

Instead of importing

, import them from
import { createMachine } from '@xstate/compiled';

const machine = createMachine();

You must pass three type options to

  1. The desired shape of your machine's context
  2. The list of events your machine accepts, typed in a discriminated union (
    type Event = { type: 'GO' } | { type: 'STOP' };
  3. A string ID for your machine, unique to your project.

For instance:

import { Machine } from '@xstate/compiled';

interface Context {}

type Event = { type: 'DUMMY_TYPE' };

const machine = Machine({});

Usage with React

import { useMachine } from '@xstate/compiled/react';
import { machine } from './myMachine.machine'

const [state, dispatch] = useMachine(machine, { // all options in here will be type checked })

Usage with Interpret

import { interpret } from '@xstate/compiled';
import { machine } from './myMachine.machine'

const service = interpret(machine, { // all options in here will be type checked })



xstate-codegen "src/**/**.machine.ts" --once

By default, the CLI watches for changes in your files. Running

runs the CLI only once.

Out Dir

xstate-codegen "src/**/**.machine.ts" --outDir="src"

By default, the CLI adds the required declaration files inside nodemodules at `nodemodules/@xstate/compiled`. This writes the declaration files to a specified directory.

Note, this only writes the declaration files to the directory. The

files still get written to

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.