Skip to main content

Kuetix Studio

Kuetix Studio is a visual workflow editor and IDE for designing, editing, and exporting WSL and SWSL workflows. Built with React and powered by Monaco Editor and React Flow, it provides an interactive environment for workflow development.

Features​

Visual Workflow Graph​

Studio renders workflows as interactive node-based graphs using React Flow. Each state becomes a node, and transitions become edges, giving you a clear visual representation of your workflow logic.

  • Drag and rearrange states visually
  • See success/error transitions as colored edges
  • Support for expr edges in WSL workflows
  • Visual type selector for workflow types (workflow, feature, solution, custom)

WebIDE (Code Editor)​

An integrated Monaco-based code editor provides full editing capabilities:

  • Syntax-aware editing for WSL and SWSL files
  • Real-time parsing and visual preview
  • Side-by-side code and graph view
  • Theme-aware (follows global dark/light mode)

File Tree Sidebar​

A permanent left sidebar displays a hierarchical tree of your WSL and SWSL files:

  • Browse and load workflow files
  • Organized directory structure
  • Click to open files in the editor

WSL/SWSL Support​

Studio supports both workflow syntax formats:

  • WSL - Standard Workflow Specific Language with explicit states
  • SWSL (Simplified WSL) - Pipeline-style syntax with -> chaining

A visual type selector lets you switch between workflow, feature, solution, and custom types.

Export and Download​

Export your workflows as .wsl files:

  • Download button to save workflows locally
  • Export from the visual editor or code view

File Loading​

Load workflows from multiple sources:

  • Local files - Open .wsl and .swsl files from your filesystem
  • URL loading - Fetch workflow files from remote URLs

Theme System​

A futuristic light/dark theme system with holographic UI aesthetic:

  • Theme-aware components throughout the application
  • Splash screen with theme-specific hero images
  • Automatic sync between WebIDE theme and global mode

Splash Screen​

A branded splash screen with theme-aware hero images provides a polished entry point to the application.

Getting Started​

Installation​

git clone https://github.com/kuetix/studio
cd studio
npm install

Development​

npm run dev

Build​

npm run build

Technology Stack​

  • React 19 - UI framework
  • Vite - Build tool
  • React Flow (@xyflow/react) - Node-based graph visualization
  • Monaco Editor (@monaco-editor/react) - Code editor component