Skip to content

Visual Workflow Editor

Kiket's visual editor lets you design and modify project configuration without writing YAML directly. Build workflows, boards, intake forms, issue templates, and automation rules through an intuitive canvas interface.

Getting Started

Opening the Editor

The editor is accessible from multiple places: - Command Palette (Cmd+K): Type "open project editor" or "edit workflow" - Workspace Header: Click the Editor button in the project action bar - Project Settings: Go to Settings → Visual Editors tab - Project Setup: Choose "Design from Scratch" when setting up a new project

Editor Layout

The editor uses a four-panel layout:

Panel Position Purpose
Structure Tree Left Navigate elements, grouped by type
Canvas Center Visual editing surface
Properties Right Edit selected element properties
Console Bottom Validation errors and warnings

Workflow Editor

Design workflow states and transitions on a node-graph canvas.

State Types

Click state presets in the Add State palette to create nodes:

Type Icon Category Purpose
Initial 🟢 Pending Entry point — every workflow needs one
Active 🔵 Active Working states with optional WIP limits
Gateway ◇ Pending Decision/routing points
Approval 🛡️ Review Requires sign-off before proceeding
Final 🔴 Completed Terminal states
Trigger ⚡ Pending Event-based entry (cron, webhook, issue event)
Action ▶️ Active Executes an operation (notify, assign, webhook)
Condition 🔀 Active Branching logic with field-based rules
Loop 🔄 Active Iterative execution over a collection
Parallel ⏸️ Active Concurrent branch execution
Sub-Workflow 📦 Active Delegates to another workflow (double-click to drill in)

States are color-coded by category: gray (Pending), indigo (Active), amber (Review), green (Completed).

Adding Transitions

  • Drag from a node's source handle (right side) to another node's target handle (left side)
  • Name transitions in the Properties panel
  • Transitions appear as labeled arrows on the canvas
  • Click a transition (line or label) to select it and edit properties

Transition Conditions

Transitions can have guard conditions that control when they fire. Select a transition to edit its conditions in the Properties panel:

  • Field — the issue field to check (e.g., priority, status, assignee)
  • Operator — comparison type: equals, not_equals, contains, gt, lt, is_empty, is_not_empty
  • Value — the value to compare against
  • Match mode — All (AND) requires every condition to pass; Any (OR) requires at least one

Transitions with conditions show an IF or OR badge on the edge label. Condition nodes have labeled IF and ELSE output handles.

Graph Validation

The Problems panel automatically detects structural issues in your workflow:

Problem Severity Description
Missing initial state Error Every workflow needs at least one initial or trigger state
Missing final state Warning Without a final state, issues can never complete
Dead-end state Warning Non-final states with no outgoing transitions trap issues
Unreachable state Warning States that can't be reached from any initial state
Cycle without exit Warning Loops where no node has a path out — issues get stuck forever
Duplicate transition Warning Multiple transitions between the same source and target

Click a warning in the Problems panel to highlight the affected node on the canvas.

Snap Guides

When dragging a node, alignment guides appear when its edges or center line up with other nodes. Guides snap within a 5px threshold for precise alignment.

Sub-Workflow Drill-Down

Double-click a Sub-Workflow node to navigate into its referenced workflow. A breadcrumb trail in the header lets you navigate back to parent workflows.

Sub-Workflow Completion Routing

Sub-workflow nodes have two output handles: - OK (green) — fires when the sub-workflow ends in a success state - FAIL (red) — fires when it ends in a failure state

Configure which final states count as success vs failure in the Properties panel under Completion Routing (e.g., success: approved, done; failure: rejected, cancelled).

Spawn Actions

Lifecycle hooks support two spawn action types for creating child resources:

Action Description
Spawn Issue from Template Creates a child issue from an issue template when entering a state. Configure template key and link type (parent/blocks/related).
Open Intake Form Triggers an intake form for data collection. Configure form key.

Spawn actions appear in the on_enter / on_exit hook editor alongside notify, webhook, and AI actions.

State Properties

