YAML Dashboard Compiler - VS Code Extension
A VS Code extension that provides live compilation and preview for Kibana YAML dashboards. This extension makes it fast and easy to edit and work with YAML dashboard files by automatically compiling them on save and providing a live preview.
Features
- Auto-complete and Validation: Schema-based auto-complete, validation, and hover documentation for YAML dashboard files (powered by Red Hat YAML extension)
- Code Snippets: Pre-built snippets for all panel types, controls, and layouts - just start typing a prefix like
panel-lens-metric and press Tab
- Auto-compile on Save: Automatically compiles your YAML dashboard files whenever you save them
- Live Preview: View your compiled dashboard in a side-by-side preview panel with live reload functionality
- Visual Grid Layout Editor: Drag and drop panels to rearrange them, resize panels interactively, with automatic YAML updates
- Export to NDJSON: Copy or download compiled dashboards as NDJSON for direct import into Kibana
- Open in Kibana: Upload dashboards directly to Kibana and open them in your browser with one command
- Secure Credential Storage: Kibana credentials stored encrypted using VS Code's SecretStorage API (OS keychain)
Requirements
For End Users
- VS Code 1.85.0 or higher
- Red Hat YAML extension (automatically installed)
- No Python required - LSP server bundled as binary in platform-specific VSIX
For Developers
- Python 3.12+
dashboard_compiler package installed- VS Code 1.85.0 or higher
Installation
From Marketplace (Coming Soon)
Install directly from the VS Code Extensions marketplace.
From VSIX (Manual)
- Download the platform-specific
.vsix file from releases
- In VS Code: Extensions view (Ctrl+Shift+X) → "..." menu → "Install from VSIX..."
For Development
See BUILDING.md for build and development instructions.
Setup
Python Environment (Development Only)
If developing the extension, install the dashboard_compiler package:
# From repository root
pip install -e .
# or: uv sync
Extension Configuration
Configure in VS Code settings:
yamlDashboard.pythonPath: Python interpreter path (default: python)yamlDashboard.compileOnSave: Auto-compile on save (default: true)yamlDashboard.kibana.url: Kibana URL for uploads (default: http://localhost:5601)yamlDashboard.kibana.sslVerify: Verify SSL certificates (default: true)yamlDashboard.kibana.browserType: Browser for opening dashboards - external or simple (default: external)yamlDashboard.kibana.uploadOnSave: Auto-upload on save (default: false)
Usage
Commands
Open Command Palette (Ctrl+Shift+P) and search for:
- YAML Dashboard: Compile Dashboard - Manually compile current YAML file
- YAML Dashboard: Preview Dashboard - Open preview panel
- YAML Dashboard: Edit Dashboard Layout - Visual grid layout editor
- YAML Dashboard: Export Dashboard to NDJSON - Copy NDJSON to clipboard
- YAML Dashboard: Open in Kibana - Upload and open in browser
- YAML Dashboard: Set Kibana Username - Store username securely
- YAML Dashboard: Set Kibana Password - Store password securely
- YAML Dashboard: Set Kibana API Key - Store API key securely (recommended)
- YAML Dashboard: Clear Kibana Credentials - Remove stored credentials
Using Code Snippets
Speed up dashboard creation with built-in snippets:
- Start typing a prefix (e.g.,
panel-lens-metric)
- Press Tab to insert (or Ctrl+Space for completions)
- Tab through placeholders to fill in values
Available Prefixes:
| Prefix |
Description |
dashboard |
Complete dashboard structure |
panel-markdown |
Markdown panel |
panel-lens-metric |
Lens metric visualization |
panel-lens-pie |
Lens pie chart |
panel-lens-line |
Lens line chart |
panel-lens-bar |
Lens bar chart |
panel-lens-datatable |
Lens data table |
panel-esql-metric |
ES|QL metric panel |
grid-full |
Full width layout (48 units) |
grid-half |
Half width layout (24 units) |
control-options |
Options list control |
...and many more! See full list in the extension's snippet definitions.
Cursor Users: Press Ctrl+Space (Cmd+Space on Mac) to trigger completions.
Workflow
- Open a YAML dashboard file
- Use snippets to quickly insert panels
- Save (Ctrl+S) - auto-compiles
- Run "Preview Dashboard" to see compiled output
- Run "Edit Dashboard Layout" to visually arrange panels
- Use "Copy NDJSON" button to export for Kibana
Uploading to Kibana
Quick Setup
- Set Kibana URL in settings:
yamlDashboard.kibana.url
- Set credentials: Run "Set Kibana API Key" command (recommended) or use username/password
- Upload: Run "Open in Kibana" command
Credentials are stored securely in your OS keychain (macOS Keychain, Windows Credential Manager, Linux Secret Service).
Manual Import Alternative
- Use "Copy NDJSON" button in preview
- In Kibana: Stack Management → Saved Objects → Import
- Paste/upload the NDJSON
Troubleshooting
Extension Issues
Python server not starting
- Verify
dashboard_compiler is installed: python -c "import dashboard_compiler"
- Check Python path in extension settings
- View Output panel (View → Output → "YAML Dashboard Compiler") for logs
Compilation errors
- Check YAML syntax
- Review error message in preview panel
- Test manually:
python -c "from dashboard_compiler.dashboard_compiler import load; load('your_file.yaml')"
Preview not updating
- Ensure
yamlDashboard.compileOnSave is enabled
- Try manual "Preview Dashboard" command
- Close and reopen preview panel
Kibana Upload Issues
Authentication errors
- Verify Kibana URL is correct (include http/https)
- Check credentials are set using credential commands
- For self-signed certs, set
yamlDashboard.kibana.sslVerify to false
- Ensure API key has permission to create saved objects
- Check Output panel for detailed errors
Credentials not persisting
- Ensure OS keychain is unlocked
- On Linux, install
libsecret for credential storage
- Try clearing and re-setting credentials
Development
For build instructions, cross-platform packaging, and publishing details, see BUILDING.md.
For testing guidelines, see TESTING.md.
License
MIT - See LICENSE for details.
