Stately.ai @statelyai Twitter profile

Pinned Tweet

Stately.ai

5 months

✨ Last week we brought you Stately Sky and this week… 🆕 Stately Studio 2.0 is out now! 1️⃣ Generate flows faster with Stately AI

4

21

97

Last Seen Profiles

@WindburstGames

@GrueneLtRLP

@PechugonPy

@TheJaydenSexton

@_Aldawlah

@RralseiC24931

@rreenaissance

@CO2_earth

@rachael_levy

@anri_on_

@JodieSatterley

@epongandam

@HeyImNono

@milephakphum

@DrDobberstein

@Tesla_Asia

@diloyunu

@eto_sister

@Chandan16203964

@duqueart

@OlehDokuka

@szcturn

@TweekSsb

@nashzoovet

@PriyankaSC1

@v1mpiremoney

@impactdottech

@sakamotonote210

@basquetplus

@clioai

@usddio

@azuki_to_milk

@ibullshit1

@MrsS2023

@DragonTheStar

@Rileyc1608

Stately.ai

@statelyai

2 years

The Stately Editor beta is now open for everyone! 🎉 🚀 A low-code visual editor for building app logic 🪄 Create executable diagrams and use them in code Try the beta now at:

42

408

2K

Stately.ai

@statelyai

2 years

🔥 XState Tip #3 🔥 XState is extremely powerful in @reactjs for orchestrating side effects and composing other hooks. Here, we use a machine to coordinate moving to a '/login' screen after 3 seconds, using Next's useRouter hook.

6

44

345

Stately.ai

@statelyai

2 years

Are you seeing complexity scaling out of control in your React app? You might need XState. Here, we take a badly-built fetch and give it error handling, timeouts and exponential backoff 🤯 all with the visual builder! FULL VIDEO:

7

46

341

Stately.ai

@statelyai

2 years

Are you using useState? Then you'll know that as components scale, both useState AND useReducer can feel like ticking time bombs 🧨💥 In this video, @mattpocockuk dives deep on the tradeoffs of each hook, and where XState can help. Full 8-minute video:

12

44

298

Stately.ai

@statelyai

2 years

🔥 XState Test v1 Alpha released 🔥 Do you want DRY, self-documenting tests without duplicated setup? Get MAXIMUM coverage with minimal code by generating your test paths from a state machine. Here's all the new goodness:

13

48

295

Stately.ai

@statelyai

2 years

🚀The Editor is also available as a VS Code extension! ⌨️ Code and watch the state diagram appear 🖱 Or draw it on canvas and see the code update

5

33

268

Stately.ai

@statelyai

5 months

🥳 XState V5 is here! More powerful, yet simpler (and smaller!) Orchestrate *any* logic, from promises and observables to state machines and statecharts and everything in between. Whatever your code is, XState will meet you where you’re at.

1

43

242

Stately.ai

@statelyai

2 years

🚀 Stately Studio 1.0 is now live! 🤝 Teams & roles (Pro) 🔭 Visibility settings: public, unlisted, private (Pro) ℹ️ Priority support (Pro) 📦 Projects-first editor view ⬆️ Export to JavaScript, TypeScript & more soon ➕ So many Editor improvements!

8

38

222

Stately.ai

@statelyai

2 years

🎉 We’ve made it even easier to create and visualize state machines in seconds: 1️⃣ Install the XState @code extension. 2️⃣ Use the `xsm` snippet. 3️⃣ Visualize your new state machine inside VS Code.

4

26

207

Stately.ai

@statelyai

2 years

🔥 XState Tip #5 🔥 Are you in multi-step-form hell with useState/useEffect? XState can make things a LOT easier by colocating all your logic into a single, visualizable spot.

7

24

206

Stately.ai

@statelyai

2 years

👋 The @statelyai team are at @remix_run conf today. Come say hi to @mattpocockuk , @gavmanbauman , @jen_ayy_ and @DavidKPiano !

4

3

189

Stately.ai

@statelyai

3 years

Time to share our current state. We're excited to announce the Stately team that will be working on the mission of making application logic more visual, robust, and accessible. Stay updated and get early access here: 👩‍💻🧑‍💻👇

Stately - Build complex logic intelligently

