GitLab Pipeline Visual Editor

A visual editor for .gitlab-ci.yml files. Drag and drop jobs, connect dependencies, edit properties in a sidebar. Exports valid YAML that GitLab actually accepts.

What it does

It lets you build pipelines visually instead of fighting with indentation and syntax. Import existing YAML, edit it visually, export it back. Works entirely in the browser, 100% offline.

Tech stack

• SvelteKit 5 with runes (the new reactive primitives)
• @xyflow/svelte for the node-based UI
• Monaco Editor for script editing
• Tailwind CSS v4
• TypeScript throughout

Project structure

src/lib/
├── stores/          # State management (pipeline, selection, history, UI)
├── types/           # TypeScript types for GitLab CI schema
├── yaml/            # YAML parsing, generation, validation
├── utils/           # Layout calculations, keyboard shortcuts, localStorage
└── components/
    ├── canvas/      # The flow diagram (nodes and edges)
    ├── panels/      # Properties editor sidebar
    └── editors/     # Monaco editor, rules builder, etc.

The layout: Stages are columns, jobs stack vertically within them. Dependencies between jobs in the same stage render as horizontal subflows.

Features

• Full GitLab CI schema support (all the job properties, rules, artifacts, cache, etc.)
• Import/export YAML files
• Syntax highlighting for bash scripts
• Resizable properties panel (drag the left edge)
• Validates dependencies, catches circular refs, warns about deprecated stuff
• Undo/redo (50 action limit)
• Auto-saves to localStorage

Getting started

Using npx (recommended)

npx pipe dev

This will install dependencies automatically if needed and start the dev server. Then open http://localhost:5173.

Local development

npm install
npm run dev

If there's no saved state, it loads a sample corporate pipeline (Python backend, Next.js frontend, K8s deployments) so you can see how it works.

Available npx commands

npx pipe dev      # Start dev server
npx pipe build    # Build for production
npx pipe preview  # Preview production build

Keyboard shortcuts

• Ctrl+Z / Cmd+Z - Undo
• Ctrl+Shift+Z / Cmd+Shift+Z - Redo
• Delete / Backspace - Delete selected job
• Escape - Clear selection
• Ctrl+1 - Toggle left panel
• Ctrl+2 - Toggle right panel

GitLab CI support

Pretty much everything:

Job properties: script, image, rules, needs, when, allow_failure, tags, variables, artifacts, cache, 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 with HMR
npm run build    # Production build
npm run preview  # Preview the production build locally
npm run check    # Type check with svelte-check

License

MIT