GitLab Pipeline Visual Editor

Visual node-based editor for .gitlab-ci.yml with column-based layout matching GitLab's native pipeline view. Full bidirectional YAML import/export with complete GitLab CI schema support.

Stack

• SvelteKit 5 (runes mode) + TypeScript
• @xyflow/svelte for flow visualization
• Monaco Editor for bash/shell syntax highlighting
• js-yaml for YAML parsing/generation
• Tailwind CSS v4 via @tailwindcss/vite

Architecture

src/lib/
├── stores/          # pipeline, selection, history, ui state
├── types/           # GitLab CI schema + internal pipeline model
├── yaml/            # parser, generator, validator
├── utils/           # layout engine, keyboard shortcuts, storage
└── components/
    ├── canvas/      # SvelteFlow nodes/edges with column-based positioning
    ├── panels/      # properties editor with resizable sidebar
    └── editors/     # Monaco script editor, rules builder, variables

State Management: Svelte stores with derived state. History uses structuredClone() for efficient undo/redo.

Layout: Column-based algorithm (stages as columns, jobs stacked vertically). No dagre dependency—deterministic positioning with LAYOUT_CONSTANTS.

Performance: O(n+m) edge generation via job lookup Map. Cached getJobsInStage() calls. Debounced auto-save to localStorage.

Features

• Complete GitLab CI schema: All job properties, rules, artifacts, cache, environment, secrets, etc.
• Bidirectional YAML: Import existing .gitlab-ci.yml → edit visually → export valid YAML
• Monaco editor: Bash/shell syntax highlighting for scripts
• Resizable properties panel: Drag left edge to expand (280px–800px, persisted)
• Validation: Circular dependency detection, job reference checks, deprecated syntax warnings
• History: Undo/redo with 50-item limit
• Auto-save: Debounced localStorage persistence

Quick Start

npm install
npm run dev

Open http://localhost:5173. Loads corporate example pipeline (Python backend + Next.js frontend with K8s deployments) if no saved state exists.

Keyboard Shortcuts

GitLab CI Coverage

Primary: stages, script, image, rules, needs, when, allow_failure, tags, variables, artifacts, cache

Advanced: parallel, timeout, retry, interruptible, resource_group, environment, release, trigger, services, secrets, id_tokens, dast_configuration, hooks, before_script, after_script, extends, dependencies

Global: variables, default, workflow, include, stages

Development

npm run dev      # Dev server (HMR)
npm run build    # Production build
npm run preview  # Preview production build
npm run check    # TypeScript type checking

Notes

• No backend: File-based import/export only. All state in browser localStorage.
• SSR-safe: Window checks for localStorage/event listeners.
• Type-safe: Full TypeScript coverage with GitLab CI schema types.
• Production-ready: No console statements, defensive code removed, optimized performance.

License

MIT