[{"data":1,"prerenderedAt":85},["ShallowReactive",2],{"node-red-\u002Fnode-red\u002Fgetting-started\u002Feditor":3},{"id":4,"title":5,"body":6,"description":77,"extension":78,"meta":79,"navigation":80,"path":81,"seo":82,"stem":83,"__hash__":84},"nodeRed\u002Fnode-red\u002Fgetting-started\u002Feditor.md","Getting Started with the Node-RED Editor",{"type":7,"value":8,"toc":73},"minimark",[9,17,21,28,33,36],[10,11,13],"h1",{"id":12},"",[14,15],"binding",{"value":16},"meta.title",[18,19,20],"p",{},"The Node-RED Editor is one of the most essential components of Node-RED.  As the main focus of Node-RED is to enable visual programming, the editor provides a graphical interface that allows users to create, configure, and manage flows easily.",[18,22,23],{},[24,25],"img",{"alt":26,"dataZoomable":12,"src":27,"title":26},"Node-RED Editor Window","\u002Fnode-red-media\u002Fgetting-started\u002Feditor\u002Fimages\u002Fnode-red-editor-window.png",[29,30,32],"h2",{"id":31},"the-main-components-of-the-node-red-editor","The main components of the Node-RED editor",[18,34,35],{},"The Node-RED Editor has four main components as follows:",[37,38,39,49,57,65],"ul",{},[40,41,42,43,48],"li",{},"Header: The ",[44,45,47],"a",{"href":46},"\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fheader\u002F","header"," contains the instance name, user profile menu and the main menu.",[40,50,51,52,56],{},"Pallete: The ",[44,53,55],{"href":54},"\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fpalette\u002F","palette"," is a sidebar containing all of the nodes that are installed and available to use.",[40,58,59,60,64],{},"Workspace: The ",[44,61,63],{"href":62},"\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fworkspace\u002F","workspace"," is where flows (groups of nodes) are developed by dragging nodes from the palette and wiring them together. Adding a new flow tab gives you a new workspace.",[40,66,67,68,72],{},"Sidebar: The ",[44,69,71],{"href":70},"\u002Fnode-red\u002Fgetting-started\u002Feditor\u002Fsidebar\u002F","sidebar"," Provides additional context-sensitive options and information depending on the selected node or workspace.",{"title":12,"searchDepth":74,"depth":74,"links":75},2,[76],{"id":31,"depth":74,"text":32},"Learn about the powerful features of Node-RED Editor.","md",{},true,"\u002Fnode-red\u002Fgetting-started\u002Feditor",{"title":5,"description":77},"node-red\u002Fgetting-started\u002Feditor","doTdPkFx2nWVqAAK9MiFqBDKh9a0nSrd7P3veCGohFE",1780070556901]