Build and deploy workflows and app logic with Stately’s AI enhanced, collaborative tools.

stately.ai

12

29

188

Stately.ai

@statelyai

2 years

XState on the backend?! XState is not just a frontend library - it can run anywhere JavaScript runs. With the waitFor helper, you can let XState handle any logic inside an async function. In this video, @mattpocockuk shows you the basics. FULL VIDEO:

9

34

175

Stately.ai

@statelyai

2 years

👋 Goodbye, useEffect! David ditches the useEffect hook and discovers how state machines can be used to simplify effects in our React apps:

David Khourshid @ ReactNext 22 - Goodbye, useEffect

ReactNext 2022www.react-next.comIsrael's Annual React & React-Native conferencePowered by EventHandler-----------------------------------------Goodbye, useEf...

www.youtube.com

5

25

165

Stately.ai

@statelyai

2 years

🔥 XState Tip #1 🔥 You can tidy up your machine definitions massively by being on the lookout for things that _feel_ like promises in your machine. If it looks like a Promise and quacks like a Promise, it's probably a promise.

3

17

148

Stately.ai

@statelyai

2 years

Is XState good with TypeScript? We've worked HARD on making the XState experience with TypeScript better. If you use type generation, you can get AMAZING autocomplete and inference that's just not possible with TS alone. FULL VIDEO:

3

18

140

Stately.ai

@statelyai

2 years

What we think software development is like…

2

17

139

Stately.ai

@statelyai

2 years

🥚 Which is the initial state?

8

9

119

Stately.ai

@statelyai

3 years

{ initial: 'helloWorld' }

6

14

101

Stately.ai

@statelyai

2 years

XState is FANTASTIC for handling complex forms on the frontend. Especially when combined with an existing lib like react-hook-form, you can build all sorts of async validation. FULL VIDEO:

3

22

98

Stately.ai

@statelyai

2 years

🆕 The Official Beginner’s Guide to XState in React 11 bitesize videos to get you started in less than 1 hour! Taught by our very own @mpocock1 .

React & XState Tutorial #1 - Intro and setup

This video is for XState V4. We recommend starting with XState V5. To learn more about XState V5, check out our playlist: https://www.youtube.com/playlist?li...

www.youtube.com

3

22

99

Stately.ai

@statelyai

2 years

What software development is really like…

3

15

98

Stately.ai

@statelyai

2 years

🚀 The XState CLI is now available on npm! Use it to get all the features of typegen in any IDE environment or on your CI. Install it now with npm install @xstate /cli

2

18

95

Stately.ai

@statelyai

2 years

🔥 XState Tip #2 🔥 Always transitions are most useful for two patterns: 1⃣ Creating Choice Nodes 2⃣ Making a 'leave this state when' condition They're FOR SURE one of the most useful bits of a statecharter's toolkit.

3

8

88

Stately.ai

@statelyai

5 months

🌤️ Stately Sky is here! - Build and deploy your workflows to the edge in minutes - Get all the benefits of XState V5 actors - Play live with multiplayer support

3

11

76

Stately.ai

@statelyai

2 years

💼 We’re hiring! Join our in-finite-ly awesome team and build the visual future of software development. We’re a friendly diverse team, work fully remote and have a fantastic work-life balance. Sound good to you? ✨ Find our @statelyai job listings at:

Careers at Stately | Notion

Open Positions

statelyai.notion.site

4

12

76

Stately.ai

@statelyai

2 years

🔥 XState Tip #4 🔥 History States are a powerful, but often misunderstood part of statecharts. They can be useful for modelling 'physical-like' devices, such as remembering which buttons are pushed on a device that's turned off.

1

9

72

Stately.ai

@statelyai

2 years

State machine of the day.

1

7

71

Stately.ai

@statelyai

2 years

Not Wordle, just a state machine ⬛⬛⬛⬛⬛ ⬛🟨➡️🟨⬛ ⬛⬇️⬛⬇️⬛ ⬛🟨➡️🟨⤵️ ⬛⬛⬛⬛🟩

1

20

70

Stately.ai

@statelyai

2 years

We are working on infinite states

2

3

62

Stately.ai

@statelyai

2 years

Hey folks, sorry we’re not around for #StatelyOfficeHours this week. Our team is building bridges in Denmark.

