Stately
Roadmap
Examples
Changelog
←
Back to changelog
Powered by Canny

new

improved

Supercharge the canvas

It’s finally here; the biggest update to Stately Studio since last October.
  • Bring color into your flows! 🌈
  • Design your logic directly on the canvas 📝
  • Interact with effects like entry actions and invoked actors as visual blocks 🧩
  • Understand complex flows with a refined design for statecharts 🔥
  • Hide the UI to help focus on your content 🎧
  • Improved transition routing ↩
  • Use tags, action parameters, and many XState actions in the Studio 💪
  • Export to XState v5 beta 🚚
Color states and transitions
You can now highlight your machine’s states and transitions with colors. Maybe you want to highlight particular states and transitions for the rest of your team or color all success states in green and error states in red. Read more suggestions for how you might use colors in Nick’s blog post about this release.
Using the color swatch palette to choose between default, purple, pink, red, orange, yellow, green, and blue options.
Colors are a Pro feature of the Stately Studio. Check out the features on our Pro plan or upgrade to try the Pro plan with a 30-day free trial.
Design your logic on the canvas
You can now create much of your logic on the canvas without opening a single drawer or panel. Including the following features:
  • Descriptions
  • Actions
  • Invoke actors
  • Tags
  • Delayed transition timers
The new plus menu showing options to add a child state, self-transition, tag, description, invoked actor, entry action, and exit action.
You could previously add the following features from the canvas, but we’ve now made the menus more intuitive:
  • Child states
  • Self-transitions
  • Descriptions
  • Guard conditions
As a bonus, tags and effects, including actions and invoked actors, are now copy-pastable blocks. You can quickly move these blocks between states and transitions, making modeling your state machine effortless.
Copying an action from a transition to a state using cmd-C and cmd-V keyboard shortcuts.
Refined statechart design
Nick has supercharged the statechart design, making complex flows easier to understand at a glance and helping your team collaborate more efficiently. State names are now headings with other state properties grouped underneath. States and events are more visually distinct, with bolder borders around parent states and a more subtle grid behind the statechart, helping your flows stand out. We’ve also added a parallel state icon on parallel states to help you identify them even when they have no children.
State names are now headings, properties grouped underneath, for a refined statechart design that’s easier to read and understand… entry action of waveHello, exit action of waveGoodbye, invoked actor called goodTimes, invoked as party.
Translucent state details and events
State details and events are now translucent, making it easier to identify overlapping states and events and improving the readability of complex flows where overlapping transition lines are inevitable. You can turn off translucency at any time from the user menu.
Transition lines running underneath state details and an event, still visible because the state details and events are subtly translucent.
Improved Simulate mode
We’ve even improved the statechart design in Simulate mode to make active states and possible transitions easier to spot. Inactive states and transitions are dimmer, and possible transitions have thicker lines that make them easier to spot.
Improved Simulate mode where possible transitions are easier to spot because other states and transitions are dimmed, and active transition lines are thicker.
Improved UI
We’ve not just improved the canvas but refined all of Stately Studio’s UI. You can now hide the UI to stay focused on the canvas with a few clicks from the menu or use the keyboard shortcut.
Show/hide UI option in the view section of the Stately menu.
Fitting in with our added colors, we’ve updated light and dark modes to make them easier on the eye. The toggle for Design and Simulate modes is clearer, and we’ve labeled each tool in the toolbox menu, so you know what you’ll find inside each panel.
Closer integration with XState
We’ve added a few new features to Stately Studio to bring the feature set even closer to XState, starting with tags.
Tags
You can now add as many tags as you want to any state. Tags will be included when you export your machine to code.
Add an edit tags, as many as you like. Tags are shown underneath the state name, and will be exported with your code.
XState built-in actions
We’ve also added support for the following actions built into XState:
XState actions on a state, including assign, raise, log, send, and stop.
You can add any of these actions as transition or entry and exit actions, include their necessary details, and your machine will include the correctly formatted code on export.
Export to XState v5 beta
One of our most-requested features is now also available in Stately Studio: we’ve added the option to export code for XState V5 beta!
Toggle enabling XState v5 beta in the Code panel in the toolbox.
And more!
We’ve also continued making minor updates to Stately Studio to speed up your daily work. Including:
  • Actions now have custom action parameters.
  • Self-events
    are renamed to
    self-transition
    in the edit menu to align with XState and our documentation.
  • Search for machines in your project to filter the machines list.
  • Transition routing has been improved for better routing around states.
Transition lines bending to accommodate a new state.
And, of course, we’ve updated the Stately and XState docs for these new features!
You can immediately try out all these features with a new state machine at state.new. What are you waiting for?!