The editor
The kitengi editor at app.kitengi.dev is made up of four areas: the canvas, the sidebar, the right panel, and the console.
Canvas
The canvas is the main editing area where nodes and threads are displayed. It supports panning and zooming:
- Pan — click and drag on an empty area of the canvas, or use two-finger scroll.
- Zoom — pinch to zoom, or use Ctrl/⌘ + scroll wheel. The zoom controls in the bottom-left also work.
- Fit to view — press
F or click the fit button in the zoom controls to fit all nodes on screen.
- Select nodes — click a node to select it. Hold Shift and click to add to the selection. Click and drag on the canvas to rubber-band select multiple nodes.
Sidebar
The sidebar on the left lists all your programs. Click a program name to open it. Programs are stored locally in your browser.
- New program — creates a new empty program.
- Search — filter the list by name.
- Delete — hover a program name and click the delete icon to remove it.
Right panel
When a node is selected the right panel shows its properties:
- ID — the node's unique identifier within its scope. Lowercase letters, numbers, and hyphens only.
- Title — an optional display name shown on the canvas instead of the ID.
- Value — for
value and constant nodes, the stored value or key.
- Description — free-text notes shown in the node tooltip.
- Kind — read-only; the node's built-in type.
When nothing is selected the right panel shows the program name and loom.
Console
The console at the bottom of the screen shows output from print nodes while a program is running. It also shows any runtime errors. Click Clear to reset it.
Toolbar
The toolbar at the top of the canvas contains:
- Run — starts the program. A running program can be stopped with the Stop button.
- Auto-layout — automatically arranges nodes using an ELK-based layout algorithm.
- Copy source — copies the
.kti text of the current program to the clipboard.
- Load from text — pastes or types a
.kti program to load it onto the canvas.
Data flow visualization
While a program is running, the editor provides real-time visual feedback:
- Node pulsing — nodes pulse when they fire, giving you an immediate sense of which parts of the graph are active.
- Edge animation — threads animate as messages travel along them, showing the direction and timing of data flow.
- Pending message badges — nodes display a count badge showing how many messages are waiting at their input ports. This helps identify bottlenecks or nodes waiting for synced inputs.
Slow mode and pause
The toolbar includes debugging controls for stepping through execution:
- Slow mode — slows down execution so you can follow each message through the graph visually. Toggle it using the slow mode button in the toolbar.
- Pause — pauses execution entirely. While paused you can inspect the current state of the graph, including pending messages on each node. Click the pause button again to resume.
Compare / diff viewer
Click the Compare button in the toolbar to open the diff viewer. Paste two versions of a .kti file to see a side-by-side comparison with highlighted differences. This is useful for reviewing changes before loading a new version of a program.
Test runner
When a pattern node is selected, the right panel includes a Tests section where you can view, create, and run test cases for that pattern. Test cases define input values and expected output values. Running a test executes the pattern in isolation and reports whether the outputs match. See Patterns for more on defining test cases.
Keyboard shortcuts
| Key | Action |
|---|
| Double-click canvas | Add a new node |
| Backspace / Delete | Delete selected nodes or threads |
| F | Fit all nodes to view |
| R | Run the program |
| ⌘Z / Ctrl+Z | Undo |
| ⌘⇧Z / Ctrl+Y | Redo |