Plugins 〉Interactive learning

Application

grafana

Interactive learning

Overview
Installation
Change log
Related content
Documentation →

Interactive learning Plugin

Get help exactly when and where you need it. Interactive learning brings contextual documentation and interactive guides directly into Grafana, so you can learn and build without leaving your workflow.

⚠️ Important: Version 1.1.83+ required for interactive guides
Starting with version 1.1.83, interactive guides are served from a new CDN (interactive-learning.grafana.net). If you're using an older version, you must update to continue loading interactive guides. See the CHANGELOG for details.

What is Interactive learning?

Interactive learning is your in-app learning companion. It provides:

Smart recommendations – Get relevant docs and guides based on what you're working on
Interactive guides – Follow step-by-step guided learning journeys with "Show Me" and "Do It" features
Tab-based navigation – Open multiple docs and guides in tabs, just like a browser
Milestone tracking – See your progress through learning journeys with clear milestones
Always available – Access help without switching windows or searching documentation sites

How to access Interactive learning

Look for the Help button (?) in the top navigation bar of Grafana
Click the Help button to open the Interactive learning panel
Browse recommended documentation based on your current context
Click View to read a doc or Start to begin an interactive guides

Getting started

Once you open Interactive learning:

Review recommendations – See docs and guides tailored to what you're doing in Grafana
Open content in tabs – Click "View" or "Start" to open content in a new tab
Navigate guides – Use the milestone navigation at the bottom to move through learning journeys
Try interactive features – Click "Show Me" to see where things are, or "Do It" to have Interactive learning guide you through actions
Manage your tabs – Close tabs you're done with, or keep them open for reference

Keyboard shortcuts

Alt + Left Arrow – Previous milestone
Alt + Right Arrow – Next milestone

For administrators

Discovering Interactive learning

Users can find Interactive learning in multiple ways:

Help button – Click the Help (?) button in the top navigation
Command palette – Search for "Interactive learning", "Need help?", or "Learn Grafana" in the command palette (Cmd+K or Ctrl+K)

Configuration options

Admins can configure Interactive learning from the plugin's configuration page in Grafana. The configuration includes three sections:

1. Configuration (basic settings)

Auto-launch guide URL – Set a specific learning journey or documentation page to automatically open when Grafana starts (useful for demos and onboarding)
Global link interception – (Experimental) When enabled, clicking documentation links anywhere in Grafana will open them in Interactive learning instead of a new tab

2. Recommendations

Context-aware recommendations – Enable/disable recommendation service that provides personalized documentation based on your current actions in Grafana
Data usage controls – Review what data is collected and toggle the feature on or off

3. Interactive features

Auto-completion detection – (Experimental) Enable automatic step completion when users perform actions themselves (without clicking "Do it" buttons)
Timing settings – Configure timeouts for requirement checks and guided steps to optimize the guide experience

Creating interactive guides

Interactive learning supports creating custom interactive guides in JSON format. These guides combine content (markdown, images, video) with interactive elements that can highlight UI elements, click buttons, and fill forms.

Documentation

JSON Guide Format Reference - Complete reference for the JSON guide structure and all block types
HTML to JSON Migration Guide - How to convert existing HTML guides to JSON format
Requirements Reference - Available requirements for controlling when interactive elements are accessible

Quick example

{
  "id": "my-guide",
  "title": "My Interactive Guide",
  "blocks": [
    {
      "type": "markdown",
      "content": "# Welcome\n\nThis guide shows you how to navigate Grafana."
    },
    {
      "type": "interactive",
      "action": "highlight",
      "reftarget": "a[href='/dashboards']",
      "requirements": ["navmenu-open"],
      "content": "Click **Dashboards** to see your visualizations."
    }
  ]
}

See the JSON Guide Demo for a complete example of all block types.

Contributing

We welcome feedback, issues, and contributions. Visit our GitHub repository to get involved.

License

See CHANGELOG.md for details on project changes and license information.

Installing Interactive learning on Grafana Cloud:

For more information, visit the docs on plugin installation.

Changelog

1.1.85

Added

