Skip to content
— 6 minute read

Introducing Stately Studio 1.0

David Khourshid

We’re excited to announce the release of Stately Studio 1.0! 🚀 Our mission is for all app logic to be visually collaborative and accessible to your entire team, and we’ve been working hard to make that a reality.

Thank you for your support!​

Earlier this year, we released the first beta of Stately Editor & Stately Registry (together called the Stately Studio). We also released Stately Viz, a visualizer for XState machines, and the XState VS Code extension. Since then, over 10,000 of you have tried our tools out, creating and sharing tens of thousands of machines (we don’t know the exact number because machines built with the extension are always private!)

Thank you for giving our tools a go and for all the valuable feedback you’ve given us; we’ve been blown away by the response. We’re listening and continuing to improve the Stately Studio. As always, you can create and upvote feature requests on our Canny roadmap.

Teams​

Collaborating on app logic is one of Stately’s key goals. That’s why we’ve introduced teams, where you can organize, privately share, and edit projects with your teammates. A project is a collection of related machines you can keep to yourself or share with your team. You can invite teammates to your team, and they can join your team by accepting the invitation.

Stately Studio view of My Projects, with a big Create Projects button and a list of My Projects. Each project has a title such as Flows, its visibility, such as public, unlisted or private, and the number of machines inside that project.

The teams feature is the first step to providing more powerful collaboration features. We’re working on GitHub integration with public and private repos, commenting, machine revisions with visual diffs, multiplayer mode for collaboratively editing machines in real time, and much more.

Teams (previously known as Systems) are available on our new Pro subscription.

The Members view of the Stately team in the Stately Studio. There’s an inline Invite Members form with options for an email address, and dropdown for role with “Viewer” currently selected. In the team there’s a list of Owners/Admins including David Khourshid and Laura Kalbag. David has a badge of “Owner” alongside his avatar.

Machine visibility and roles​

Machines may contain business logic you don’t want to share with the world; that’s why we’ve introduced visibility and roles. You can set a machine to be private, public, or unlisted. Private machines are only visible to you and your teammates. Public machines are visible to everyone, and discoverable through search. Unlisted machines are only visible to those with the link, as they don’t appear in search results.

Share menu in the Stately Studio with an option to copy link, and set the project to either public, unlisted, or private. The private option is selected and Permissions text under the option states that this project is only visible to you and your team.

You can also set roles for teammates to restrict how they can edit projects and machines. You can set a teammate to be a viewer, editor, or admin. Viewers can view projects and machines, but can’t edit them. Editors can edit projects and machines, but can’t delete them. Admins can do everything, including assigning roles.

Private/unlisted machines and team roles are available on our new Pro subscription.

Editor redesign​

You might have noticed a refreshed redesign of the editor. The editor view is now more project-centric, allowing you to switch between machines with a single click. And we’ve improved the layout of states to give you more space to create and rearrange states.

Simulate view in the Stately Studio showing a video player machine. In the mini state of the machine, there’s an image of a video player embedded in the description. There’s a popover menu showing the simulation event log. There’s a drawer icon in the top left showing where the tree view is hidden away. A breadcrumb in the header shows this machine is in the Stately team and Learn Stately studio project. The current tab in the top navigation is Simulate, but Edit is also available.

We’ve also redesigned guarded transitions. They are now individual transitions connected with a dotted line and a diamond, which should feel natural to anyone that has worked with flowcharts. The separated transitions make it easier to read and arrange the conditions for each transition, allowing you to change the source and target states of individual transitions quickly.

Detail of a state machine in the Stately Studio featuring a guard in a rounded rectangle labeled with “if” and a diamound shape and 1, where a guard is a condition that is checked when a machine goes through an event, attached by dotted lines to its conditions which are also in rounded rectangles, numbered 2 and 3 in diamond labels. The first condition is labeled “else if”, the second condition is labeled “else”.

Simulation mode has also been redesigned, making it easier to see active states and transitions. There are many more improvements to the editor, but we’ll leave them to you to discover.

More export options​

You asked, and we listened (we’re currently in the listening state). We’ve added more export options beyond JSON, including JavaScript and TypeScript. We have plans to add more export options in the future, including:

  • Markdown
  • CodeSandbox
  • StackBlitz
  • SVG, PNG, PDF
  • And others

Request your favorite export options on our Canny roadmap.

The code popover panel showing over a video player machine. The Code options are JSON, JavaScript and TypeScript. The JavaScript option is selected, alongside a button to copy to clipboard. The code is shown in a text area below as JavaScript object describing the video player machine.

What’s next?​

We have so many things planned for the future:

  • A Stately GitHub integration for public and private repos
  • XState parity: supporting all of XState’s features in the Stately Studio (we’re almost there!)
  • More export options and an embeddable editor
  • Support for other graph-based tools, CI/CD pipelines and other workflow engines/DSLs
  • Static graph analysis to help you catch logic errors ahead of time, which is difficult to do with plain code
  • Many more examples, tutorials, videos, and documentation

Try out the Studio​

All our new Pro features are available with a 30-day free trial you can try with your whole team. Upgrade today using the Upgrade button in the Stately Studio or Sign in with GitHub to create a new account.

The Upgrade button has an orange border and is located in the top right of the Studio navigation, between the Export machine icon and the user avatar.

If you’re a Product Hunt fan, you can also find Stately Studio 1.0 on Product Hunt.

Have any questions? Join us in our office hours live stream this Friday, where we’ll answer your questions and give you more demos.

Tags: