Skip to content

Commit de2e1b8

Browse files
waleedlatif1waleedlatif1
committed
improvement(docs): added images and videos to quick references
1 parent be2a9ef commit de2e1b8

26 files changed

+947
-54
lines changed

‎apps/docs/content/docs/en/quick-reference/index.mdx‎

Lines changed: 206 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@ description: Essential actions for navigating and using the Sim workflow editor
55

66
import { Callout } from 'fumadocs-ui/components/callout'
77

8+
export const ActionImage = ({ src, alt }) => (
9+
<img src={src} alt={alt} className="inline-block max-h-8 rounded border border-neutral-200 dark:border-neutral-700" />
10+
)
11+
12+
export const ActionVideo = ({ src, alt }) => (
13+
<video src={src} alt={alt} autoPlay loop muted playsInline className="inline-block max-h-8 rounded border border-neutral-200 dark:border-neutral-700" />
14+
)
15+
816
A quick lookup for everyday actions in the Sim workflow editor. For keyboard shortcuts, see [Keyboard Shortcuts](/keyboard-shortcuts).
917

1018
<Callout type="info">
@@ -13,67 +21,209 @@ A quick lookup for everyday actions in the Sim workflow editor. For keyboard sho
1321

1422
## Workspaces
1523

16-
| Action | How |
17-
|--------|-----|
18-
| Create a workspace | Click workspace dropdown in sidebar → **New Workspace** |
19-
| Rename a workspace | Workspace settings → Edit name |
20-
| Switch workspaces | Click workspace dropdown in sidebar → Select workspace |
21-
| Invite team members | Workspace settings → **Team** → **Invite** |
24+
<table>
25+
<thead>
26+
<tr><th>Action</th><th>How</th><th>Preview</th></tr>
27+
</thead>
28+
<tbody>
29+
<tr>
30+
<td>Create a workspace</td>
31+
<td>Click workspace dropdown → **New Workspace**</td>
32+
<td><ActionVideo src="/static/quick-reference/create-workspace.mp4" alt="Create workspace" /></td>
33+
</tr>
34+
<tr>
35+
<td>Switch workspaces</td>
36+
<td>Click workspace dropdown → Select workspace</td>
37+
<td><ActionVideo src="/static/quick-reference/switch-workspace.mp4" alt="Switch workspaces" /></td>
38+
</tr>
39+
<tr>
40+
<td>Invite team members</td>
41+
<td>Workspace settings → **Team** → **Invite**</td>
42+
<td><ActionVideo src="/static/quick-reference/invite.mp4" alt="Invite team members" /></td>
43+
</tr>
44+
<tr>
45+
<td>Rename a workspace</td>
46+
<td>Right-click workspace → **Rename**</td>
47+
<td rowSpan={4}><ActionImage src="/static/quick-reference/workspace-context-menu.png" alt="Workspace context menu" /></td>
48+
</tr>
49+
<tr>
50+
<td>Duplicate a workspace</td>
51+
<td>Right-click workspace → **Duplicate**</td>
52+
</tr>
53+
<tr>
54+
<td>Export a workspace</td>
55+
<td>Right-click workspace → **Export**</td>
56+
</tr>
57+
<tr>
58+
<td>Delete a workspace</td>
59+
<td>Right-click workspace → **Delete**</td>
60+
</tr>
61+
</tbody>
62+
</table>
2263

2364
## Workflows
2465