Hugo shortcodes export: Added option to export Hugo shortcodes from debug tools (#326)

Changed

Block editor replaces WYSIWYG: Replaced WYSIWYG editor with new block editor for improved content creation experience (#414)
Improved UX of URL tester in dev tools (#392)

Fixed

Fixed infinite loop that blocked renders (#413)

Chore

Updated actions/checkout action to v6 (#407)
Updated actions/setup-node digest to 395ad32 (#395)
Updated dependency sass to v1.94.2 (#375)
Updated dependency prettier to v3.7.4 (#377)
Updated npm to v11.6.4 (#376)

1.1.84

Added

Assistant wrapper blocks: New assistant block type for JSON guides that wraps child blocks with AI-powered customization
- Each child block gets its own "Customize" button that adapts content to the user's actual datasources
- Supports wrapping markdown, interactive, multistep, and guided blocks
- Customizations are persisted in localStorage per block
Unified datasource metadata tool: New fetch_datasource_metadata tool for Grafana Assistant integration
- Auto-detects datasource type (Prometheus, Loki, Tempo, Pyroscope)
- Fetches labels, metrics, services, tags, and profile types from user's datasources
- Enables AI to generate queries using actual data from user's environment
Grafana context tool: New get_grafana_context tool providing environment information to the assistant

Changed

Updated datasource picker selectors in bundled tutorials for improved reliability
- Uses data-testid="data-source-card" with :has() selector for robust element targeting
Upgraded @grafana/assistant SDK to v0.1.7

1.1.83

⚠️ BREAKING CHANGE: New content delivery infrastructure
Interactive guides are now served from a dedicated CDN (interactive-learning.grafana.net) instead of GitHub raw URLs. You must update to this version or later to load interactive guides.
What changed:
Content is now delivered from interactive-learning.grafana.net (production) and interactive-learning.grafana-dev.net (development)
GitHub raw URLs (raw.githubusercontent.com) are only supported in dev mode for testing
The backend proxy route for GitHub content has been removed
For content creators:
No changes required to your content - the CDN serves the same JSON format
Dev mode still supports GitHub raw URLs for testing before publishing

Changed

BREAKING: Migrated content delivery from GitHub raw URLs to dedicated interactive learning CDN
Removed backend proxy route for GitHub content (no longer needed with direct CDN access)
Updated security validation to use new interactive-learning.grafana.net domains
Simplified URL tester in dev mode to accept all supported URL types in single input

Added

Added interactive-learning.grafana-ops.net to allowed domains

Removed

Removed data-proxy.ts and GitHub proxy configuration from plugin.json
Removed validateGitHubUrl and related GitHub-specific URL validation functions

1.1.78 (2025-12-01)

Changed

Added improvements to interaction engine

Fixed

Fixed EnableRecommenderBanner not showing when recommendations are disabled (variable name bug)

1.1.77 (2025-12-01)

Fixed

Fixed regression in WYSIWYG editor caused by recent updates
Improved requirements system

Chore

Updated actions/setup-go digest to 4dc6199
Updated actions/checkout action to v5.0.1

1.1.76 (2025-12-01)

Fixed

Fixed issues with RudderStack analytics

1.1.75 (2025-12-01)

Fixed

fixed issue with bundled getting started guide step

1.1.74 (2025-12-01)

⚠️ BREAKING CHANGE FOR CONTENT CREATORS
The content format for interactive guides has migrated from HTML/TypeScript to JSON. Existing HTML-based guides will continue to work but are deprecated. All new content should use the JSON format. See the migration guide at docs/developer/interactive-examples/html-to-json-migration.md and the format documentation at docs/developer/interactive-examples/json-guide-format.md.

Added

Added JSON-based interactive guide format with full migration of bundled interactives
Added quiz block for interactive knowledge checks
Added JSON export support in dev mode
Added fullscreen mode for WYSIWYG editor
Added bubble toolbar for WYSIWYG editor
Added verify property for interactive step validation
Added completeEarly support at interactive block level
Added noop interactive action type
Added auto-extract selector from step format in Simple Selector Tester

Changed

BREAKING: Content format migrated from HTML/TypeScript to JSON
Moved dev tools to dedicated tab for better organization
Updated interactive UI styling
Improved edit experience in dev mode

Fixed

Fixed showMe/doIt property handling in interactive steps
Fixed step sequencing issues
Fixed URL generation strategy for both new content.json and legacy unstyled.html

Chore

Updated grafana/plugin-ci-workflows/ci-cd-workflows action to v4.1.0

1.1.73 (2025-11-25)

Added

Added assistant RudderStack analytics integration
Added cancel button and cleanup for guided components

Fixed

Applied React anti-pattern validator fixes

1.1.72 (2025-11-25)

Added

Added support for bundled and GitHub links

Changed

Improved WYSIWYG editor based on RichiH feedback
Refreshed documentation to align with current architecture

Fixed

Fixed issues with sections not rechecking requirements
Fixed DOM selector logic in interactive engine
Fixed formfill selectors to descend into input elements

1.1.71 (2025-11-21)

Fixed

Hotfix for requirements in guided step
Fixed documentation issues

1.1.70 (2025-11-21)

Added

Added new inline assistant feature
Added ability to open learning journeys and docs on load
Implemented featured recommendations

Changed

WYSIWYG cosmetic improvements

1.1.69 (2025-11-19)

Changed

Changed requirements to be event driven rather than poll-based

1.1.68 (2025-11-18)

Added

Added highlight feature to dev tools
Added skip button for steps in guided mode

Changed

Renamed "Pathfinder Tutorials" to "Pathfinder Guides" throughout
Allows buttons to also use CSS selectors

Fixed

Fixed issue with auto loading
Fixed multistep validation for reftargets in WYSIWYG editor

Removed

Removed old interactive code
Removed dead requirements code

Chore

Updated grafana/plugin-actions
Updated grafana/plugin-ci-workflows/ci-cd-workflows action to v4.0.0
Updated actions/checkout
Updated dependency glob to v11.1.0 (security)
Added new e2e test and updated test IDs to best practices

1.1.67 (2025-11-17)

Added

Added WYSIWYG interactive HTML editor (initial implementation)

Fixed

Prevent opening sidebar on onboarding

1.1.66 (2025-11-13)

Added

Added Grafana e2e selectors
Added collapse on complete feature

Fixed

Fixed interactive styles
Fixed UI theme and tab appearance

1.1.65 (2025-11-12)

Changed

Centralized types to reduce duplication
Refactored devtools

Fixed

Fixed regression for guided handler

Chore

Updated grafana/plugin-actions
Added changelog and documentation links

1.1.64 (2025-11-11)

Added

Added offline cloud suggestions for improved user guidance when recommendations are not available
Implemented hand raise functionality for live sessions