[{"data":1,"prerenderedAt":1030},["ShallowReactive",2],{"node-red-\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fworkspace":3},{"id":4,"title":5,"body":6,"description":1022,"extension":1023,"meta":1024,"navigation":1025,"path":1026,"seo":1027,"stem":1028,"__hash__":1029},"nodeRed\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fworkspace.md","Node-RED Editor Workspace",{"type":7,"value":8,"toc":969},"minimark",[9,17,21,28,33,39,57,63,66,69,73,79,85,92,96,102,105,110,116,125,129,135,138,142,148,151,157,160,164,170,173,179,182,186,192,195,199,205,208,214,218,224,227,233,236,240,246,249,255,258,264,267,273,276,280,286,289,298,302,308,311,315,321,324,329,333,339,342,346,352,359,363,369,372,378,381,387,390,396,399,405,411,414,418,421,426,434,438,441,447,467,470,474,482,486,492,495,501,506,512,517,521,527,530,534,540,543,547,550,553,565,568,574,582,585,591,594,597,601,607,610,614,620,634,637,641,647,654,658,664,671,676,679,683,689,699,703,707,713,721,725,731,739,743,749,752,756,762,772,776,782,785,788,792,797,800,804,810,813,817,823,826,830,836,843,847,853,859,863,869,875,879,882,892,896,902,905,909,915,921,925,931,937,941,947,953,957,963],[10,11,13],"h1",{"id":12},"",[14,15],"binding",{"value":16},"meta.title",[18,19,20],"p",{},"The workspace is the main area in the editor where you build application flows by dropping nodes from the palette.",[18,22,23],{},[24,25],"img",{"alt":26,"dataZoomable":12,"src":27,"title":26},"Image showing workspace in the editor","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Feditor-workspace.png",[29,30,32],"h2",{"id":31},"view-tools","View Tools",[18,34,35],{},[24,36],{"alt":37,"dataZoomable":12,"src":38,"title":37},"Image showing view tools in the editor","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-view-tool.png",[18,40,41,42,46,47,50,51,46,53,56],{},"The workspace provides view tools at the footer in the right corner. This includes zoom in (",[43,44,45],"code",{},"Ctrl"," + ",[43,48,49],{},"+",") and zoom out (",[43,52,45],{},[43,54,55],{},"-",") buttons to control the view of the workspace and reset the zoom level to its default.",[18,58,59],{},[24,60],{"alt":61,"dataZoomable":12,"src":62,"title":61},"Image showing navigator tool","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-navigator-tool.gif",[18,64,65],{},"Additionally, it provides a view navigator that allows you to see a scaled-down view of the entire workspace. In this view, you can also see the currently visible area of the workspace in the editor. To jump to a specific workspace area, click on that area in the view navigator.",[18,67,68],{},"If the Linter tool is enabled, next to the view navigator on the left side, you will find the Linter tool option that displays the number of linting issues present in the workspace. By clicking on it, you will navigate to the Linter tool in the sidebar.",[29,70,72],{"id":71},"search-flow","Search Flow",[18,74,75],{},[24,76],{"alt":77,"dataZoomable":12,"src":78,"title":77},"Image search option for searching the flow into the Node-RED instance","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-search-tool.png",[18,80,81],{},[24,82],{"alt":83,"dataZoomable":12,"src":84,"title":83},"Image showing Node-RED Palette Search bar","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fmain-menu-search-tab.png",[18,86,87,88,91],{},"At the bottom-left of the workspace, you will see a search icon. Clicking on it will open a popup that allows you to quickly search the flows within your Node-RED instance by their name. You can access this dialog by pressing ",[43,89,90],{},"Ctrl + F",".",[29,93,95],{"id":94},"flow","Flow",[18,97,98],{},[24,99],{"alt":100,"dataZoomable":12,"src":101,"title":100},"Image showing flow tabs","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Feditor-flow-tabs.png",[18,103,104],{},"A flow is represented as a tab within the editor workspace, providing a new workspace for building applications by connecting nodes. \"Flow\" is also used informally to describe a single set of connected nodes. Therefore, a flow (tab) can contain multiple flows (sets of connected nodes), but formally, a flow is a parent group of multiple connected nodes. A flow can have a name and description, which will be displayed in the information sidebar.",[106,107,109],"h3",{"id":108},"adding-a-flow","Adding a Flow",[18,111,112],{},[24,113],{"alt":114,"dataZoomable":12,"src":115,"title":114},"Image showing 'add flow' option in the editor","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-add-flow.png",[18,117,118,119,124],{},"To create a parent flow, click on the top-right \"+\" icon, other you can use the ",[120,121,123],"a",{"href":122},"\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fheader\u002F#flows","main menu's flow"," add option.",[106,126,128],{"id":127},"editing-a-flow-properties","Editing a flow properties",[18,130,131],{},[24,132],{"alt":133,"dataZoomable":12,"src":134,"title":133},"Image showing flow edit dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-flow-edit.png",[18,136,137],{},"To edit the flow properties double-click on the flow tab to enter its name and description in the popup form that appears.",[106,139,141],{"id":140},"deleting-a-flow","Deleting a Flow",[18,143,144],{},[24,145],{"alt":146,"dataZoomable":12,"src":147,"title":146},"Image showing option to delete the flow","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-delete-flow.png",[18,149,150],{},"To delete a flow, double-click on it. In the popup that appears, click the delete button at the top-left corner.",[18,152,153],{},[24,154],{"alt":155,"dataZoomable":12,"src":156,"title":155},"Image showing option to delete the flow in the flow edit dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-delete-flow-dialog.png",[18,158,159],{},"Alternatively, right-click on the flow tab and select \"Delete\" from the menu.",[106,161,163],{"id":162},"enabling-and-disabling-flows","Enabling and Disabling Flows",[18,165,166],{},[24,167],{"alt":168,"dataZoomable":12,"src":169,"title":168},"Image showing option to enable and disable flow in the edit dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-disable-enable-flow.png",[18,171,172],{},"To enable or disable a flow, double-click on the flow tab. Click the bottom-left \"Disable\" button or \"Enable\" button if it is already disabled.",[18,174,175],{},[24,176],{"alt":177,"dataZoomable":12,"src":178,"title":177},"Image showing option to enable and disable flow","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-enable-disable-flow.png",[18,180,181],{},"Alternatively, right-click on the flow tab and select \"Disable\u002FEnable\" from the menu. Disabled flows do not execute when deployed.",[106,183,185],{"id":184},"reordering-flows","Reordering Flows",[18,187,188],{},[24,189],{"alt":190,"dataZoomable":12,"src":191,"title":190},"Image showing how to reorder flows in the editor","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fworkspace-reordering-flow.gif",[18,193,194],{},"Flows can be reordered by clicking and dragging the flow tab to the desired position. More options for the flow tab menu can be accessed by clicking on the top-right dropdown arrow icon.",[29,196,198],{"id":197},"subflow","Subflow",[18,200,201],{},[24,202],{"alt":203,"dataZoomable":12,"src":204,"title":203},"Image showing subflow node","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-node.png",[18,206,207],{},"A subflow in Node-RED is a collection of nodes that are collapsed into a single node in the workspace. It allows you to group a set of nodes together into a reusable unit. This helps in organizing flows, promoting reusability, and simplifying complex flow designs by encapsulating multiple nodes into a single, higher-level node representation.",[18,209,210],{},[211,212,213],"em",{},"Note: a subflow cannot contain an instance of itself - either directly or indirectly.",[106,215,217],{"id":216},"creating-a-subflow","Creating a Subflow",[18,219,220],{},[24,221],{"alt":222,"dataZoomable":12,"src":223,"title":222},"Image showing 'create subflow' option in the main menu","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fmain-menu-subflows.png",[18,225,226],{},"To create the subflow, click on the subflow -> create subflow in the main menu.",[18,228,229],{},[24,230],{"alt":231,"dataZoomable":12,"src":232,"title":231},"Image showing subflow tab","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-window.png",[18,234,235],{},"It will create the subflow window like a flow tab for you.",[106,237,239],{"id":238},"editing-a-subflow","Editing a Subflow",[18,241,242],{},[24,243],{"alt":244,"dataZoomable":12,"src":245,"title":244},"Image showing 'How to edit the subflow properties'","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-editing-properties.gif",[18,247,248],{},"To open the subflow edit dialog, double-click on the subflow node, then click on the \"edit template properties\". You can give the name for that subflow, add the description by clicking on the top-right",[18,250,251],{},[24,252],{"alt":253,"dataZoomable":12,"src":254,"title":253},"Image showing description tab in the subflow edit dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-property-description.png",[18,256,257],{},"\"Description\" option, and also set the appearance by clicking on the top-right \"Appearance\" option.",[18,259,260],{},[24,261],{"alt":262,"dataZoomable":12,"src":263,"title":262},"Image showing custom properties tab in the subflow edit dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-custom-properties.png",[18,265,266],{},"In the properties tab, you can define the custom properties that will be added to the subflow's edit dialog. These properties will be then exposed as the environment variables which can be then used by nodes of that subflow. While defining those properties you can also define the data type and label for each.",[18,268,269],{},[24,270],{"alt":271,"dataZoomable":12,"src":272,"title":271},"Image showing ui preview tab in the subflow edit dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-ui-preview.png",[18,274,275],{},"In the \"UI preview\" tab, you will see the preview of those properties, showing how they will appear in the subflow.",[106,277,279],{"id":278},"module-properties","Module Properties",[18,281,282],{},[24,283],{"alt":284,"dataZoomable":12,"src":285,"title":284},"Image showing module tab in the subflow edit dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-module-tab.png",[18,287,288],{},"In the subflow property dialog, you'll see the module properties option in the top-right corner of the dialog.",[18,290,291,292,91],{},"The Module Properties tab can be used to set additional meta-data about the Subflow, including version, license, and module name. These can be used when ",[120,293,297],{"href":294,"rel":295},"https:\u002F\u002Fnodered.org\u002Fdocs\u002Fcreating-nodes\u002Fsubflow-modules",[296],"nofollow","packaging the Subflow as an npm module",[106,299,301],{"id":300},"deleting-a-subflow","Deleting a Subflow",[18,303,304],{},[24,305],{"alt":306,"dataZoomable":12,"src":307,"title":306},"Image showing option to delete the subflow","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-delete-option.png",[18,309,310],{},"To delete the subflow, click on the \"delete subflow\" button at the top of the subflow tab.",[106,312,314],{"id":313},"converting-nodes-into-a-subflow","Converting Nodes into a Subflow",[18,316,317],{},[24,318],{"alt":319,"dataZoomable":12,"src":320,"title":319},"Image showing how to convert nodes into the subflow","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-converting-nodes-to-subflow.gif",[18,322,323],{},"If you have nodes on the workspace and you want to create a subflow of them, you can select them by pressing the left mouse key and drawing a rectangle around them. Then click on subflow -> selection to subflow in the main menu.",[18,325,326],{},[211,327,328],{},"Note: Wires coming into the selection should be connected to one node - as the resulting subflow node can itself only have at most one input.",[106,330,332],{"id":331},"inputs-outputs","Inputs & Outputs",[18,334,335],{},[24,336],{"alt":337,"dataZoomable":12,"src":338,"title":337},"Image showing subflow input and output along with options to add them","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-input-output.png",[18,340,341],{},"The subflow's inputs and outputs are depicted by gray square nodes, which can be connected in the subflow workspace like regular nodes. The top toolbar offers functions for adding and removing these nodes. Similar to regular flow nodes, each subflow can have one input at most, but it can accommodate multiple outputs.",[106,343,345],{"id":344},"status-node","Status Node",[18,347,348],{},[24,349],{"alt":350,"dataZoomable":12,"src":351,"title":350},"Image showing status node and option to add it","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fsubflow-status-node.png",[18,353,354,355,358],{},"The Status node is used to update the status of the subflow. This status node can be edited like regular flow nodes. This node uses the input of ",[43,356,357],{},"msg.payload"," which can either be a simple string or a Status Object.",[29,360,362],{"id":361},"nodes","Nodes",[18,364,365],{},[24,366],{"alt":367,"dataZoomable":12,"src":368,"title":367},"Image showing Node in Node palette","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-red-node.png",[18,370,371],{},"A Node is a fundamental building block used to create flows. Each node represents a distinct piece of functionality or a specific action that can be performed within a flow. These nodes can be third-party additions using the palette manager or core nodes.",[18,373,374],{},[24,375],{"alt":376,"dataZoomable":12,"src":377,"title":376},"Image showing node's input and output","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-input-ouput-port.png",[18,379,380],{},"Nodes can have one input and multiple output ports, connected via wires, which define the data flow within flows. Both input and output nodes can connect to multiple wires.",[18,382,383],{},[24,384],{"alt":385,"dataZoomable":12,"src":386,"title":385},"Image showing node's button","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-buttons.png",[18,388,389],{},"Some nodes have buttons on either the left or right side. For example, the Inject node has its button on the left, while the Debug node has it on the right. The function of these buttons varies between nodes.",[18,391,392],{},[24,393],{"alt":394,"dataZoomable":12,"src":395,"title":394},"Image showing the node status","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fmqtt-in-node-status.png",[18,397,398],{},"Additionally, some nodes display status at the bottom with icons indicating their runtime status. For example, MQTT and WebSocket nodes show \"connected\" text with a green circle icon indicating a successful connection.",[18,400,401],{},[24,402],{"alt":403,"dataZoomable":12,"src":404,"title":403},"Image showing the Node indicating error","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-indicating-error.png",[18,406,407],{},[24,408],{"alt":409,"dataZoomable":12,"src":410,"title":409},"Image showing the Node indicating undeployed changes","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-indicating-undeployed-changes.png",[18,412,413],{},"All nodes in Node-RED indicate errors with a red triangle, undeployed changes with a blue circle, and linting issues with a yellow icon containing an info symbol.",[106,415,417],{"id":416},"adding-nodes-to-the-workspace","Adding Nodes to the Workspace",[18,419,420],{},"There are three different ways to add nodes to the workspace:",[422,423,425],"h4",{"id":424},"dragging-from-the-palette","Dragging from the Palette",[18,427,428,429,433],{},"Nodes can be added from the ",[120,430,432],{"href":431},"\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fpalette\u002F","Node-RED palette"," by dragging them onto the workspace.",[422,435,437],{"id":436},"using-quick-add-dialog","Using Quick-Add Dialog",[18,439,440],{},"Node-RED Editor provides a quick and easy way to add nodes via the palette:",[18,442,443],{},[24,444],{"alt":445,"dataZoomable":12,"src":446,"title":445},"Image showing how to add nodes quickly using quick-add dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-quick-add-dialog.gif",[448,449,450,461,464],"ul",{},[451,452,453,454,456,457,460],"li",{},"Press ",[43,455,45],{}," or ",[43,458,459],{},"Command"," and click on the workspace.",[451,462,463],{},"Select the desired node from the dialog, which contains all available nodes from the main node palette.",[451,465,466],{},"Use the search bar to quickly search nodes.",[18,468,469],{},"When drawing a wire from one node, leave the wire on the workspace to connect it to a node that will be added using the same quick-add dialog.",[422,471,473],{"id":472},"importing-from-the-library-or-clipboard","Importing from the Library or Clipboard",[18,475,476,477,481],{},"Nodes can also be added by ",[120,478,480],{"href":479},"\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fheader\u002F#import","importing"," them from the team or local library or using the clipboard.",[106,483,485],{"id":484},"editing-node-properties","Editing Node Properties",[18,487,488],{},[24,489],{"alt":490,"dataZoomable":12,"src":491,"title":490},"Image showing node edit property dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-edit-properties-tab.png",[18,493,494],{},"To configure a node's properties, double-click on it or select the node and press Enter. A popup form will appear to configure the node. Configuration options vary depending on the node type.",[18,496,497],{},[24,498],{"alt":499,"dataZoomable":12,"src":500,"title":499},"Image showing node edit property dialog's description tab","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-description-tab.png",[448,502,503],{},[451,504,505],{},"Clicking on the second option from the top-right among three opens a \"Description\" tab, allowing you to write a Markdown-format description displayed in the information sidebar.",[18,507,508],{},[24,509],{"alt":510,"dataZoomable":12,"src":511,"title":510},"Image showing node edit property dialog's appperance tab","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-appearance-tab.png",[448,513,514],{},[451,515,516],{},"Clicking on the third option opens a tab to modify the node's appearance, such as changing icons, naming input and output ports, and toggling label visibility.",[106,518,520],{"id":519},"enabling-and-disabling-nodes","Enabling and Disabling Nodes",[18,522,523],{},[24,524],{"alt":525,"dataZoomable":12,"src":526,"title":525},"Image showing option to enable\u002Fdisable node","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-enable-option.png",[18,528,529],{},"To enable or disable nodes, double-click on the node and click the bottom \"Enabled\" button or \"Disabled\" button if already enabled.",[106,531,533],{"id":532},"accessing-node-help-information","Accessing Node Help Information",[18,535,536],{},[24,537],{"alt":538,"dataZoomable":12,"src":539,"title":538},"Image showing option to access the node's help document","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-help.png",[18,541,542],{},"To access node help information, double-click on the node and click the bottom \"Book\" icon, which displays information related to that node in the information sidebar.",[106,544,546],{"id":545},"configuration-nodes","Configuration Nodes",[18,548,549],{},"Configuration nodes in Node-RED store configurations shared across multiple nodes within a flow.",[18,551,552],{},"For example, HTTP Proxy nodes or TLS settings represent configurations for HTTP request nodes.",[18,554,555,559,560,564],{},[556,557,558],"strong",{},"Note:"," Configuration nodes do not encrypt data after configuration, potentially exposing sensitive information if shared improperly. It is recommended to use ",[120,561,563],{"href":562},"\u002Fdocs\u002Fuser\u002Fenvvar\u002F","environment variables"," for configuring these nodes to prevent revealing them in the flow.",[18,566,567],{},"Configuration nodes can be added using the edit dialog of nodes requiring configuration:",[18,569,570],{},[24,571],{"alt":572,"dataZoomable":12,"src":573,"title":572},"Image showing option to add the config node","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-add-config-node.png",[448,575,576,579],{},[451,577,578],{},"Click the \"+\" icon next to the pencil icon and the field showing the text \"Add new ***\".",[451,580,581],{},"Enter the necessary information in the edit dialog and click \"Add\".",[18,583,584],{},"Configuration nodes are not visible on the workspace like other nodes but can be managed in the config nodes tab of the sidebar.",[18,586,587],{},[24,588],{"alt":589,"dataZoomable":12,"src":590,"title":589},"Image showing note that displays how nodes are using this config node","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-indicating-how-many-nodes-using-config-node.png",[18,592,593],{},"To view how many nodes are using a specific configuration, check the footer information in the config node's edit dialog.",[18,595,596],{},"Additionally, like common nodes, configuration nodes can be disabled and enabled in the same manner.",[29,598,600],{"id":599},"wires","Wires",[18,602,603],{},[24,604],{"alt":605,"dataZoomable":12,"src":606,"title":605},"Image showing wires","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-wire.png",[18,608,609],{},"The \"wires\" refer to the connections that link nodes together to define the flow of data. These wires visually represent the direction and flow of information from one node to another within a Node-RED flow.",[106,611,613],{"id":612},"wiring-nodes-together","Wiring Nodes Together",[18,615,616],{},[24,617],{"alt":618,"dataZoomable":12,"src":619,"title":618},"Image showing how to wire node's together","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fwiring-nodes-together.gif",[18,621,622,623,625,626,628,629,625,631,633],{},"To connect the nodes using the wires, left-click on the node's output port and drag the wire to the destination input port. Additionally, if you press the ",[43,624,45],{},"\u002F",[43,627,459],{}," and mouse left key on the input or output port you will not need to hold the left mouse key or any other button to drag the wire. To connect it to the destination port, press the left mouse key on destination port. If the ",[43,630,45],{},[43,632,459],{}," key remains pressed after connecting to the destination port, and if that port's node has an output port, a new wire will be dragged.",[18,635,636],{},"The wires can be connected from the input port to the output port, not from the input port to the input port or the output port to the output port.",[106,638,640],{"id":639},"deleting-wires","Deleting Wires",[18,642,643],{},[24,644],{"alt":645,"dataZoomable":12,"src":646,"title":645},"Image showing how to delete the wires","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fdeleting-wires.gif",[18,648,649,650,653],{},"To delete wires, click the left mouse button to select the first wire. To select multiple wires, press and hold the ",[43,651,652],{},"Ctrl\\Command"," key while clicking each wire with the left mouse button. If you use only the left mouse button, you can select only one wire at a time. After selecting the wires, press the 'delete' or 'backspace' key to delete them.",[106,655,657],{"id":656},"moving-wires","Moving Wires",[18,659,660],{},[24,661],{"alt":662,"dataZoomable":12,"src":663,"title":662},"Image showing how to move single wire","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fmoving-wire.gif",[18,665,666,667,670],{},"To disconnect the wire from the port, select the wire by clicking on it. Then press and hold the ",[43,668,669],{},"Shift"," key while the left mouse key is pressed on the port. When the mouse is dragged you'll see the wire disconnects from the port and can be connected to another port.",[18,672,673],{},[24,674],{"alt":675,"dataZoomable":12,"src":663,"title":675},"Image showing how to move multiple wires",[18,677,678],{},"If a port has multiple wires connected to it, if none of them are selected when the button is pressed with the Shift key held, all of the wires will move.",[106,680,682],{"id":681},"slicing-wires","Slicing Wires",[18,684,685],{},[24,686],{"alt":687,"dataZoomable":12,"src":688,"title":687},"Image showing how to slice wires quickly","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fslicing-wires.gif",[18,690,691,692,625,695,698],{},"Wires can also be removed by slicing through them. You can do this by holding the ",[43,693,694],{},"Alt",[43,696,697],{},"Option"," key and then drawing the line for slicing by holding the left mouse key.",[106,700,702],{"id":701},"detaching-nodes","Detaching Nodes",[422,704,706],{"id":705},"keeping-wire-while-deleting-node","Keeping Wire While Deleting Node",[18,708,709],{},[24,710],{"alt":711,"dataZoomable":12,"src":712,"title":711},"Image showing how to delete nodes while keeping wires","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fremoving-nodes-while-keeping-wires.gif",[18,714,715,716,625,718,720],{},"To do that, press and hold the ",[43,717,45],{},[43,719,459],{}," key, select the node by clicking the left mouse key, and then press the \"delete\" or \"backspace\" button.",[422,722,724],{"id":723},"detaching-node-from-wires","Detaching Node from Wires",[18,726,727],{},[24,728],{"alt":729,"dataZoomable":12,"src":730,"title":729},"Image showing how to detach nodes while keeping wires","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fdetaching-nodes-while-keeping-wires.gif",[18,732,733,734,738],{},"To use this option, you have to set the ",[120,735,737],{"href":736},"\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fheader\u002F#keyboard-shortcuts","keyboard shortcut"," for the \"detach-selected-nodes\" action.",[29,740,742],{"id":741},"groups","Groups",[18,744,745],{},[24,746],{"alt":747,"dataZoomable":12,"src":748,"title":747},"Image showing flow's group","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fgroup.png",[18,750,751],{},"In Node-RED, groups can be created for better organization, containing a single object with included node configurations within the editor.",[106,753,755],{"id":754},"creating-a-flow-group","Creating a Flow Group",[18,757,758],{},[24,759],{"alt":760,"dataZoomable":12,"src":761,"title":760},"Image showing how to create the group","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fcreating-group.gif",[18,763,764,765,768,769,91],{},"To create a flow group, select nodes (by holding the Ctrl key or drawing a rectangle around them). Navigate to ",[43,766,767],{},"Groups -> Group selection"," in the main menu or press ",[43,770,771],{},"Ctrl + Shift + G",[106,773,775],{"id":774},"editing-group-properties","Editing Group Properties",[18,777,778],{},[24,779],{"alt":780,"dataZoomable":12,"src":781,"title":780},"Image showing group edit dialog","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fgroup-properties.png",[18,783,784],{},"A flow group can have a name, background color, and border label visible in the workspace. By default, it has a gray border with no background or name.",[18,786,787],{},"To style and name a group, double-click on it. Enter the name, select outline and background colors under the fill property, adjust label position and color, then click \"Done\" from the top-right corner.",[106,789,791],{"id":790},"adding-group-level-environment-variables","Adding Group-Level Environment Variables",[18,793,794],{},[24,795],{"alt":83,"dataZoomable":12,"src":796,"title":83},"\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fgroup-level-env.png",[18,798,799],{},"To add environment variables at the group level, double-click on it. Select the second option from the top-right in the popup, located under the \"Done\" button. Click the bottom-most \"Add\" button to add variables.",[106,801,803],{"id":802},"adding-description","Adding Description",[18,805,806],{},[24,807],{"alt":808,"dataZoomable":12,"src":809,"title":808},"Image showing group edit dialog's description tab","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fgroup-description.png",[18,811,812],{},"To add a description to the group, double-click on it. Select the third option from the top-right in the popup, under the \"Done\" button. Enter the description in Markdown format.",[106,814,816],{"id":815},"adding-nodes-to-a-group","Adding Nodes to a Group",[18,818,819],{},[24,820],{"alt":821,"dataZoomable":12,"src":822,"title":821},"Image showing how to add nodes to existing group","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fadding-nodes-to-group.gif",[18,824,825],{},"To add nodes to an existing group, drag and drop them into the group. This can be done one node at a time. Groups can also be nested within each other in the same manner.",[106,827,829],{"id":828},"removing-nodes-from-a-group","Removing Nodes from a Group",[18,831,832],{},[24,833],{"alt":834,"dataZoomable":12,"src":835,"title":834},"Image showing how to remove nodes from existing group","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fremoving-node-from-group.gif",[18,837,838,839,842],{},"To remove nodes from a group, select the nodes and navigate to ",[43,840,841],{},"Groups -> Remove selection"," in the main menu. Similarly, remove a group from another group. Alternatively, click on a node, hold the 'Alt' key, and drag it outside of the group.",[106,844,846],{"id":845},"merging-groups","Merging Groups",[18,848,849],{},[24,850],{"alt":851,"dataZoomable":12,"src":852,"title":851},"Image showing how to merge multple groups into single group","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fgroup-merging-groups.gif",[18,854,855,856,91],{},"To merge multiple groups into a single group, select the groups. Go to ",[43,857,858],{},"Main Menu -> Groups -> Merge selection",[106,860,862],{"id":861},"ungrouping-selected-nodes","Ungrouping Selected Nodes",[18,864,865],{},[24,866],{"alt":867,"dataZoomable":12,"src":868,"title":867},"Image showing how to ungroup selected nodes","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fremoving-nodes-from-group.gif",[18,870,871,872,91],{},"To ungroup nodes from a group, select the nodes. Go to ",[43,873,874],{},"Main Menu -> Groups -> Ungroup selection",[29,876,878],{"id":877},"selection","Selection",[18,880,881],{},"Node-RED Editor provides an easy interface for selecting the nodes and the wires on the workspace.",[18,883,884,885,888,889,91],{},"A node can be selected or deselected by clicking on it. To select multiple nodes, press the ",[43,886,887],{},"Ctrl\u002FCommand"," key and select the nodes you want to select. To select all of the nodes in the workspace, click ",[43,890,891],{},"Ctrl+A",[106,893,895],{"id":894},"lasso-tool","Lasso Tool",[18,897,898],{},[24,899],{"alt":900,"dataZoomable":12,"src":901,"title":900},"Image showing the lasso tool selection","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Flasso-tool.gif",[18,903,904],{},"Node-RED provides a lasso tool to make selection faster. To use the lasso tool, press the left mouse key and drag the cursor, then you can select multiple nodes by drawing a rectangle around them.",[106,906,908],{"id":907},"selecting-connected-nodes","Selecting Connected Nodes",[18,910,911],{},[24,912],{"alt":913,"dataZoomable":12,"src":914,"title":913},"Image showing how to select connected nodes","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fselecting-connected-nodes.gif",[18,916,917,918,920],{},"To select all connected nodes to a specific node, press the ",[43,919,669],{}," button and click on the middle of that node.",[106,922,924],{"id":923},"selecting-all-upstream-nodes","Selecting All Upstream Nodes",[18,926,927],{},[24,928],{"alt":929,"dataZoomable":12,"src":930,"title":929},"Image showing how to select upstream connected nodes","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fselecting-upward-connected-nodes.gif",[18,932,933,934,936],{},"To select all of the connected nodes that are before that specific node, press the ",[43,935,669],{}," button and while holding it click on the left part of that node.",[106,938,940],{"id":939},"selecting-all-downstream-nodes","Selecting All Downstream Nodes",[18,942,943],{},[24,944],{"alt":945,"dataZoomable":12,"src":946,"title":945},"Image showing how to select downstream connected nodes","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fselecting-downward-connected-nodes.gif",[18,948,949,950,952],{},"To select all of the connected nodes that are after that specific node, press the ",[43,951,669],{}," button and while holding it click on the right part of that node.",[106,954,956],{"id":955},"selecting-flows","Selecting Flows",[18,958,959],{},[24,960],{"alt":961,"dataZoomable":12,"src":962,"title":961},"Image showing how to select multple flows at a time","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fselecting-flows.gif",[18,964,965,966,968],{},"To select the flow tabs, press the ",[43,967,887],{}," key and while holding it click on the flow tab you want to select. Now you can then delete, export, or copy them collectively.",{"title":12,"searchDepth":970,"depth":970,"links":971},2,[972,973,974,982,991,998,1005,1015],{"id":31,"depth":970,"text":32},{"id":71,"depth":970,"text":72},{"id":94,"depth":970,"text":95,"children":975},[976,978,979,980,981],{"id":108,"depth":977,"text":109},3,{"id":127,"depth":977,"text":128},{"id":140,"depth":977,"text":141},{"id":162,"depth":977,"text":163},{"id":184,"depth":977,"text":185},{"id":197,"depth":970,"text":198,"children":983},[984,985,986,987,988,989,990],{"id":216,"depth":977,"text":217},{"id":238,"depth":977,"text":239},{"id":278,"depth":977,"text":279},{"id":300,"depth":977,"text":301},{"id":313,"depth":977,"text":314},{"id":331,"depth":977,"text":332},{"id":344,"depth":977,"text":345},{"id":361,"depth":970,"text":362,"children":992},[993,994,995,996,997],{"id":416,"depth":977,"text":417},{"id":484,"depth":977,"text":485},{"id":519,"depth":977,"text":520},{"id":532,"depth":977,"text":533},{"id":545,"depth":977,"text":546},{"id":599,"depth":970,"text":600,"children":999},[1000,1001,1002,1003,1004],{"id":612,"depth":977,"text":613},{"id":639,"depth":977,"text":640},{"id":656,"depth":977,"text":657},{"id":681,"depth":977,"text":682},{"id":701,"depth":977,"text":702},{"id":741,"depth":970,"text":742,"children":1006},[1007,1008,1009,1010,1011,1012,1013,1014],{"id":754,"depth":977,"text":755},{"id":774,"depth":977,"text":775},{"id":790,"depth":977,"text":791},{"id":802,"depth":977,"text":803},{"id":815,"depth":977,"text":816},{"id":828,"depth":977,"text":829},{"id":845,"depth":977,"text":846},{"id":861,"depth":977,"text":862},{"id":877,"depth":970,"text":878,"children":1016},[1017,1018,1019,1020,1021],{"id":894,"depth":977,"text":895},{"id":907,"depth":977,"text":908},{"id":923,"depth":977,"text":924},{"id":939,"depth":977,"text":940},{"id":955,"depth":977,"text":956},"Explore the features available in the Node-RED Editor workspace component","md",{},true,"\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fworkspace",{"title":5,"description":1022},"node-red\u002Fgetting-started\u002Feditor\u002Fworkspace","73DcabR4b1CKMBBmJz_oRUoJtPH73O6PhVPRZXVBTGk",1780070557195]