We’ve just released a new way for new users to learn Stately. We know that the learning curve is one of the biggest challenges you face when adopting state machines in your teams. We’ve designed our Learn Stately guidance and accompanying tutorials to introduce the basic concepts of state machines, demonstrate how to build them, simulate them, export them to code, and implement them with the exported code.
26 posts tagged with “stately”
View all tagsWe’ve recently launched a huge Stately release, and we covered it all (as well as some even newer features!) in our latest office hours live stream.
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 🎉
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.
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.
Using the XState extension for VS Code, you can create a state machine in seconds and edit the machine using our visual editor. Use the xsm snippet to quickly generate the code required for your state machine, then drag and drop inside our visual editor to rapidly model your machine.
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.
Are you a React developer using XState to model your application logic? Perhaps you’ve heard of XState but have been looking for an easy way to try it out in one of your projects. If so, then I’d like to share with you a pattern I was introduced to when first diving into codebase at Stately, that of using custom machine hooks. This lightweight, reusable way to integrate XState into React components is a delight to work with and I think you might like it as much as I do!
On top of our usual minor improvements and bug fixes, we’ve got great new features to share with you in July!
Our latest update to the XState VS Code extension has made it easy to enable file nesting for typegen files. But what is file nesting?
We’ve had a busy month and have plenty to share with you this June!
What’s new to XState and Stately for May 2022?
This week we’ve added our Roadmap to the XState documentation.
Many of you have requested a roadmap to help you determine if it’s the right time to integrate XState and Stately tools into your team’s workflow. We’ve added a simple Roadmap so you know what we’re currently working on and what features are coming up soon.
We’re hiring for a frontend engineer, backend engineer, developer advocate and product designer at Stately. You can check out the Careers at Stately page on Notion.
Happy Wednesday! Time for our first Editor Changelog blog, where we’ll talk about the new updates we’ve shipped in the editor.
Last week we launched the new Stately homepage, which we hope will make it easy to understand what Stately and XState are and help you convince your team to use state machines.
You can watch us talk about the new design and its implementation during last week’s office hours. I’m particularly impressed by David’s SVG arrows!