25-
| Action | How |
26-
|--------|-----|
27-
| Create a workflow | Click **New Workflow** button or `Mod+Shift+A` |
28-
| Rename a workflow | Double-click workflow name in sidebar, or right-click → **Rename** |
29-
| Duplicate a workflow | Right-click workflow → **Duplicate** |
30-
| Reorder workflows | Drag workflow up/down in the sidebar list |
31-
| Import a workflow | Sidebar menu → **Import** → Select file |
32-
| Create a folder | Right-click in sidebar → **New Folder** |
33-
| Rename a folder | Right-click folder → **Rename** |
34-
| Delete a folder | Right-click folder → **Delete** |
35-
| Collapse/expand folder | Click folder arrow, or double-click folder |
36-
| Move workflow to folder | Drag workflow onto folder in sidebar |
37-
| Delete a workflow | Right-click workflow → **Delete** |
38-
| Export a workflow | Right-click workflow → **Export** |
39-
| Assign workflow color | Right-click workflow → **Change Color** |
40-
| Multi-select workflows | `Mod+Click` or `Shift+Click` workflows in sidebar |
41-
| Open in new tab | Right-click workflow → **Open in New Tab** |
66+
<table>
67+
<thead>
68+
<tr><th>Action</th><th>How</th><th>Preview</th></tr>
69+
</thead>
70+
<tbody>
71+
<tr>
72+
<td>Create a workflow</td>
73+
<td>Click **+** button in sidebar</td>
74+
<td><ActionImage src="/static/quick-reference/create-workflow.png" alt="Create workflow" /></td>
75+
</tr>
76+
<tr>
77+
<td>Reorder / move workflows</td>
78+
<td>Drag workflow up/down or onto a folder</td>
79+
<td><ActionVideo src="/static/quick-reference/reordering.mp4" alt="Reorder workflows" /></td>
80+
</tr>
81+
<tr>
82+
<td>Import a workflow</td>
83+
<td>Click import button in sidebar → Select file</td>
84+
<td><ActionImage src="/static/quick-reference/import-workflow.png" alt="Import workflow" /></td>
85+
</tr>
86+
<tr>
87+
<td>Multi-select workflows</td>
88+
<td>`Mod+Click` or `Shift+Click` workflows in sidebar</td>
89+
<td><ActionVideo src="/static/quick-reference/multiselect.mp4" alt="Multi-select workflows" /></td>
90+
</tr>
91+
<tr>
92+
<td>Open in new tab</td>
93+
<td>Right-click workflow → **Open in New Tab**</td>
94+
<td rowSpan={6}><ActionImage src="/static/quick-reference/workflow-context-menu.png" alt="Workflow context menu" /></td>
95+
</tr>
96+
<tr>
97+
<td>Rename a workflow</td>
98+
<td>Right-click workflow → **Rename**</td>
99+
</tr>
100+
<tr>
101+
<td>Assign workflow color</td>
102+
<td>Right-click workflow → **Change Color**</td>
103+
</tr>
104+
<tr>
105+
<td>Duplicate a workflow</td>
106+
<td>Right-click workflow → **Duplicate**</td>
107+
</tr>
108+
<tr>
109+
<td>Export a workflow</td>
110+
<td>Right-click workflow → **Export**</td>
111+
</tr>
112+
<tr>
113+
<td>Delete a workflow</td>
114+
<td>Right-click workflow → **Delete**</td>
115+
</tr>
116+
<tr>
117+
<td>Rename a folder</td>
118+
<td>Right-click folder → **Rename**</td>
119+
<td rowSpan={6}><ActionImage src="/static/quick-reference/folder-context-menu.png" alt="Folder context menu" /></td>
120+
</tr>
121+
<tr>
122+
<td>Create workflow in folder</td>
123+
<td>Right-click folder → **Create workflow**</td>
124+
</tr>
125+
<tr>
126+
<td>Create folder in folder</td>
127+
<td>Right-click folder → **Create folder**</td>
128+
</tr>
129+
<tr>
130+
<td>Duplicate a folder</td>
131+
<td>Right-click folder → **Duplicate**</td>
132+
</tr>
133+
<tr>
134+
<td>Export a folder</td>
135+
<td>Right-click folder → **Export**</td>
136+
</tr>
137+
<tr>
138+
<td>Delete a folder</td>
139+
<td>Right-click folder → **Delete**</td>
140+
</tr>
141+
</tbody>
142+
</table>
42143

