We released a new version of Dynamic Text Panel 3.0.0. This major release
- Added Styles editor.
- Added Code Syntax Highlight.
- Introduced selecting optional editors to display, which are hidden by default. Editors with updated values are always displayed.
- Removed panel padding. Padding can be added using the Styles editor.
- Updated to the latest Grafana 9.3.6 toolkit and workflows.
The plugin was updated in Grafana Catalog on February 21, 2023.
2 Million downloads
The Dynamic Text panel was downloaded more than two million times.

Community Use case
We are impressed with the everyday creations from the community using the latest features in the Dynamic Text panel for Grafana.
One of the interesting use cases is creating tabs with styles, JavaScript Code, and a mix of Handlebars with HTML. Previously it can be possible only with custom panels.

Magic (JavaScript) Trio
Dynamic Text is one of the three plugins that make Grafana complete. Dynamic Text, Data Manipulation and Apache ECharts are all you need to create functional real-world web applications.
Select Editor to display
To simplify panel options we decided to hide Default Content, JavaScript Code and Styles editors by default.
If you changed the value of Default Content or already using the JavaScript Code, then editors will be displayed even if not selected.

In many cases, you don't need to update the Default Content or use JavaScript Code and Styles. We love the minimalistic design with only the Content editor displayed and I hope you will too.
Styles editor
You can add custom styles or override the default using the dedicated code editor with CSS syntax highlight.

Default styles
loading...
Padding and margins
To display content without padding and margins override the parent CSS style.
& {
padding: 0;
margin: 0;
}
Code Syntax Highlight
The code syntax highlight is based on the highlight.js
library, which supports major languages.

Styling
We included the Accessibility (a11y) syntax highlight style for light and dark themes. You can override it in the Styles editor by copying one of the styles from the project source files.
a11y Light
loading...
a11y Dark
loading...
Getting Started
The Dynamic Text visualization panel can be installed from the Grafana Catalog or utilizing the Grafana command line tool.
For the latter, use the following command.
grafana-cli plugins install marcusolsson-dynamictext-panel
YouTube Tutorial
The Dynamic Text visualization panel lets you define a text template using the data from your data source query.
Release Notes
Breaking changes
The default Content and JavaScript editors are not displayed by default unless values were modified. To display required editors, including the new Styles, they should be selected in the list.
Features / Enhancements
- Update README features with new JavaScript Code Editor tutorial (#141)
- Update to Grafana 9.3.6 (#147)
- Update CI and Release workflows (#147)
- Update README to include JavaScript tutorial (#148)
- Add custom styles (#149)
- Add option to display optional editors (#149)
- Remove Panel Padding (#150)
- Add Code Syntax Highlight (#151)
- Add Breaking Changes for displaying optional editors (#152)
Feedback
We love to hear from you. There are various ways to get in touch with us.
- Ask a question, request a new feature, and file a bug with GitHub issues.
- Sponsor our open-source plugins for Grafana with GitHub Sponsor.
- Star the repository to show your support.