The Interface✎

The editor on a computer, with a graph open and nothing selected.

Hover a control or its row to light the other.

1. 1The graphFills the window; everything else floats over it. Every key and gesture it takes is on Controls.
2. 2The markOpens your projects and the demos. Its tooltip, and that panel, say which build this is.
3. 3ModesEditor, Design and Docs, with a box behind the one you are in. A click switches this tab and keeps the editor as you left it; Ctrl-click or right-click opens a new tab.
4. 4The projectThe button for the Project and Variables cards, then Refresh, New graph and New node map.
5. 5TabsOne per open graph.
6. 6Graph toolsAdd node, Refactor and Preview.
7. 7CompilingManual or Dynamic, Compile project, and Compile script for the open graph.
8. 8Inspector, Export and SettingsThe button for the Inspector's card, then Export and Settings. Every button is on Toolbars.
9. 9ProjectThe project's files: graphs, node maps, and the Luau compiled from them. With a place, its DataModel too. See The Project panel.
10. 10VariablesWhat the open graph declares — variables, modules, functions and locals. Drag one onto the graph to use it.
11. 11InspectorWith nothing selected, the graph's own settings: what it compiles to, its type checking and its target. Select a node for its settings instead.
12. 12Script analysisThis Script and Project, each with its count; Check reads every graph without writing. The button at the end folds the list away.
13. 13Side stripZoom in, the zoom slider and zoom out, back to 100%, undo and redo, and fitting the graph to the window.

The editor on a tablet held sideways, with the Inspector slid out and nothing selected.

1. 1The graphOne finger pans and two pinch; press and hold to select a group. Tap with two fingers to undo, three to redo. The rest is on Controls.
2. 2The markAs on a computer.
3. 3ModesAs on a computer.
4. 4The projectAs on a computer; Project and Variables slide out over the graph. Held upright, Refresh and the New buttons are in More.
5. 5TabsOne per open graph.
6. 6Graph toolsAs on a computer.
7. 7CompilingAs on a computer, the two compile buttons as their glyphs. Held upright, only Compile script stays.
8. 8Inspector, Export and SettingsThe Inspector slides out from the right. Held upright, Export stays beside it and Settings is in More.
9. 9Side stripDown the left edge, under a thumb.
10. 10A card, slid outProject, Variables and the Inspector come out over the graph one side at a time. Tap the graph beside one to put it away.
11. 11Script analysisAbove the action row, beside the side strip.
12. 12Action rowTouch screens onlyThe edits a keyboard makes, as buttons; more of them while something is selected. Each one is named below.

The editor on a phone, with a graph open and nothing selected.

1. 1The graphThe same gestures as on a tablet; see Controls. There is no side strip: pinch to zoom.
2. 2The markWith a grey graph beside it, to say this is the editor. It opens your projects.
3. 3The open graphIts tab. The others are in a list beside it.
4. 4Compile scriptAs its icon.
5. 5MoreThe rest of a computer's row, with Add node and Preview.
6. 6Script analysisAbove the bar.
7. 7Bottom barProject and Variables at its left end, the Inspector at its right: each slides up over the graph. Between them, the action row.

Node Design on a computer, with a node open, its logic written as Luau, and a pin selected.

1. 1LogicBehind everything: what the node does when it runs, as the graph its nodes build. Written as Luau, the sheet below is in front of it.
2. 2The markOpens your projects and the demos.
3. 3ModesEditor, Design and Docs, with a box behind the one you are in. A click switches this tab and keeps the editor as you left it; Ctrl-click or right-click opens a new tab.
4. 4Luau or NodesWith a node openWrite the logic as Luau, or build it from nodes.
5. 5Node actionsWith a node openDetails, the node's kind, delete, and Save. Each is on Toolbars.
6. 6Help and SettingsHow custom nodes work, and Settings.
7. 7Node listThe pack's nodes, what it requires, and a new node. Back to every pack from its top.
8. 8LuauThe logic as a template. Built from nodes instead, the graph behind it shows.
9. 9The nodeOn a plate, as a graph will draw it, with its pin counts under it. Click a pin to edit it; the title bar folds the plate away.
10. 10Pin editorWith a pin selectedThe selected pin's name, type, default, choices and tooltip. Details, when on, is a card under it.
11. 11ProblemsWhat stops the node saving, or that it is ready to.
12. 12Pin typesDrag one onto the node: the left half adds an input, the right half an output.

Node Design on a tablet held sideways, with a node open and its logic written as Luau.

1. 1LogicAs on a computer, with the touch gestures on Controls.
2. 2The markAs on a computer.
3. 3ModesAs on a computer.
4. 4Luau or NodesWith a node openAs on a computer.
5. 5Node actionsWith a node openAs on a computer.
6. 6Help and SettingsAs on a computer.
7. 7Pack barTouch screens onlyThe pack, which slides its node list out over the editor, and the open node.
8. 8LuauAs on a computer.
9. 9The nodeOn its plate, as on a computer.
10. 10ProblemsAs on a computer.
11. 11Pin typesAs on a computer. At this width the real row wraps onto a second line; the first is drawn.

Node Design on a phone, showing a node rather than its logic.

1. 1The node, or its logicOne at a time, with the whole screen.
2. 2The markWith a grey palette beside it, to say this is Node Design.
3. 3Node actionsWith a node openDetails and Save as their icons; the node's kind, and delete, behind a button that names the kind.
4. 4MoreHow custom nodes work, Docs, the editor and Settings.
5. 5Pack barAs on a tablet, with the switch between the node and its logic.
6. 6The nodeWith the node showingOn its plate; Pins under it holds the pin counts.
7. 7ProblemsAs on a computer, under the pack bar.
8. 8Pin typesWith the node showingThe types to drag onto the node, behind a button. A type still drags out of its list.