Using Stately Studio

Learn how to use Stately Studio’s editor.

• Introducing Stately Studio

  Stately Studio is a suite of tools for building app logic, including the Editor, developer tools for XState, and much more coming soon.

• States and transitions

  Learn how to use states and transitions, including parent states, parallel states, guards, delayed transitions and eventless transitions in Stately’s editor.

• Actions and actors

  Learn how to use exit actions, entry actions, and transition actions, and invoke actors in Stately’s editor.

• Design mode

  9 pages.

• Simulate mode

  1 pages.

• Projects

  A project is a collection of machines that helps you organize your personal machines and collaborate with others on your application logic.

• Stately Sky

  1 pages.

• Teams

  You can create and join teams in Stately Studio to share and collaborate on team projects.

• Discover

  Are you seeking inspiration for your machine? Or do you want to learn how somebody else models their machines? The Discover page lists all the public machines created with Stately Studio.

• Share

  3 pages.

• Accounts

  6 pages.

• Version history

  Version history is helpful if you want to save checkpoints while modeling machines or mirror version changes in the rest of your codebase. New versions can be saved from the current machine using the Version history panel in the right tool menu when in Design mode.

• Lock machines

  You can lock a machine anytime to prevent accidental edits. Locked machines have a Locked status displayed in the editor’s top bar.

• Keyboard shortcuts

  Stately Studio has a number of keyboard shortcuts.

• Canvas view controls

  You spend a lot of time on the canvas while designing and simulating state machines, so we’ve added view controls to help you navigate around your machines.

• User preferences

  We have some simple user preferences to help you customize Stately Studio to fit your needs.