npm package: @ranzucker/pipe
Description: Visual GitLab CI pipeline editor - build .gitlab-ci.yml files with a drag-and-drop interface
Author: ranzucker
Latest version: 0.0.1

# 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)

```bash
npx pipe dev
```

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

### Local development

```bash
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

```bash
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

```bash
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