This week has seen us introduce some of our biggest features yet and plenty of small updates to improve your Stately experience. Do you want to learn more about our vision for this release? Find out more in David’s latest blog post on Stately Studio 2.0.

Stately Sky

Stately Sky is our new serverless platform for running workflows within the Studio. With Sky, you can now run your statecharts as live machines in minutes, complete with XState v5 actors and multiplayer support. Deploy your state machine as a workflow from the Deploy button in the editor’s top bar. Read more about Stately Sky in Gavin’s blog post.

Generate React app

You can also now generate a React app from your state machine. In the Code panel, use Generate React app to go from logic to prototype in seconds. Want a working React UI? Read on…

Stately AI

We’ve also added a whole host of features as part of Stately AI. You could already generate flows from text descriptions, and this is now faster and produces even better results with improved AI generation. You can now Import from XState, Redux, Redux Toolkit, and Zustand. Just paste your code into the import area, and Stately will import your XState state machine or convert and import your reducers and stores to get the benefits of state machines in non-state-machine code.

As well as now generating a React app from your state machine, you can enhance the UI using Stately AI for a working React UI. Once you’ve generated your React app, use Enhance UI and choose your favorite from three generated UIs.

Are you ready to share your state machine in your documentation? You can generate a summary for your machine with AI from the machine Details panel. Using the Generate summary button will create a summary you can use in your docs to quickly explain your logic to teammates or even as alternative text for images of the machine.

Our Stately AI features are available to our Stately Pro users, but everyone gets a few free generations to try before upgrading.

Assets!

We’ve supported images in state descriptions using markdown and links for a while. Now, you can drag to add multiple assets to any state. The first asset is shown on the canvas. Further assets are accessible from the state details panel, where you can also drag to reorder the assets. Once your asset is uploaded to your state, you can choose to display it in SM small, medium MD, large LG, or extra large XL sizes.

Targetless transitions

As a part of our improved support for XState in the Stately editor, the editor now supports targetless transitions. Targetless transitions are helpful when you want a transition on your root state but don’t want to keep resetting your machine to the initial state. They also allow multiple target state support in the future, which is handy if you want to transition to simultaneous parallel states.

Zoom to selection

You can now zoom to selected to re-center the canvas from the zoom menu, machine structure list, or the right-click menu. You can also zoom to selected with the Shift + 2 keyboard shortcut. This zoom is particularly helpful when working with large machines and demoing your machines to others, enabling you to jump to a different canvas area swiftly.

Improved UI

Stately Studio 2.0 comes with an improved UI, making it easier to access tools and information about your machine with minimal clicks.

One of the first big changes you’ll notice is that the Code panel is now on the left side of the canvas, alongside the Structure panel. This means you can now have the Code and right panels open simultaneously.

In the header, you will now find Save and Clear buttons on starter machines to help you swiftly accomplish these common tasks. And the Simulate button is now in the top right corner, alongside Stately Sky’s Deploy button. When a machine is locked, its locked status will now be displayed in the top middle of the header, and you can quickly unlock it from there. (If you need to lock the machine again, you can do so from the machine Details panel.)

Your project’s name is now listed in the header along with the machine name, and clicking the project name will open and close the Project’s machines list in the left sidebar. You can now reach My Projects from this sidebar or the editor menu.

Your user avatar menu is now simplified and can be found at the top of the project's sidebar. The menu options previously located in the user avatar menu can now be found in the editor menu:

• The dark mode/light mode and translucency options are under the Preferences section.
• The account settings (including My profile, Billing, Settings and Sign out) are now under Account
• The Changelog is now found under Help.

The quick access menu that appears when you select a state or event now has one-click buttons to add actions on events and actions and invoked actors on states. You can also now right-click any state action to toggle it between an entry and an exit action.

There are now canvas mode buttons at the bottom of the editor. These buttons give you quick access to generating flows from AI, selecting canvas objects, panning the canvas, and quickly adding new states or notes to the canvas.

This is an excellent time to mention that annotations are now called notes! Notes behave exactly like annotations, just with a simpler new name!

In the machine’s bottom bar, you can now find undo/redo, zoom options and the help button on the bottom right. And managing machine versions, including switching and creating new versions, can now be done from the bottom left. While viewing a version, the buttons for restoring or duplicating the machine are still in the top bar.

When you import code into the editor without a project, We’ll now automatically create a new project for you.