We want to start by expressing our deepest gratitude and admiration to the incredible team at Volkov Labs - true Grafana gurus who have revolutionized the Grafana ecosystem with their outstanding Business Suite plugins. Their innovative approach to creating intuitive, powerful, and well-documented plugins has set the gold standard for the entire Grafana community.
Volkov Labs, your dedication to open-source excellence, comprehensive documentation, and educational content has inspired thousands of developers and organizations worldwide. Your Business Text panel plugin provided the perfect foundation that enabled us to build something even more powerful while maintaining the elegant simplicity that makes your work so exceptional.
This enhanced version stands on the shoulders of giants - thank you for being the pioneers who made this possible! 🚀
This enhanced version of the Business Text panel builds upon Volkov Labs' excellent foundation with game-changing new features that transform it from a text visualization panel into a comprehensive data management and visualization platform.
- Complete CRUD Operations: Full Create, Read, Update, Delete functionality directly in Grafana
- Multi-Database Support: Works with PostgreSQL, SQLite, MySQL, and any Grafana data source
- Interactive Data Management: Real-time editing of database records with inline table interface
- Smart Keyboard Navigation: Seamless Tab/Shift+Tab navigation between editable cells
- Visual Data Validation: Real-time feedback with color-coded validation states
- Flexible Setup: Works with existing databases or demo configurations
- Go Backend Implementation: High-performance server-side HTTP request handling
- CORS Bypass Solution: Server-side fetching eliminates browser CORS limitations
- Multi-Tier Fallback Strategy: Backend → Proxy → Direct fetching with intelligent failover
- Resource Endpoint: Custom
/fetch-contentendpoint for secure external content access - Build Integration: Seamless development and production workflow automation
- Remote URL Fetching: Direct import of styles, scripts, and helpers from remote URLs
- Auto-Content Downloading: Intelligent automatic fetching of missing content
- Content Preservation: Revolutionary text area protection during refresh operations
- Multi-Format Support: Enhanced support for CSS, JavaScript, and HTML content
- Smart State Management: Prevents data loss during refresh and update operations
- Universal Query Execution: Execute queries against any Grafana data source from JavaScript
- Multi-Database Support: PostgreSQL, MySQL, SQLite, Infinity, and any custom data sources
- Variable Integration: Seamless integration with Grafana dashboard variables
- Error Handling: Comprehensive error management with user-friendly notifications
- TypeScript Support: Full type safety for data source operations
- Drag-and-Drop Interface: Intuitive reordering of content partials
- Font Awesome Integration: Professional icons throughout the interface
- Theme Integration: Full support for Grafana light/dark themes
- Notification System: Rich success/error notifications with detailed feedback
- Responsive Design: Optimized for all screen sizes and devices
- Security Testing: Dedicated Playwright tests for security validation
- Coverage Reporting: Detailed HTML coverage reports with 90%+ coverage
- Mock Implementations: Complete mocking for Canvas API, IntersectionObserver, D3, OpenLayers
- Integration Testing: End-to-end testing with real database operations
- Development Environment: Docker-based development with hot reloading
This enhanced Business Text panel transforms how you create custom visualizations in Grafana. Instead of developing complex plugins, you now have complete freedom to create any user interface using familiar web technologies:
- 🎨 Custom HTML: Design any layout, from simple tables to complex interactive dashboards
- 💻 Custom JavaScript: Implement any logic, from data processing to real-time interactions
- 🎭 Custom CSS: Style everything exactly as you envision, with full control over appearance
- 🔄 Real-time Data Integration: Connect directly to any Grafana data source with live updates
Your custom visualizations automatically inherit all Grafana capabilities:
- 🌗 Theme Inheritance: Automatically adapts to Grafana's light/dark themes
- 📊 Data Source Access: Query any configured data source (PostgreSQL, MySQL, InfluxDB, Prometheus, etc.)
- 🔧 Dashboard Variables: Use Grafana variables directly in your custom code
- 📱 Responsive Design: Works perfectly on all devices and screen sizes
- 🔄 Real-time Updates: Automatic refresh when dashboard data changes
- ⚡ Instant Feedback: See changes immediately without compilation or deployment
- 🔧 Live Editing: Modify HTML, CSS, and JavaScript directly in Grafana's Monaco editor
- 📚 Rich API Access: Access to all Grafana APIs, data sources, and dashboard context
- 🎯 No Build Process: Skip complex plugin development workflows
Transform your dashboards with unlimited possibilities:
- 📊 Interactive Tables: Create editable tables with real-time database updates
- 🎮 Custom Controls: Build unique UI controls for dashboard interaction
- 📈 Advanced Charts: Combine multiple chart libraries with Grafana data
- 🔔 Smart Notifications: Create custom alert interfaces with rich formatting
- 📋 Forms & Input: Build data entry forms that write directly to databases
- 🎨 Branded Dashboards: Create pixel-perfect interfaces matching your brand
The most powerful feature - direct database manipulation from visualizations:
- ✏️ Inline Editing: Click any data cell to edit database records directly
- ➕ Create Records: Add new database entries without leaving Grafana
- 🗑️ Delete Operations: Remove records with confirmation and validation
- 🔄 Real-time Sync: Changes reflect immediately across all connected panels
- 🎯 Multi-Database: Works with PostgreSQL, MySQL, SQLite, and any SQL database
- 🌐 Remote Content: Import HTML, CSS, and JavaScript from external URLs
- 💾 Content Preservation: Your edits are never lost during refreshes
- 🔄 Auto-sync: Automatically fetch updated content from remote sources
- 📝 Version Control: Manage different versions of your custom content
Thanks to the remote URL fetching capability, you can now leverage the full power of modern development tools for creating Grafana visualizations:
- 📂 External Repositories: Store your HTML, CSS, and JavaScript files in any Git repository
- 🌐 Direct Integration: Point Grafana panels directly to raw GitHub/GitLab URLs
- 🔄 Live Updates: Changes in your repo automatically reflect in Grafana dashboards
- 👥 Team Collaboration: Multiple developers can work on visualizations using standard Git workflows
- 🤖 Claude Code: Use AI assistants to generate, debug, and enhance your visualization code
- ⚡ GitHub Copilot: Get intelligent code suggestions while developing custom panels
- 🎯 AI-Driven Design: Describe your visualization needs and let AI generate the implementation
- 🔧 Smart Debugging: AI tools can analyze and fix issues in your custom code
1. 💭 Describe your visualization idea to AI
2. 🤖 AI generates HTML/CSS/JS code
3. 📂 Push code to your Git repository
4. 🔗 Link Grafana panel to repo URLs
5. 🎯 Instant visualization in Grafana
6. 🔄 Iterate with AI assistance
7. 🚀 Deploy across multiple dashboards
- 🎨 Design Systems: Maintain a Git repo with your organization's visualization components
- 📊 Template Libraries: Create reusable visualization templates with AI assistance
- 🔧 Rapid Prototyping: Use AI to quickly generate proof-of-concept visualizations
- 📚 Documentation: AI-generated comments and documentation for your custom code
- 🧪 Testing: AI-assisted test generation for your visualization components
This combination of remote content fetching + Git repositories + GenAI tools creates an unprecedented development experience where you can build sophisticated Grafana visualizations with the same modern workflows used in contemporary web development!
| Feature | Original Volkov Labs | Enhanced Edition | Enhancement Level |
|---|---|---|---|
| Text Rendering | ✅ Static templates | ✅ Dynamic + Database | 🔥 Revolutionary |
| Database Integration | ❌ None | ✅ Universal CRUD Operations | 🔥 Revolutionary |
| Custom Development | ❌ Plugin required | ✅ Complete HTML/CSS/JS Freedom | 🔥 Revolutionary |
| Backend | ❌ Frontend only | ✅ Go Backend + API | 🚀 Enterprise |
| Content Fetching | ✅ Basic remote content | ✅ Multi-tier + Preservation | 🔥 Revolutionary |
| UI Components | ✅ Good | ✅ Advanced + Drag-Drop | 💎 Professional |
| Testing | ✅ Basic tests | ✅ Comprehensive Suite | 💎 Professional |
| Documentation | ✅ Excellent | ✅ Enhanced + Examples | 💎 Professional |
# Install from enhanced repository
git clone https://github.com/oriolrius/business-text.git
cd business-text
# Start with database demo
npm start- Navigate to the Database Management dashboard (SQLite demo included)
- Click on any data row to edit inline
- Use Tab/Shift+Tab to navigate between fields
- See real-time validation and auto-save functionality
- Go to panel settings → Content Partials
- Add a new partial with a remote URL
- Enable "Local Copy" and click "Refresh"
- Edit the content and refresh again - your changes are preserved!
📦 Enhanced Business Text Panel
├── 🎨 Frontend (React + TypeScript)
│ ├── Enhanced Content Editors
│ ├── Universal Database Management UI
│ ├── Advanced Partials Editor
│ └── Real-time Validation System
├── ⚡ Backend (Go)
│ ├── Secure HTTP Fetching
│ ├── Database Operations
│ ├── SSRF Protection
│ └── Resource Endpoints
├── 🗄️ Database Layer
│ ├── Multi-Database Integration
│ ├── CRUD Operations
│ └── Data Validation
└── 🧪 Testing Suite
├── Security Tests
├── Integration Tests
└── Coverage Reports
| Section | Description | Enhanced Features |
|---|---|---|
| Database Demo Setup | Database integration guide (SQLite example) | ✨ NEW |
| Data Source Integration | Query any data source from JavaScript | ✨ Enhanced |
| Security Features | SSRF protection and authentication | ✨ NEW |
| Database Management | Interactive CRUD interface guide | ✨ NEW |
| Content Preservation | Editor state management | ✨ NEW |
- Monitor and manage any database records in real-time
- Inline editing of data with multi-database support (PostgreSQL, MySQL, SQLite, etc.)
- Real-time status updates with visual indicators
- Bulk operations with keyboard shortcuts
- Fetch external content from remote URLs seamlessly
- Content preservation during updates and refreshes
- Multi-source content aggregation
- Live updates from external APIs and services
- Combine multiple data sources in a single panel
- Execute complex queries directly from JavaScript
- Dynamic content generation based on real-time data
- Interactive dashboards with database integration
The following content is from the original excellent Volkov Labs documentation, preserved in its entirety:
We're excited to announce an update for the Business Text Panel! The latest version, fully compatible with Grafana 11 and Grafana 12, is now available under our new plugin ID: volkovlabs-text-panel. This enhancement ensures seamless integration and improved functionality for your dashboards.
To access the latest version and explore its features—such as dynamic text rendering, Markdown support, and JavaScript customization—please update your installations using the Grafana Plugins Catalog or the Grafana CLI with the new ID. For a step-by-step guide, visit our documentation or watch our latest tutorial video.
The Business Text panel plugin allows you to construct a text visualization template from the values of a dataset returned by a data source query.
- Business Text panel 6.X requires Grafana 11 or Grafana 12.
- Business Text panel 5.X requires Grafana 10 or Grafana 11.
- Dynamic Text panel 4.X requires Grafana 9.2 or Grafana 10.
- Dynamic Text panel 2.X and 3.X require Grafana 8.5 or Grafana 9.
- Dynamic Text panel 1.X requires Grafana 7.
You can install the Business Text panel from the Grafana Plugins catalog or use the Grafana command line tool.
For the latter, please use the following command:
grafana cli plugins install volkovlabs-text-panel
- Uses Monaco Code Editor with automatic JavaScript code formatting.
- Supports Markdown and Handlebars.
- Renders markdown-it into HTML elements.
- Supports the highlighting of code syntax using A11Y styles.
- Provides code sanitization:
- HTML inside templates is sanitized using XSS.
- Can be disabled in the Grafana configuration through the
disable_sanitize_htmlparameter.
- Supports display of nested objects using the
{{json object}}Handlebars helper. - Supports display of time global variables (
__toand__from) as seconds, ISO timestamps, or formatted using thedayjslibrary. - Supports adding the Handlebars helpers and event handlers.
- Supports adding CSS styles with dashboard variables.
- Supports internationalization using custom helpers.
- Data Source Query Integration - Execute queries against Grafana data sources directly from JavaScript code. Learn more
| Section | Description |
|---|---|
| Rendering | Explains how to create a visualization template for your data |
| Recipes | Useful snippets that you can use in your templates |
| Features | Demonstrates panel features.templates |
| Tutorials | Easy to follow tutorials |
| Release Notes | Stay up to date with the latest features and updates |
The Business Suite is a collection of open source plugins created and actively maintained by Volkov Labs.
The collection aims to solve the most frequent business tasks by providing an intuitive interface with detailed written documentation, examples, and video tutorials.
With the Business Suite Enterprise, you're not just getting a product, you're getting a complete support system. You'll have a designated support team ready to tackle any issues.
You can contact us via Zendesk, receive priority in feature requests and bug fixes, meet with us for in-person consultation, and get access to the Business Intelligence. It's a package that's designed to make your life easier.
- Ask a question, request a new feature, or report an issue at GitHub issues.
- Subscribe to our YouTube Channel and leave your comments.
Apache License Version 2.0, see LICENSE.