Last week saw 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 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.

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

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 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 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 panel. Using the 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.

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.

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.

You can now 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 + 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.

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 panel is now on the left side of the canvas, alongside the panel. This means you can now have the and right panels open simultaneously.

In the header, you will now find and buttons on starter machines to help you swiftly accomplish these common tasks. And the 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 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 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.

It’s been a while since our last changelog update, so let’s get right to it!

You can now generate test path code for your state machines, which you can use to implement tests:

This feature is in beta, and we’d love to get your feedback on our Discord server.

As shown in the preview above, we’ve started improving the editor UI, and this is just the first phase! We’ve added a secondary header and bottom status bar where you’ll now find the version history. The left and right panels are now adjustable full-height panels. You can now find the machine in the new panel on the left. We’ve also moved the schema into a panel in the right toolbox and the context schema into the toolbox panel.

Now, when you add a new machine, you can quickly create a machine from a blank canvas, the starter template, import from code, or generate with AI.

Transitions in the editor now have three values:

You can set internal or external explicitly or leave them as auto. In the future, we’ll provide smarter options for how XState behaves for auto values.

When exporting to code, we only include the internal property on transitions you have explicitly set to internal. Transitions set to auto ones will be omitted and fall back to default XState behavior in the run time.

Recently we’ve been focusing a lot on performance, especially for large machines with more than 100 states and events. We’ve made it easier to interact with states and events in these large machines, especially when you’re zoomed in.

We now persist some of your editor preferences on your local device, including:

And there’s more!

You might have also spotted a new option on our Billing page. Don’t hesitate to get in touch with us by email if you’re interested in any of the following:

We’d love to hear from you!

You can now open your machine in CodeSandbox or StackBlitz. These options show when you select either JavaScript or TypeScript export formats in the panel. When you open your machine in these external editors, it will be deployed as a demo app so you can jump quickly into prototyping and get an example of how to integrate your machine into your codebase.

We’ve now released the context schema in the editor. You can find the context schema above the event schemas in the machine panel. Here, you can add a new context property with its name, type (string, number, boolean, array and object), and an optional description. These will then be exported in your TypeScript code. When you import a machine, Stately will stub an empty schema for any context properties in your code. If you add a context property in the panel that’s missing from the context schema, a quick link will appear under that property to quickly add it to the schema.

You can edit any context properties in the modal that opens when you click the property in the schema list and delete all of them from the option under the context menu.

In the Context schema panel, you can also search through the list of context properties in your machine by name.

We’ve made some improvements to Simulation mode. The log panel is now named the and not only shows a log of your simulated path but contains buttons to navigate through the currently available events easily.

We had a brief bug with importing large machines from the import modal. If you experienced any errors with importing machines, please try again now! If you are still experiencing any bugs, please let us know at support@stately.ai.

The Stately team has had another busy week. The editor now has event schemas, and we’ve made many more improvements. Let’s dig in!

Event schemas are now available in the editor. You can access the event schemas from the panel. The event schema enables you to define events for the current machine, including all of the events’ properties, including, but not limited to, the event description.

You can search for available events from the event schema panel, edit their details, and create new events. Any events you aren’t using in your machine have less opacity, and you can delete all unused events from the button and choose .

You can also view the schema for any event by selecting that event on the canvas and opening the panel.

The role in Stately Teams is now free and does not count towards your number of seats. You can now see how many available seats you have left on your team from the Team page and the Billing page.

We’ve improved the interface for generating flows to make it easier and faster. You can now access the history of text descriptions you used for your current machine from the button in the dialog. Use the button to copy a preview prompt into the description field to try it again!

The machine’s root state now has a minimal borderless appearance by default, giving you more space to focus on your machine. If you change the root state’s color or add a description, action, or any other block type, the root state will revert to its classic bordered design and the same features as any other parent state.

We fixed a bug where a machine name was not correctly updated when you renamed its root state.

We’ve released many new features recently, but we’ve also made minor enhancements and bug fixes to improve your Stately experience.

Descriptions and annotations have had an upgrade. You can now add a description to states and events from the edit menu edit (right-click on the state or event) and edit descriptions by double-clicking them.

We also made the following improvements to both descriptions and annotations:

Our Pro users can now export state machines to Markdown and as stories. These formats give you more options for sharing your flows with non-developer teammates and in other environments, such as documentation. Access these formats from the dropdown menu in the panel.

Export to Markdown has been a long-requested feature. The Markdown-formatted flow contains a flattened list of states and transitions, where each transition is linked to its target state, enabling you to click through a text version of your state machine. Each state and transition includes descriptions, guards, and a list of actions and invoked actors.

At Stately, we believe state machines are incredibly valuable for generating user stories. Exporting to the stories format lists all the happy paths from the initial state to other states in your flow. These happy paths help document use cases against project requirements and generate test cases.

These new export formats are in beta. If you have any feedback, please let us know on Discord.

Yet another new Pro feature for you this week: you can now lock machines to prevent accidental edits. Lock a machine using the lock icon button in the machine Details panel.

Locking a machine prevents you or anyone else on your team, from editing, deleting, or renaming a machine. It will also prevent anyone from importing code to replace the machine or restoring a past version of the machine.

Locked machines have a Locked status displayed in the editor’s top bar. If you hover over the Locked status, you’ll get a tooltip detailing who locked the machine and when.

If somebody else is viewing or editing the machine when it is locked, their changes will not be saved, and they will be notified that the machine is now locked.

Try all our Pro features free on our 30 day trial

.

Read more about locking machines in our docs.

As a Stately Pro user, you can now auto-create machines from text descriptions with our new experimental feature, . You can generate a flow for a new machine or use the flow description to describe how you want to modify your current flow.

There are so many reasons you might want to generate your flows, including:

With 1000 calls a month, and a free 30-day Pro trial, get ready to create state machines in no time!

You can now choose to export state and event descriptions and meta fields with your exported code.

Find the and toggles in the Code panel.