43144
## Blocks
44145

45-
| Action | How |
46-
|--------|-----|
47-
| Add a block | Drag from Toolbar panel, or right-click canvas → **Add Block** |
48-
| Select a block | Click on the block |
49-
| Multi-select blocks | `Mod+Click` additional blocks, or right-drag to draw selection box |
50-
| Move blocks | Drag selected block(s) to new position |
51-
| Copy blocks | `Mod+C` with blocks selected |
52-
| Paste blocks | `Mod+V` to paste copied blocks |
53-
| Duplicate blocks | Right-click → **Duplicate** |
54-
| Delete blocks | `Delete` or `Backspace` key, or right-click → **Delete** |
55-
| Rename a block | Click block name in header, or edit in the Editor panel |
56-
| Enable/Disable a block | Right-click → **Enable/Disable** |
57-
| Toggle handle orientation | Right-click → **Toggle Handles** |
58-
| Toggle trigger mode | Right-click trigger block → **Toggle Trigger Mode** |
59-
| Configure a block | Select block → use Editor panel on right |
146+
<table>
147+
<thead>
148+
<tr><th>Action</th><th>How</th><th>Preview</th></tr>
149+
</thead>
150+
<tbody>
151+
<tr>
152+
<td>Add a block</td>
153+
<td>Drag from Toolbar panel, or right-click canvas → **Add Block**</td>
154+
<td><ActionVideo src="/static/quick-reference/add-block.mp4" alt="Add a block" /></td>
155+
</tr>
156+
<tr>
157+
<td>Multi-select blocks</td>
158+
<td>`Mod+Click` additional blocks, or right-drag to draw selection box</td>
159+
<td><ActionVideo src="/static/quick-reference/multiselect-blocks.mp4" alt="Multi-select blocks" /></td>
160+
</tr>
161+
<tr>
162+
<td>Copy blocks</td>
163+
<td>`Mod+C` with blocks selected</td>
164+
<td rowSpan={2}><ActionVideo src="/static/quick-reference/copy-paste.mp4" alt="Copy and paste blocks" /></td>
165+
</tr>
166+
<tr>
167+
<td>Paste blocks</td>
168+
<td>`Mod+V` to paste copied blocks</td>
169+
</tr>
170+
<tr>
171+
<td>Duplicate blocks</td>
172+
<td>Right-click → **Duplicate**</td>
173+
<td><ActionVideo src="/static/quick-reference/duplicate-block.mp4" alt="Duplicate blocks" /></td>
174+
</tr>
175+
<tr>
176+
<td>Delete blocks</td>
177+
<td>`Delete` or `Backspace` key, or right-click → **Delete**</td>
178+
<td><ActionImage src="/static/quick-reference/delete-block.png" alt="Delete block" /></td>
179+
</tr>
180+
<tr>
181+
<td>Rename a block</td>
182+
<td>Click block name in header, or edit in the Editor panel</td>
183+
<td><ActionVideo src="/static/quick-reference/rename-block.mp4" alt="Rename a block" /></td>
184+
</tr>
185+
<tr>
186+
<td>Enable/Disable a block</td>
187+
<td>Right-click → **Enable/Disable**</td>
188+
<td><ActionImage src="/static/quick-reference/disable-block.png" alt="Disable block" /></td>
189+
</tr>
190+
<tr>
191+
<td>Toggle handle orientation</td>
192+
<td>Right-click → **Toggle Handles**</td>
193+
<td><ActionVideo src="/static/quick-reference/toggle-handles.mp4" alt="Toggle handle orientation" /></td>
194+
</tr>
195+
<tr>
196+
<td>Configure a block</td>
197+
<td>Select block → use Editor panel on right</td>
198+
<td><ActionVideo src="/static/quick-reference/configure-block.mp4" alt="Configure a block" /></td>
199+
</tr>
200+
</tbody>
201+
</table>
60202

61203
## Connections
62204

