Skip to content
Version: XState v4

Import from code

Importing from code is helpful if you’ve already built machines while working with XState, or have created a machine using our older Stately Viz but haven’t yet tried Stately Studio’s editor.

Import state machines​

Your state machine code should be formatted as a createMachine() factory function before import. The importer has basic validation in case your machine has basic errors, including reminding you if the createMachine definition is missing.

Check out an importable machine code example at the end of this page.

Create a new machine inside a project using imported code​

Create a New machine from the machines list inside a project, then use the Import button to import code into the new machine.

Import code to overwrite your machine​

Use Import button in the Code panel, or Machine > Import from the editor menu to overwrite your current machine.

Machine code example​

Below is an example of a createMachine() factory function which you can import as a machine without any errors:

createMachine({
  id: 'Video',
  initial: 'Closed',
  description: 'Video player',
  states: {
    Closed: {
      on: {
        PLAY: {
          target: 'Opened',
        },
      },
    },
    Opened: {
      invoke: {
        src: 'startVideo',
      },
      initial: 'Playing',
      description: 'Fullscreen mode',
      states: {
        Playing: {
          on: {
            PAUSE: {
              target: 'Paused',
            },
          },
        },
        Paused: {
          on: {
            PLAY: {
              target: 'Playing',
            },
          },
        },
        Stopped: {
          type: 'final',
          after: {
            5000: {
              target: '#Video.Closed',
              actions: [],
              internal: false,
            },
          },
        },
      },
      on: {
        STOP: {
          target: '.Stopped',
        },
      },
    },
  },
  context: {},
  predictableActionArguments: true,
  preserveActionOrder: true,
});