You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Update Studio page and add Design Mode and Simulate Mode basic docs (#182)
* Start work on design mode and simulate mode tour pages
* Update examples page to match v5 version
Towards STA-4670
* Add more info to Simulate mode
* Replace design mode and simulate mode explainers with links to pages
* Replace Design Mode and Simulate Mode sidebar category links
with links to the new dedicated pages
* Finish documenting Simulate mode
Closes STA-3972
* Add Quick start tutorials section to document onboarding + tutorials
Closes STA-4752
* Add labelled screenshot to give brief tour of design mode
* Make video CTA into tip box on studio page
* Add docs updates to V4 section
* Make design mode and simulate mode categories link to pages instead
* Improve copy on Design Mode page
* Fix broken URL
description: 'Tour the features in Stately editor’s Design mode, including a guide to all the panels and how to use the editor.'
4
+
---
5
+
6
+
Design your state machine flows in Design Mode. You can view and edit your machine from the canvas.
7
+
8
+
You can add new [states](states/intro.mdx) by double-clicking anywhere on the canvas, and add [transitions and events](transitions-and-events/intro.mdx) from the handles on each side of the states.
9
+
10
+
<p>
11
+
<ThemedImage
12
+
alt="Numbered screenshot of Stately editor’s Design mode features. Described by list below."
Copy file name to clipboardExpand all lines: docs/examples/intro.mdx
+116-1Lines changed: 116 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,4 +7,119 @@ description: 'Examples are coming soon. If you have any examples you want us to
7
7
8
8
If you have any examples you want us to make, please [add a request to our feedback board](https://feedback.stately.ai/examples) or upvote an existing suggestion.
9
9
10
-
If you have an example you want to share, [let us know on our Stately Discord](https://discord.gg/xstate).
10
+
## Simple fetch example
11
+
12
+
A simple fetch example built with:
13
+
14
+
- XState v5 beta
15
+
- Parcel
16
+
17
+
18
+
-[Simple fetch example on GitHub](https://github.com/statelyai/xstate/tree/next/examples/fetch)
19
+
-[Simple fetch example on CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/examples/fetch)
20
+
21
+
## 7GUIs counter (React)
22
+
23
+
An implementation of the [7GUIs counter](https://eugenkiss.github.io/7guis/tasks/#counter) built with:
24
+
25
+
- XState v5 beta
26
+
- React
27
+
- TypeScript
28
+
- Vite
29
+
30
+
31
+
-[7GUIs counter (React) on GitHub](https://github.com/statelyai/xstate/tree/next/examples/7guis-counter-react)
32
+
-[7GUIs counter (React) on CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/examples/react-7guis-counter)
33
+
34
+
## 7GUIs temperature (React)
35
+
36
+
This is an implementation of the [7GUIs temperature converter](https://eugenkiss.github.io/7guis/tasks#temp) built with:
37
+
38
+
- XState v5 beta
39
+
- React
40
+
- TypeScript
41
+
- Vite
42
+
43
+
44
+
-[7GUIs temperature (React) on GitHub](https://github.com/statelyai/xstate/tree/next/examples/7guis-temperature-react)
45
+
-[7GUIs temperature (React) on CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/examples/react-7guis-temperature)
46
+
47
+
## Simple list (React)
48
+
49
+
A React list built with:
50
+
51
+
- XState v5 beta
52
+
- React
53
+
- TypeScript
54
+
- Vite
55
+
56
+
57
+
-[Simple list (React) on GitHub](https://github.com/statelyai/xstate/tree/next/examples/friends-list-react)
58
+
-[Simple list (React) on CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/examples/react-list)
59
+
60
+
## Stopwatch
61
+
62
+
A simple stopwatch built with:
63
+
64
+
- XState v5 beta
65
+
- TypeScript
66
+
- Vite
67
+
68
+
69
+
-[Stopwatch on GitHub](https://github.com/statelyai/xstate/tree/next/examples/stopwatch)
70
+
-[Stopwatch on CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/examples/stopwatch)
71
+
72
+
## Tic-tac-toe game (React)
73
+
74
+
An implementation of tic-tac-toe built with:
75
+
76
+
- XState v5 beta
77
+
- React
78
+
- TypeScript
79
+
- Vite
80
+
81
+
82
+
-[Tic-tac-toe game (React) on GitHub](https://github.com/statelyai/xstate/tree/next/examples/tic-tac-toe-react)
83
+
-[Tic-tac-toe game (React) on CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/examples/react-tic-tac-toe)
84
+
85
+
## Tiles game (React)
86
+
87
+
A simple tiles game built with:
88
+
89
+
- XState v5 beta
90
+
- React
91
+
- TypeScript
92
+
- Vite
93
+
94
+
95
+
-[Tiles game (React) on GitHub](https://github.com/statelyai/xstate/tree/next/examples/tiles)
96
+
-[Tiles game (React) on CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/examples/tiles)
97
+
98
+
## TodoMVC (React)
99
+
100
+
An implementation of [TodoMVC](https://todomvc.com/) built with:
101
+
102
+
- XState v5 beta
103
+
- React
104
+
- TypeScript
105
+
- Vite
106
+
107
+
108
+
-[TodoMVC (React) on GitHub](https://github.com/statelyai/xstate/tree/next/examples/todomvc-react)
109
+
-[TodoMVC (React) on CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/examples/todomvc-react)
110
+
111
+
## Toggle
112
+
113
+
A simple toggle built with:
114
+
115
+
- XState v5 beta
116
+
- TypeScript
117
+
- Vite
118
+
119
+
120
+
-[Toggle on GitHub](https://github.com/statelyai/xstate/tree/next/examples/toggle)
121
+
-[Toggle on CodeSandbox](https://codesandbox.io/p/sandbox/github/statelyai/xstate/tree/next/examples/toggle)
122
+
123
+
**More examples are coming soon**. If you have any examples you want us to make, please [add a request to our feedback board](https://feedback.stately.ai/examples) or upvote an existing suggestion.
124
+
125
+
If you have an example you want to share, [contribute your example to the XState repository](https://github.com/statelyai/xstate/tree/next/examples#contributing-an-example).
description: 'Tour the features in Stately editor’s Simulate mode, including a guide to all the panels and how to simulate your machines.'
4
+
---
5
+
6
+
You can simulate your machine as if it were live in Simulate Mode. Your machine will start in the initial state, and any possible events that can be triggered are highlighted in blue.
Press any available event to walk through your machine. Use <RefreshCcwsize={12}/> **Reset** to return to the initial state and clear the <ListOrderedIconsize={12} /> [Log](#log).
13
+
14
+
:::caution
15
+
16
+
Simulate mode is disabled if your machine contains errors. States and events with errors are marked with an <AlertCirclesize={12} /> error icon in **Design** mode. Hover over any error icon to find out more about the error. Fix all the errors to enable Simulate mode.
17
+
18
+
:::
19
+
20
+
### Eventless (always) events
21
+
22
+
Eventless (always) events will be triggered instantly upon entering their source state unless they’re guarded with a condition.
23
+
24
+
### Delayed (after) events
25
+
26
+
Delayed (after) events will be taken automatically after completing the timer.
27
+
28
+
## Log
29
+
30
+
All triggered events are recorded, in order, in the <ListOrderedIconsize={12} /> Log panel, along with their target state. Press any event in the log panel list to return to that event. Press any state in the log panel list to return to that state.
31
+
32
+
Use <RefreshCcwsize={12}/> **Reset** to return to the initial state and clear the <ListOrderedIconsize={12} /> [Log](#log).
33
+
34
+
:::studio
35
+
36
+
[Live simulation mode](live-simulation.mdx) ([pro feature](studio-pro-plan.mdx)) helps you share your simulated machine with your team without screen sharing or screenshots.
Copy file name to clipboardExpand all lines: docs/studio.mdx
+18-44Lines changed: 18 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -34,7 +34,7 @@ Here you can find all the documentation for the Stately Studio and [XState](/xst
34
34
</li>
35
35
</ul>
36
36
37
-
The Stately Studio is a suite of tools for building app logic, including the Studio Editor, [developer tools for XState](/tools/developer-tools.mdx), and much more coming soon.
37
+
Stately Studio is a suite of tools for building app logic, including the Editor, [developer tools for XState](/tools/developer-tools.mdx), and much more coming soon.
38
38
39
39
<p>
40
40
<ThemedImage
@@ -46,51 +46,33 @@ The Stately Studio is a suite of tools for building app logic, including the Stu
46
46
/>
47
47
</p>
48
48
49
-
You can use the [Studio Editor](#studio-editor) to model your logic using state machines and statecharts visually; no code required! Collaborate on your machines with coworkers and friends with [shared projects in teams](#projects-and-teams). Use the [XState VS Code extension](/tools/xstate-vscode-extension.mdx) to use the Editor with your codebase inside your code editor, or [export](#export) your code from the Studio into your codebase.
49
+
You can use [Stately Studio’s editor](#studio-editor) to model your logic using state machines and statecharts visually; no code required! Collaborate on your machines with coworkers and friends with [shared projects in teams](/#projects-and-teams). Use the [XState VS Code extension](/tools/xstate-vscode-extension.mdx) to use the editor with your codebase inside your code editor, or [export](/#export) your code from Stately Studio into your codebase.
50
50
51
51
:::tip
52
52
53
-
What are state machines and statecharts? We’re glad you asked! [Check out our no-code introduction to state machines and statecharts](/state-machines-and-statecharts.mdx).
53
+
What are state machines and statecharts? We’re glad you asked! [Check out our no-code introduction to state machines and statecharts](state-machines-and-statecharts.mdx).
54
54
55
55
:::
56
56
57
-
## Stately Studio editor
57
+
## Stately Studio’s editor
58
58
59
-
Stately Studio’s editor supports everything you need to visually build state machines and statecharts. The editor currently has two modes; **Design** mode for creating your machines and **Simulation** mode for simulating how your machine works.
59
+
Stately Studio’s editor supports everything you need to visually build state machines and statecharts. The editor currently has two modes; [**Design** mode](design-mode.mdx) for creating your machines and [**Simulate** mode](simulate-mode.mdx) for simulating how your machine works.
60
60
61
-
### Design mode
61
+
:::video
62
62
63
-
<p>
64
-
<ThemedImage
65
-
alt="A dog walk machine open in Stately Studio’s editor in Design mode. The running state is selected, with the right panel showing options for a state."
66
-
sources={{
67
-
light: '/editor.png',
68
-
dark: '/editor-dm.png',
69
-
}}
70
-
/>
71
-
</p>
72
-
73
-
Visually add, modify, and delete states, events, and transitions, as well as data, including actions, descriptions, and invoked actors.
74
-
75
-
### Simulation mode
63
+
[Learn how to use Stately in our quick introduction video (7m36s)](https://www.youtube.com/watch?v=EzYIerEutgk).
76
64
77
-
<p>
78
-
<ThemedImage
79
-
alt="A dog walk machine open in Stately Studio’s editor in Simulate mode. The walking state is active, with the speed up and arrive home events both highlighted showing which events could be triggered next. The right panel shows an event log of the states and events taken."
80
-
sources={{
81
-
light: '/simulate.png',
82
-
dark: '/simulate-dm.png',
83
-
}}
84
-
/>
85
-
</p>
65
+
:::
86
66
87
-
Run the statechart, trigger events, and see the active state nodes.
67
+
### Quick start tutorials
88
68
89
-
### Export
69
+
You can access quick start tutorials from the blue <HelpCirclesize={12} /> Help button in the editor.
90
70
91
-
You can also export machines to JSON, JavaScript and TypeScript, ready to be used in your codebase with [XState](/xstate/intro.mdx).
71
+
When you first visit the Editor, you’ll be shown two short videos (7m36s) as a quick start guide. You can access these videos again anytime from:
72
+
- Editor menu > Help > <GraduationCapsize={12} /> **Learn Stately**.
73
+
- The <HelpCirclesize={12} /> Help button > <GraduationCapsize={12} /> **Learn Stately**.
92
74
93
-
## Projects and teams
75
+
###Projects and teams
94
76
95
77
<p>
96
78
<ThemedImage
@@ -102,7 +84,7 @@ You can also export machines to JSON, JavaScript and TypeScript, ready to be use
102
84
/>
103
85
</p>
104
86
105
-
As a [Pro user](https://stately.ai/pricing), you can create and join teams in the Stately Studio to share your machines and collaborate on private team projects. [Read more about Projects](projects.mdx) and [Teams](teams.mdx).
87
+
As a [Pro user](https://stately.ai/pricing), you can create and join teams in Stately Studio to share your machines and collaborate on private team projects. [Read more about Projects](projects.mdx) and [Teams](teams.mdx).
106
88
107
89
<p>
108
90
<ThemedImage
@@ -114,9 +96,9 @@ As a [Pro user](https://stately.ai/pricing), you can create and join teams in th
114
96
/>
115
97
</p>
116
98
117
-
## Discover machines
99
+
###Discover machines
118
100
119
-
Are you seeking inspiration for your machine? Or do you want to learn from how somebody else models their machines? The [Discover page](https://stately.ai/registry/discover) lists all the public machines created with the Stately Studio. [Read more about the Discover page](/discover.mdx).
101
+
Are you seeking inspiration for your machine? Or do you want to learn from how somebody else models their machines? The [Discover page](https://stately.ai/registry/discover) lists all the public machines created with Stately Studio. [Read more about the Discover page](discover.mdx).
120
102
121
103
<p>
122
104
<ThemedImage
@@ -130,14 +112,6 @@ Are you seeking inspiration for your machine? Or do you want to learn from how s
130
112
131
113
## Our roadmap
132
114
133
-
Do you want to request a feature in the Stately Studio? [Check out our Canny roadmap](https://feedback.stately.ai) to post your feature idea and upvote other features. Our roadmap also shows you the features we have planned and those already in progress.
115
+
Do you want to request a feature in Stately Studio? [Check out our roadmap](https://feedback.stately.ai) to post your feature ideas and upvote other features. Our roadmap also shows you the features we have planned and those already in progress.
134
116
135
117
You can also keep up with the Stately team’s work in progress at our regular [office hour live streams](https://youtube.com/statelyai).
136
-
137
-
:::xstate
138
-
139
-
## Powered by XState
140
-
141
-
The Stately Studio is powered by [XState](/xstate/installation.mdx), a best-in-class open source library for handling complexity at scale.
description: 'Tour the features in Stately editor’s Design mode, including a guide to all the panels and how to use the editor.'
4
+
---
5
+
6
+
Design your state machine flows in Design Mode.
7
+
8
+
You can add new [states](states.mdx) by double-clicking anywhere on the canvas, and add [transitions and events](transitions.mdx) from the handles on each side of the states.
9
+
10
+
<p>
11
+
<ThemedImage
12
+
alt="Numbered screenshot of Stately editor’s Design mode features. Described by list below."
0 commit comments