Complete Zellij development toolkit: IntelliSense, validation, color preview, and snippets for config and layout files.

The first dedicated VS Code extension for Zellij. No more trial-and-error config editing.

Features

Config Completions

Smart completions for all 26+ config options with type hints, default values, and documentation.

Keybind & Action Completions

Context-aware completions inside keybind blocks. Suggests modes, bind syntax, and all 53+ actions with parameter hints.

Hover Documentation

Hover over any option, action, or mode to see description, valid values, examples, and links to Zellij docs.

Diagnostics & Validation

Catch errors before launching Zellij. Validates option names, value types, mode names, action names, SwitchToMode targets, and hex colors.

Theme Color Preview

Inline color decorators for hex values in theme definitions, with VS Code's native color picker.

What's Covered

Area	Count	Details
Config options	26+	All documented options with types and defaults
Actions	53+	Full action set with parameters
Modes	14	All keybind modes including shared/tmux
Layout elements	12	Pane, tab, templates, swap layouts
Built-in plugins	9	tab-bar, status-bar, strider, etc.
Theme colors	11	fg, bg, and all ANSI colors

Snippets

Prefix	Description
zellij-config	Full config template
zellij-keybinds	Keybinding block
zellij-theme	Theme definition
zellij-layout	Basic layout
zellij-layout-split	Split pane layout
zellij-layout-tabs	Multi-tab layout
zellij-plugin	Plugin configuration
zellij-bind	Single key binding
zellij-swap	Swap layout definition
zellij-shared	Shared keybindings

Installation

VS Code Marketplace:

1. Open VS Code
2. Press Ctrl+Shift+X (or Cmd+Shift+X)
3. Search for "Zellij Toolkit"
4. Click Install

Command Line:

code --install-extension atoolz.zellij-vscode-toolkit

File Detection

The extension activates for:

• Files named config.kdl (auto-detected as Zellij config)
• Files in ~/.config/zellij/ directory
• Any .kdl file manually set to "Zellij Config" language
• Use command "Zellij: Set as Zellij Config" to manually activate

Configuration

Setting	Default	Description
zellijConfig.zellijBinaryPath	"zellij"	Path to Zellij binary
zellijConfig.enableValidation	true	Enable real-time validation
zellijConfig.enableColorDecorators	true	Show inline color decorators

Why This Extension?

Zellij has 30K+ GitHub stars and growing fast, but its KDL config format has zero dedicated editor support. Generic KDL extensions only provide syntax highlighting. This extension adds:

• Context-aware completions (different suggestions in keybinds vs themes vs layouts)
• Real validation that catches errors before runtime
• The only tool that knows about Zellij's 53 actions and their parameters
• Color preview for theme editing

Contributing

git clone https://github.com/atoolz/zellij-vscode-toolkit.git
cd zellij-vscode-toolkit
npm install
npm run build
npm run test:e2e
# Press F5 in VS Code to debug

License

MIT

---

_{Part of the AToolZ toolkit suite}