21 posts tagged with "studio"

Sometimes you want to share a machine with descriptive details or comments, so we’ve added annotations to Stately Studio.

Tomorrow is part four in our popular Stately Stream series, where we are modeling a semi-complex client-side app using XState, Stately Studio, React and TypeScript. You can catch up on the previous videos in the series below or watch all our past videos in our Stately Streams YouTube playlist.

Two weeks ago, we had what some have called our “best office hours yet.” We introduced a whole bunch of new features and improvements to Stately Studio, including state.new with our new starter machine, annotations, embed mode, and version history. We also gave the first peek at our most significant editor update to date; we call it “codename: blocks,” check out the video to find out why!

It’s been more than six months since the release of Stately Studio 1.0, and we’ve been busy working on Stately Studio and XState. Here are some of the highlights:

Our top priority at Stately is to make it as easy as possible to create robust app logic in the form of state diagrams. That’s why we’re constantly striving to remove any potential barriers.

Today we’re happy to introduce another pro feature for our Stately Studio subscribers; Version History. With this feature, you can save versions of your work as you go and refer back to them in the future.

Are you looking to take your team collaboration to the next level? Do you want to explore the features of Stately and XState to their fullest potential? Then book a live demo with the Stately team!

Last month, Anders showed you how you could import a machine from GitHub by changing the GitHub URL in the browser’s address bar. We’ve added more to our GitHub integration. Our Pro users can now import all the machines from a repository into a Stately Studio project with the Import from GitHub button.

Today we’re happy to introduce another pro feature for our Stately Studio subscribers; import machines from GitHub. With this feature, you can quickly visually machines in any of your GitHub repositories. You can even import the machines to the Studio and keep working on them here 🎉

Happy 2023! The Stately team is back from their first off-site of the year in Lisbon and excited to get started on our plans for this year. We thought we’d kick off the year with a reminder of all the features we’ve released since the Stately Studio 1.0 release in October. It’s been just three months, and we already have so much to share.

The time has finally come; our new docs are ready to share with you all. If you’ve been following our office hours, you know I’ve been talking about these docs for a long time. Thanks to Anders, who used Docusaurus to build us a rock solid easily-maintainable platform with search that actually works, and the whole team, who have contributed reviews, explainers, and examples to get these docs started.

We have introduced a new feature to the Stately Studio, a feature we hope you’ll never see. Let’s call it machine restore, for lack of a better description.

One of our most-requested features has just landed in the Stately Studio; you can now import your machines from code!

Watch import from code in action in our latest video.

Importing from code is handy if you’ve already built machines while working with XState, or have created a machine using our older Stately Viz and haven’t yet tried the Stately visual editor.

It’s been just over a month since we released Stately Studio 1.0, and the team has barely slowed down! We’ve got more features live in the Studio today and even more planned before the end of the year.

Watch a demo of these features in our release video.

If you’re new to the Stately Studio, state machines or statecharts, we have the videos for you! Our new Stately Studio tutorials playlist on YouTube features bite-size videos to help you get started with understanding statecharts and state machines, and start modeling in the Stately Studio.

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.

The Stately team has got some huge features to share with you soon. We’ve been working hard through the summer, which is why we’re already halfway into September by the time I’ve gotten around to this update post.

Farzad and David add more features to their resizable panel using XState and React. Watch Part 1.

Check out the accompanying code on Code Sandbox.

Farzad and David use XState to build the logic for a resizable panel with React in an impromptu live stream.

Check out the accompanying code on CodeSandbox.

Watch part 2.

From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much.

Thankfully, there is a science (well, math) to side effects, formalized in state machines and statecharts, that can help us visually model and understand how to declaratively orchestrate effects, no matter how complex they get. In this talk, David ditches the useEffect hook and discovers how these computer science principles can be used to simplify effects in our React apps.

Updates to our VS Code extension​

Our XState VS Code extension has now been installed 10k times! Install the extension yourself from inside VS Code or find the XState extension on the Open VSX Registry to enjoy the following new features.