3

4

61

Stately.ai

@statelyai

2 years

🎉XState’s TypeScript experience just got an enormous upgrade. We’ve released Typescript typegen to XState 4.29.0. We’re eventually aiming for perfect types on all parts of XState’s API—and we've made a pretty good start. 📌Read our announcement post:

0

12

58

Stately.ai

@statelyai

2 years

☀️ Day 3 of @reactathon and the team are having a great conference. 👋 Please stop by our @statelyai booth to say hi, we’d love to meet you!

3

4

56

Stately.ai

@statelyai

2 years

🧠 Learn XState in React with our official beginner’s guide. 🏁 Starting with setup! Before you start to build your todo list app, @mpocock1 shows you how to set up your development environment:

React & XState Tutorial #1 - Intro and setup

This video is for XState V4. We recommend starting with XState V5. To learn more about XState V5, check out our playlist: https://www.youtube.com/playlist?li...

www.youtube.com

1

4

56

Stately.ai

@statelyai

3 years

This time tomorrow (Friday at 9AM ET) we’ll be livestreaming our Office Hours again. We’re getting closer to releasing the new visualizer… want a chance to transition to the new one? Tune in! Questions? Tweet us using #StatelyOfficeHours

0

10

55

Stately.ai

@statelyai

1 year

☀️ Boa tarde from Lisbon! The team is having our second-ever hangout in person and it’s a real treat.

5

2

53

Stately.ai

@statelyai

2 years

🤫We’ve got exciting stuff to share with you this week…

0

5

50

Stately.ai

@statelyai

3 months

🪄 You can now import a state machine from a GitHub file, make changes in Stately Studio, and make a pull request back to GitHub without touching any code.

1

5

46

Stately.ai

@statelyai

2 years

⬇️Read @DavidKPiano ’s post all about the Editor and our plans for the future:

1

7

47

Stately.ai

@statelyai

10 months

🆕 You asked for server-side workflow examples for XState… we’ve added 25! Find them in the `next` branch (XState v5) in the XState repo, and browse the full list on our blog:

25 new server-side workflow examples | Stately

We’ve added 25 new server-side workflows examples for XState V5, from simple state machines to more complex workflows.

stately.ai

1

7

46

Stately.ai

@statelyai

3 years

We also have @mpocock1 joining the dev team! He's been producing some great tools for XState, including xstate-codegen and XState Catalogue: 🛠️

XState Catalogue

A collection of professionally designed state machines you can drop into your XState projects

xstate-catalogue.com

2

0

45

Stately.ai

@statelyai

11 months

🎉 XState V5 beta is here! 🏁 Simplified terminology to learn concepts easier ✨ Power and flexibility with an actor-first approach 🔌 Reduced API surface area to get started faster 📚 Examples and docs to cover more use cases

Announcing XState v5 beta | Stately

We’re excited to announce the beta release of XState v5 and related packages after many years of development.

stately.ai

2

9

44

Stately.ai

@statelyai

5 months

🪄 Autolayout has had a glow up! Your messiest machines tidied up with that one magic button…

3

2

43

Stately.ai

@statelyai

3 years

This Friday at 9AM ET (this time tomorrow), our weekly Stately Office Hours will stream live on our YouTube channel. Got any questions for the team? Want to share how you’re using XState? Join us live, or share your questions using #StatelyOfficeHours .

Stately

Visual software modeling tools for making app logic more accessible and robust. Make your code do more 🚀

www.youtube.com

2

5

42

Stately.ai

@statelyai

1 month

☺️

Tanner Linsley

@tannerlinsley

1 month

Every time I open @statelyai , I am blown away by the experience. Not many extremely useful dev tools are also just pure fun to play with. Here's one I made @ReactRally last year about conference attendance!

5

82

2

0

41

Stately.ai

@statelyai

7 months

☀️ Hola 👋 This week the team is away together in Spain. This was a brief moment away from the laptops!

2

3

41

Stately.ai

@statelyai

2 years

🤯 Get started with model-based testing with XState Test… Works with Vitest, Cypress, Playwright, any testing framework of your choice!

Stately.ai

@statelyai

2 years

