Skip to content
Version: XState v4

Descriptions

You can add descriptions to state and event nodes to describe their purpose and share related notes with your team. Descriptions support markdown formatting, including links and images.

You can only add one description for each state or event. The machine object will include your descriptions in the state or event’s description when you export your statecharts to JSON.

In the video player above, the text “The video player should be in full-screen mode” is a description of the Opened event.

Add a description to a state, event, or transition​

First, select the state, event, or transition you want to describe.

On the canvas​

  1. Use the plus icon button to open the edit menu.
  2. Choose Description from the menu to add a description block.
  3. Use the edit icon button to open the Edit Description panel.
  4. Write your description in the Description text area.
  5. Close the panel and save your description in any of the following ways:
    • Use the close icon button.
    • Interact anywhere outside the Edit Description panel.
    • Use the Tab or Escape keys.

Using the details panel​

  1. Open the Details panel from the right tool menu.
  2. Write your description in the Description text area.
  3. Save your description in any of the following ways:
    • Interact anywhere outside the Description text area.
    • Use the close icon button to save and close the Details panel.
    • Use the Escape key to save and close the Details panel.

Delete a description from a state, event, or transition​

First, select the state, event, or transition whose description you want to delete.

On the canvas​

  1. Hover or focus on the description to reveal the edit icon button.
  2. Use the edit icon button to open the Edit Description panel.
  3. Use the trash icon button to delete the description.

Using the details panel​

  1. Open the Details panel from the right tool menu.
  2. Delete the content from the Description text area.
  3. Save your changes in any of the following ways:
    • Interact anywhere outside the Description text area.
    • Use the close icon button to save and close the Details panel.
    • Use the Escape key to save and close the Details panel.