Understanding the Editor

The TinySystems flow editor is where you design, configure, and monitor your automation flows. This guide covers all editor features and navigation.

Editor Layout

+---------------------------------------------------------------------+
|  Toolbar                                                             |
+-----------+-----------------------------------------+---------------+
|           |                                         |               |
|  Node     |                                         |  Properties   |
|  Palette  |              Canvas                     |    Panel      |
|           |                                         |               |
|           |                                         |               |
|           |                                         |               |
+-----------+-----------------------------------------+---------------+
|  Status Bar / Execution Panel                                        |
+---------------------------------------------------------------------+

Toolbar

The top toolbar contains primary actions:

Button	Action	Shortcut
Save	Save current flow	Ctrl+S
Deploy	Deploy to cluster	Ctrl+D
Run	Execute flow manually	Ctrl+R
Undo	Undo last action	Ctrl+Z
Redo	Redo undone action	Ctrl+Shift+Z
Zoom In	Increase canvas zoom	Ctrl++
Zoom Out	Decrease canvas zoom	Ctrl+-
Fit	Fit all nodes in view	Ctrl+0

Deployment Status

The deploy button shows current status:

• Gray: Not deployed
• Yellow: Deploying...
• Green: Deployed and running
• Red: Deployment error

Node Palette

The left sidebar shows available components organized by module.

Browsing Components

📦 Common Module
  +-- Router
  +-- Modify
  +-- Split
  +-- Async
  +-- Signal
  +-- Ticker
  +-- Delay
  +-- Debug

📦 HTTP Module
  +-- Server
  +-- Client

📦 Custom Modules
  +-- (Your installed modules)

Adding Nodes

Drag and Drop:

1. Find the component in the palette
2. Drag it onto the canvas
3. Release to place

Double-Click:

1. Double-click a component
2. It appears at the center of the visible canvas

Search:

1. Type in the search box at the top of the palette
2. Filter components by name
3. Click to add

Canvas

The main working area where you build flows.

Navigation

Action	Mouse	Touchpad
Pan	Click + drag on empty space	Two-finger drag
Zoom	Scroll wheel	Pinch gesture
Select node	Click on node	Tap
Multi-select	Ctrl + click	Ctrl + tap
Box select	Shift + drag	Shift + drag

Working with Nodes

Moving Nodes:

• Drag a node to reposition it
• Select multiple nodes and drag to move together
• Nodes snap to grid (configurable)

Deleting Nodes:

• Select node(s) and press Delete or Backspace
• Right-click and select "Delete"

Duplicating Nodes:

• Select node(s) and press Ctrl+D
• Right-click and select "Duplicate"

Working with Edges

Creating Edges:

1. Hover over a port (circles on node edges)
2. Click and drag from the port
3. Release on a compatible target port

Edge Indicators:

• Green outline: Compatible port
• Red outline: Incompatible port
• Pulsing: Currently selected

Deleting Edges:

• Click the edge to select it
• Press Delete or Backspace

Editing Edge Data:

• Click an edge to select it
• Configure data mapping in the properties panel

Properties Panel

The right sidebar shows configuration for the selected element.

Node Properties

When a node is selected:

+-----------------------------+
| Component Name              |
| Description text            |
+-----------------------------+
| Ports                       |
|  +----------------------+   |
|  | [S] Settings         |   |
|  | [<] Input            |   |
|  | [>] Output           |   |
|  +----------------------+   |
+-----------------------------+
| Port Configuration          |
|  (When port selected)       |
|  [Form fields...]           |
+-----------------------------+
| Status                      |
|  State: Running             |
|  Last execution: 2s ago     |
+-----------------------------+

Port Configuration

Click a port in the properties panel to configure it:

Settings Port:

• Configure component behavior
• Set parameters and options
• Define default values

Data Ports:

• View schema (expected data format)
• See sample data
• Configure static values

Edge Properties

When an edge is selected:

+-----------------------------+
| Edge Configuration          |
+-----------------------------+
| Source: NodeA.output        |
| Target: NodeB.input         |
+-----------------------------+
| Data Mapping                |
|  +----------------------+   |
|  | Target Schema        |   |
|  |  field1: [________]  |   |
|  |  field2: [________]  |   |
|  +----------------------+   |
+-----------------------------+

Ports

Ports are connection points on nodes.

Port Positions

        ⬆️ Top (Settings/Control)
        |
   +----+----+
<️ |  Node   | >️
   +----+----+
        |
        ⬇️ Bottom (Errors/Status)

<️ Left: Input ports (receive data)
>️ Right: Output ports (emit data)
⬆️ Top: Settings, Control
⬇️ Bottom: Error, Status

Port Types

Port	Symbol	Direction	Purpose
Input	📥	Inbound	Receive messages
Output	📤	Outbound	Emit messages
Settings	⚙️	Config	Configure component
Control	🎮	Interactive	Buttons, triggers
Error	⚠️	Outbound	Error messages

Port Colors

• Blue: Standard data port
• Purple: Settings/configuration
• Orange: Control/interactive
• Red: Error output

Status Bar

The bottom bar shows execution information:

+---------------------------------------------------------------------+
| 🟢 Deployed | Last run: 5s ago | Executions: 1,234 | Errors: 2     |
+---------------------------------------------------------------------+

Execution Panel

Expand the status bar to see:

• Recent execution traces
• Log output
• Error details
• Performance metrics

Keyboard Shortcuts

General

Shortcut	Action
Ctrl+S	Save flow
Ctrl+Z	Undo
Ctrl+Shift+Z	Redo
Ctrl+A	Select all nodes
Delete	Delete selected
Escape	Deselect all

Navigation

Shortcut	Action
Ctrl+0	Fit to screen
Ctrl++	Zoom in
Ctrl+-	Zoom out
Space+Drag	Pan canvas

Editing

Shortcut	Action
Ctrl+D	Duplicate selection
Ctrl+C	Copy
Ctrl+V	Paste
Ctrl+X	Cut

Deployment

Shortcut	Action
Ctrl+Shift+D	Deploy flow
Ctrl+Shift+R	Run/trigger flow

Context Menus

Right-click on elements for context-specific options:

Canvas Context Menu

• Add node (opens palette)
• Paste
• Select all
• Fit to screen

Node Context Menu

• Edit settings
• Duplicate
• Copy
• Delete
• View logs
• Debug

Edge Context Menu

• Edit mapping
• Delete
• View data flow

Mini Map

Enable the mini map for large flows:

1. Click the map icon in the bottom-right corner
2. Drag the viewport indicator to navigate
3. Click anywhere on the map to jump to that location

Settings

Access editor preferences via the gear icon:

• Grid: Show/hide grid, snap to grid
• Auto-save: Configure auto-save interval
• Theme: Light/dark mode
• Performance: Reduce animations on large flows

Next Steps

• Running and Debugging - Execute and debug flows
• Data Mapping - Configure edge data
• Expression Syntax - Write expressions