🔥 XState Test v1 Alpha released 🔥 Do you want DRY, self-documenting tests without duplicated setup? Get MAXIMUM coverage with minimal code by generating your test paths from a state machine. Here's all the new goodness:

13

48

295

0

9

41

Stately.ai

@statelyai

6 months

🤫 Next week is going to be a big week. Can you guess what we’re releasing?

5

4

41

Stately.ai

@statelyai

2 years

🆕 “Just Use Hooks”! In @kvmaes ’ first post on our blog, he explains how to use custom machine hooks to integrate XState machines into your React components.

2

5

40

Stately.ai

@statelyai

1 year

⏪ Throwback to last week co-working in person! Even though we were in beautiful Lisbon, you couldn’t keep us away from our laptops…

4

0

39

Stately.ai

@statelyai

10 months

🆕 We’ve released a huge update to Stately Studio: 🌈 Bring color to your flows! 📝 Design more logic on the canvas 🧩 Visual effects blocks 🔥 Refined statechart design 🎧 Hide the UI to focus 💪 Tags and built-in XState actions 🚚 Export to XState v5 beta

2

4

39

Stately.ai

@statelyai

2 years

You don’t need a library for state machines… but you probably need state machines. ⬇️ Read @DavidKPiano ’s case for state machines in this classic blog post

0

10

38

Stately.ai

@statelyai

2 years

🕹 Check out this cool video game main menu state machine by @tivac !

5

6

38

Stately.ai

@statelyai

3 years

And we're happy to welcome @LauraKalbag , co-founder of , who will be working with us on Dev & Designer Relations! She’s been a dev & designer herself for over a decade, has given talks in 15 countries, and wrote the book Accessibility For Everyone 📘

Small Technology Foundation

Hello! We’re a tiny and independent two-person not-for-profit based in Ireland. We are building the Small Web. No, it’s not web3, it’s web0.

small-tech.org

1

2

36

Stately.ai

@statelyai

3 years

Also excited to welcome @AndaristRake to the team! He has been helping to develop XState for the past 3 years and is also known for maintaining a package or two (or 100) 📦

2

0

36

Stately.ai

@statelyai

3 years

This time tomorrow (Friday at 9AM ET), our weekly Stately Office Hours will stream live on our YouTube channel. We’ll be giving you a preview of the new Visualizer! Got any questions? Features on your wish list? Use #StatelyOfficeHours And join us live:

Stately Office Hours July 30 2021

Friday at 9AM ET, our weekly Stately Office Hours will stream live on our YouTube channel. Got any questions for the team? Want to share how you’re using XSt...

www.youtube.com

4

5

35

Stately.ai

@statelyai

2 years

This timeline 😰

2

6

34

Stately.ai

@statelyai

2 years

Folks often ask us for tips on modeling state machines @mpocock1 wrote an essential primer on choosing between context and states.

0

10

34

Stately.ai

@statelyai

3 years

As we mentioned in the #StatelyOfficeHours , we’ve got a survey and we’d really appreciate your responses. Help us shape the future of XState!

XState Survey

Help us shape the future of XState tooling!

docs.google.com

0

18

33

Stately.ai

@statelyai

2 years

XState + forms = ❤️ Watch @erikras ’s fantastic talk demonstrating how to manage wizard form state with a finite state machine using XState.

Infobip Shift 2021: You're a Wizard Form, Harry - Erik Rasmussen...

Get your tickets for Infobip Shift 2023 at https://shift.infobip.com/https://twitter.com/InfobipShift Sometimes forms get too big or need to be dynamic. Wiza...

www.youtube.com

2

5

33

Stately.ai

@statelyai

9 months

🔎 You can now access all the key information about a state without opening any panels. Tags, markdown descriptions, entry and exit actions, and invoked actors… all shown on the state and editable from the canvas 🎉

2

4

31

Stately.ai

@statelyai

2 years

Come find @jen_ayy_ and @davidkpiano at the @xata booth at @ReactSummit !

Xata 🦋

@xata

2 years

The Xata vibe is real at @reactsummit here in Amsterdam today. Come join us at our shared booth with the wonderful @statelyai crew and hear about our serverless database and visualizing your application logic. We have all the swag! Get some!

1

3

24

6

4

32

Stately.ai

@statelyai

2 years