Each state can have rich configuration beyond type and label. Select a node to edit its properties in the right panel:

Property Badge Description
Lifecycle Hooks 🔔 Actions that run when entering or exiting a state (notify, AI analyze, webhook, blockchain anchor)
Approval Gate ✅ 1 (legal) Required approvals with roles shown inline. Issue detail shows full approval chain timeline.
SLA Timer ⏱️ Warning and breach timeouts with on_warning/on_breach escalation hooks. See SLA Tracking
Checklist ☑️ Required items that must be checked before transitioning out
Required Documents 📎 Documents that must be uploaded before transitioning (with version history and blockchain verification)

Badges appear on nodes that have these properties configured. In edit mode, each section shows add/remove controls and editable fields.

Lifecycle hooks support template variables like {{issue.title}} and can reference AI agents (e.g., ai.legal.contract_analyzer).

Editing Modes

  • Canvas: Visual node graph (default)
  • YAML: Direct YAML editing with Monaco editor — changes sync bidirectionally
  • Changes: Diff view comparing current state to last saved version

Keyboard Shortcuts

Shortcut Action
Ctrl/Cmd + Z Undo
Ctrl/Cmd + Shift + Z Redo
Delete Remove selected element
Ctrl/Cmd + D Duplicate selected
Escape Deselect
Tab / Shift+Tab Cycle through nodes

Board Editor

Configure board columns, WIP limits, and card templates visually.

  • Columns displayed as cards with colored headers
  • Set WIP limits per column
  • Configure swimlanes and card display settings
  • Map workflow states to columns

Intake Form Editor

Build intake forms with drag-and-drop field ordering.

Field Types

  • Input: String, Text, Markdown, Number, Boolean, Email, Phone, URL, Date, Time
  • Select: Dropdown (enum), Multi-select
  • Layout: Heading, Paragraph, Divider
  • Special: File Upload, Rating, Scale

Features

  • Drag fields to reorder
  • Map fields to issue properties (title, description, priority, assignee)
  • Set required fields, placeholders, and validation rules
  • Preview the form as users will see it

Issue Template Editor

Create templates with default values and custom fields.

  • Set default issue type, priority, and labels
  • Define required fields
  • Add custom fields with type, label, and options

Automation Rule Editor

Compose trigger → condition → action pipelines visually.

  • Trigger: Choose from issue events, sprint events, or cron schedules
  • Conditions: Define ALL/ANY match rules with field operators
  • Actions: Assign user, add/remove labels, transition state, send notifications, webhooks

Saving and Publishing

  • Save Draft: Saves your changes without applying them
  • Publish: Validates the YAML, creates/updates the workflow record, and commits to GitHub
  • Publish as PR: Creates a feature branch and opens a pull request instead of committing directly to main
  • The console shows validation errors that must be fixed before publishing

Contextual Lenses

The lens toolbar (top-right of canvas) provides overlay views on workflow nodes:

Lens Icon Shows
Metrics 📈 Execution counts per state from activity data
Approval 🛡️ Which states have approval gates
AI ✨ States with AI suggestion availability
Data 🗄️ Recent run samples — execution count, avg duration, last payload

Toggle multiple lenses simultaneously. Badges appear below each node — highlighted when data is available, dimmed when empty. Hover for detailed tooltips.

AI Suggestions

The editor includes AI-powered assistance: - Autocomplete: Suggestions appear when selecting elements - Explain Error: Click the lightbulb to understand validation issues - Fix Proposals: AI suggests specific fixes for problems - General Suggestions: Best practices and optimization tips

Real-Time Collaboration

Multiple users can edit simultaneously: - Presence indicators show who's viewing the editor - Changes sync in real-time via Y.js CRDT - Each user's cursor and selection is visible to others

Project Editor (Unified View)

The unified Project Editor shows all YAML definitions in a tree sidebar: - Switch between Workflow, Board, Intake Forms, Templates, and Automations - Click any item to load it in the editor canvas - All editors share the same header, tabs, and save/publish flow