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:
- Open VS Code
- Press
Ctrl+Shift+X (or Cmd+Shift+X)
- Search for "Zellij Toolkit"
- 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