🥵 If complexity is scaling out of control in your React app, you might need XState. @mattpocockuk takes a badly-built fetch and gives it error handling, timeouts and exponential backoff… all using our @statelyai visual editor!

How XState scales to ANY requirement

This video is for XState V4. We recommend starting with XState V5. To learn more about XState V5, check out our playlist: https://www.youtube.com/playlist?li...

www.youtube.com

1

5

32

Stately.ai

@statelyai

3 years

Welcome @farzad_yz to the dev team! He's been working with and giving talks on state machines and statecharts for years, and is going to help bring the visual tooling to the next level 📈

3

1

31

Stately.ai

@statelyai

2 years

🧰If you’re a @vuejs fan, you should check out Vurian. It’s a Vue 3 component library project by @MayaShavin for organizing components using state machines (and XState!)

Introduction

vurianjs.netlify.app

0

6

31

Stately.ai

@statelyai

3 years

How do you convince your teammates to use XState? #StatelyQuestionOfTheWeek

18

6

31

Stately.ai

@statelyai

1 year

🖼️ Have you tried putting images in your descriptions yet? With our recent support for markdown in state and event descriptions, you can create fun machines like this:

1

5

30

Stately.ai

@statelyai

1 year

🆕 🎉 Get started in the Stately Studio with our new video tutorials designed to help you learn the concepts and how-tos in bite-size videos! First up… 1️⃣ What are state machines and statecharts?

0

6

29

Stately.ai

@statelyai

2 years

⬇️ Redux is half of a pattern. @DavidKPiano highlights some reasons why Redux is not a standalone pattern by comparing it to a fundamental, well-established pattern: the finite state machine.

1

5

29

Stately.ai

@statelyai

4 months

🆕 We’ve got a stack of new features this week. Starting with… Sources! Yes, you can now provide implementation source code for your actions, actors, and guards to get full bidirectional editing between the editor and your codebase 🎉

1

4

28

Stately.ai

@statelyai

7 months

👋 We’re at @ReactAlicante . Come find us to talk about all things state machines and app logic! #ReactAlicante2023

1

4

27

Stately.ai

@statelyai

11 months

↪️ Coming soon… better self-transitions! We know single states with many self-transitions is a common pattern in your state machines. Soon their transition arrows will be tidier and easier to read.

1

28

Stately.ai

@statelyai

9 months

✨ When you’re working with a complex flow, sometimes you just want to get everything else out your way… Hide the canvas grid and all the UI panels with just a few clicks or keyboard shortcuts.

0

4

25

Stately.ai

@statelyai

1 year

💕 Talking to Valentine…

2

3

27

Stately.ai

@statelyai

2 years

🧠Learn the basics and the benefits of state machines for React in this tutorial by @DavidKPiano on @css .

Robust React User Interfaces with Finite State Machines | CSS-Tricks

Learn to simplify the complexity and improve the testability of your React applications by using finite state machine patterns.

css-tricks.com

1

2

26

Stately.ai

@statelyai

2 years

We’d love to know what you think! What are the opportunities and challenges for using XState on the backend? We’ll discuss XState and the backend in this week’s #StatelyOfficeHours on Friday.

5

3

27

Stately.ai

@statelyai

2 years

☀️ Light mode is now available in the @statelyai editor!

2

5

27

Stately.ai

@statelyai

2 years

✏️Do you want to get started modeling statecharts? @mpocock1 has written a step-by-step guide on how he models statecharts from scratch.

0

6

27

Stately.ai

@statelyai

5 months

✨ New (experimental) feature alert! Coming from another state manager? Import your Redux or Zustand logic into the Stately editor, and we’ll handle the rest. More libraries, DSLs, and languages to come!

2

4

27

Stately.ai

@statelyai

2 years

⏰ Watch @DavidKPiano give his talk “Goodbye, useEffect” live on the @reactathon livestream in a couple hours!

Reactathon 2022 Day 2 Livestream

Live from Reactathon Day 2 in Berkeley, CA. Learn more at https://reactathon.comSpeakers today: Shruti Kapoor, Paypal: Everything you need to know about Reac...

www.youtube.com

0

3

27

Stately.ai

@statelyai

5 months

