The Visual Canvas

The pipeline editor is built around a zoomable, pannable canvas. Here is everything you need to know to use it efficiently.

Navigation controls

Action	How
Pan the canvas	Click and drag on empty space
Zoom in / out	Scroll wheel, or pinch on trackpad
Fit the view	Press Ctrl+Shift+H or click Fit view in the toolbar
Reset zoom to 100%	Double-click on the zoom indicator

Three canvas levels

The editor has three levels you navigate between by drilling down:

Pipeline view  ──double-click stage──►  Stage view  ──double-click job──►  Job view

Use the breadcrumb at the top of the editor to go back:

my-pipeline  >  Build  >  install-and-test

Clicking any segment of the breadcrumb returns you to that level.

Adding nodes

What	How
Add a Stage	Click empty canvas space in Pipeline view → Add Stage
Add a Job	Click empty canvas space in Stage view → Add Job
Add a Step	Click Add Step button in Job view

Connecting nodes

Stages and jobs can be connected to define execution order.

1. Hover over a node card until the connection handle (small circle) appears on the edge
2. Click and drag from the handle to another node
3. Release to create the edge

To delete a connection, click on the edge arrow and press Delete or Backspace.

Selecting and moving nodes

• Select: click a node card
• Move: drag a node card to reposition it
• Multi-select: hold Shift and click multiple nodes
• Select all: Ctrl+A
• Delete selected: Delete or Backspace

The config panel

Click on any node card to open its configuration panel on the right side of the screen. This is where you set the node's properties (name, runner, step type, parameters, etc.).

Changes in the config panel apply immediately on the canvas but are not persisted until you click Save.

Saving

Click the Save button in the top toolbar, or press Ctrl+S.

pipel8ne auto-saves your canvas position and zoom level between sessions. Pipeline content is only saved when you explicitly click Save.

Undo / Redo

Action	Shortcut
Undo	Ctrl+Z
Redo	Ctrl+Shift+Z or Ctrl+Y

Undo/redo works within the current session. Changes are lost if you navigate away without saving.

Dark mode

Toggle dark/light mode using the sun/moon icon in the top-right corner. The preference is saved in your browser.