63-
| Action | How |
64-
|--------|-----|
65-
| Create a connection | Drag from output handle to input handle |
66-
| Delete a connection | Click edge to select → `Delete` key |
67-
| Use output in another block | Drag connection tag into input field |
68-
69-
## Canvas Navigation
70-
71-
| Action | How |
72-
|--------|-----|
73-
| Pan/move canvas | Left-drag on empty space, or scroll/trackpad |
74-
| Zoom in/out | Scroll wheel or pinch gesture |
75-
| Auto-layout | `Shift+L` |
76-
| Draw selection box | Right-drag on empty canvas area |
205+
<table>
206+
<thead>
207+
<tr><th>Action</th><th>How</th><th>Preview</th></tr>
208+
</thead>
209+
<tbody>
210+
<tr>
211+
<td>Create a connection</td>
212+
<td>Drag from output handle to input handle</td>
213+
<td><ActionVideo src="/static/quick-reference/connect-blocks.mp4" alt="Connect blocks" /></td>
214+
</tr>
215+
<tr>
216+
<td>Delete a connection</td>
217+
<td>Click edge to select → `Delete` key</td>
218+
<td><ActionVideo src="/static/quick-reference/delete-connection.mp4" alt="Delete connection" /></td>
219+
</tr>
220+
<tr>
221+
<td>Use output in another block</td>
222+
<td>Drag connection tag into input field</td>
223+
<td><ActionVideo src="/static/quick-reference/connection-tag.mp4" alt="Use connection tag" /></td>
224+
</tr>
225+
</tbody>
226+
</table>
77227

78228
## Panels & Views
79229

@@ -83,7 +233,8 @@ A quick lookup for everyday actions in the Sim workflow editor. For keyboard sho
83233
| Open Toolbar tab | Press `T` or click Toolbar tab |
84234
| Open Editor tab | Press `E` or click Editor tab |
85235
| Search toolbar | `Mod+F` |
86-
| Toggle advanced mode | Click toggle button on input fields |
236+
| Search everything | `Mod+K` |
237+
| Toggle manual mode | Click toggle button in editor fields to switch between manual and selector |
87238
| Resize panels | Drag panel edge |
88239
| Collapse/expand sidebar | Click collapse button on sidebar |
89240

@@ -123,7 +274,8 @@ A quick lookup for everyday actions in the Sim workflow editor. For keyboard sho
123274
| Edit workflow variable | Variables tab → Click variable to edit |
124275
| Delete workflow variable | Variables tab → Click delete icon on variable |
125276
| Add environment variable | Settings → **Environment Variables** → **Add** |
126-
| Reference a variable | Use `{{variableName}}` syntax in block inputs |
277+
| Reference a workflow variable | Use `<blockName.itemName>` syntax in block inputs |
278+
| Reference an environment variable | Use `{{ENV_VAR}}` syntax in block inputs |
127279

128280
## Credentials
129281

‎apps/docs/public/static/quick-reference/add-block.mp4‎

299 KB
Binary file not shown.

‎apps/docs/public/static/quick-reference/configure-block.mp4‎

1.54 MB
Binary file not shown.

‎apps/docs/public/static/quick-reference/connect-blocks.mp4‎

224 KB
Binary file not shown.

‎apps/docs/public/static/quick-reference/connection-tag.mp4‎

447 KB
Binary file not shown.

‎apps/docs/public/static/quick-reference/copy-paste.mp4‎

338 KB
Binary file not shown.

‎apps/docs/public/static/quick-reference/create-workflow.png‎

25.7 KB
Loading

‎apps/docs/public/static/quick-reference/create-workspace.mp4‎

295 KB
Binary file not shown.

‎apps/docs/public/static/quick-reference/delete-block.png‎

27.3 KB
Loading

‎apps/docs/public/static/quick-reference/delete-connection.mp4‎

281 KB
Binary file not shown.

0 commit comments

Comments
 (0)