🎉 Exciting news! On Monday, @thesegunadebayo and our very own @farzad_yz are kicking off a new livestream series building complex UI components using Stately Studio. Starting with a draggable and resizable panel:

Building a Draggable Panel using XState and Stately

Join Sage and Farzad as they design a draggable and resizable panel with some cool features!

www.youtube.com

0

4

26

Stately.ai

@statelyai

3 months

🖼️ Happy Friday! You can now embed Figma frames in states!

3

4

25

Stately.ai

@statelyai

2 years

😍 An excellent and detailed introduction to XState by Daniel Belo Gonçalves on @theodo ’s blog:

Simplify your full-stack applications with XState | Theodo

Get started with XState and learn about all it's great features, including how you can use it on the backend!

blog.theodo.com

0

9

26

Stately.ai

@statelyai

2 years

💙 And please support us on @ProductHunt to help others find us!

Stately Viz - Product Information, Latest Updates, and Reviews 2024 | Product Hunt

Stately Viz visualizes, simulates, and inspects state machines and statecharts created with XState in real-time.

www.producthunt.com

1

2

26

Stately.ai

@statelyai

2 years

⬇️ Start using XState with React easily with @mpocock1 ’s classic blog post, “Just use props”…

1

3

25

Stately.ai

@statelyai

5 months

How about a sneak peek into one of our huge new features…? 🌤️ Stately Sky 🌤️ Read more about how we’ve worked together with @partykit_io to orchestrate Stately machines in the sky:

PartyKit orchestrates Stately's machines in the Sky

Anders Bech Mellson explains how PartyKit has enabled bringing state machines to the Stately Sky 🌤️

blog.partykit.io

3

7

25

Stately.ai

@statelyai

2 years

🎉 We’re delighted to welcome @kvmaes to the team! Kevin is joining our team of engineers creating @statelyai tools and we’re really excited to work with him.

2

1

26

Stately.ai

@statelyai

3 months

🔬 Stately Inspector is now available in beta! Visualize the state of any application, frontend or backend, with state machines and sequence diagrams. npm install @statelyai /inspect

1

5

26

Stately.ai

@statelyai

2 years

❓How did you first learn about state machines?

27

3

25

Stately.ai

@statelyai

2 years

🤩 Check out how our friend @erikras used the @statelyai editor to model React lifecycle methods! 👏

0

8

25

Stately.ai

@statelyai

8 months

Big if true

Kent C. Dodds 🌌

@kentcdodds

8 months

state machines are great btw

17

8

191

0

3

24

Stately.ai

@statelyai

2 years

🚀 New features now available in the @statelyai Editor! 🧵 Read the thread for details and check out the editor at:

1

24

Stately.ai

@statelyai

4 months

🚤 Jump into XState v5 fast with our new cheatsheet:

Cheatsheet | Stately

Use this cheatsheet to quickly look up the syntax for XState v5.

stately.ai

1

2

23

Stately.ai

@statelyai

2 years

▶️ Watch @mattpocockuk and @jamonholmgren refactor a React Native auth flow into XState and MobX! From last week’s React Native Live livestream:

XState + Ignite - Matt Pocock & Jamon - React Native Live

Come hang out with us as Matt Pocock & Jamon refactor a React Native auth flow into XState and MobX!

www.youtube.com

2

3

24

Stately.ai

@statelyai

2 years

🥳 A fantastic start to the week… please welcome @andersmellson to the @statelyai team! Anders is joining our engineering team working on our Stately tools and we can’t wait to have his input.

2

0

24

Stately.ai

@statelyai

2 years

Stately Stream: Modeling an editor feature

Stately.ai - @statelyai

Stately Stream: Modeling an editor feature

1

23

Stately.ai

@statelyai

2 years

oh no

1

24

Stately.ai

@statelyai

9 months

🧜 If you ever wanted to share your diagrams to GitHub and GitLab, you’ll love our new export to Mermaid! Get your state machine as Mermaid text or an SVG diagram with just two clicks:

1

4

24

Stately.ai

@statelyai

5 months

👋 Did you transition to XState V5 yet? It’s superpowered, simpler, and smaller. With Stately Studio support and a brand new Stately inspector coming very soon! 👥 Does your team need V4 -> V5 migration help or workshops to get up and running with XState V5?

2

3

24