{"id":40790148,"url":"https://github.com/grafana/interactive-tutorials","last_synced_at":"2026-01-21T20:01:18.445Z","repository":{"id":310646476,"uuid":"1040149225","full_name":"grafana/interactive-tutorials","owner":"grafana","description":"This repo contains a set of interactive wizard experiences for Grafana Pathfinder, found here: https://github.com/grafana/grafana-pathfinder-app","archived":false,"fork":false,"pushed_at":"2026-01-20T13:16:00.000Z","size":1339,"stargazers_count":5,"open_issues_count":10,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-20T22:05:31.242Z","etag":null,"topics":["keep"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grafana.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-08-18T14:27:23.000Z","updated_at":"2026-01-20T11:05:56.000Z","dependencies_parsed_at":"2025-08-19T12:34:29.593Z","dependency_job_id":"7494244d-f5e4-4e58-a795-b5e56fff9731","html_url":"https://github.com/grafana/interactive-tutorials","commit_stats":null,"previous_names":["grafana/interactive-tutorials"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/grafana/interactive-tutorials","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grafana%2Finteractive-tutorials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grafana%2Finteractive-tutorials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grafana%2Finteractive-tutorials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grafana%2Finteractive-tutorials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grafana","download_url":"https://codeload.github.com/grafana/interactive-tutorials/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grafana%2Finteractive-tutorials/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28641293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T18:04:35.752Z","status":"ssl_error","status_checked_at":"2026-01-21T18:03:55.054Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["keep"],"created_at":"2026-01-21T20:01:08.926Z","updated_at":"2026-01-21T20:01:18.438Z","avatar_url":"https://github.com/grafana.png","language":"HTML","readme":"# Interactive Learning Tutorials\n\nThis repository contains interactive learning tutorials for Grafana, designed by\nDeveloper Advocacy. It includes JSON guide content and is designed to work with\nthe Block Editor; assisted by Cursor's AI assistant (if you use it).\n\n## TL;DR for Grafana Employees\n\n1. Go to [https://learn.grafana-ops.net/plugins/grafana-pathfinder-app?dev=true](https://learn.grafana-ops.net/plugins/grafana-pathfinder-app?dev=true)\n2. Log in with Okta SAML. Find the \"Dev Mode\" checkbox; enable it ([it looks like this](docs/img/dev-mode.png)) and save\n3. Click the `?` icon (help menu for Grafana) in the upper right → Debug icon ([it looks like this](docs/img/dev-tools.jpg)) → Block Editor ([looks like this](docs/img/block-editor.jpg))\n4. Start building.\n\n*Not a Grafana employee? See the run locally section below*.\n\n## Stuck?\n\nPing Tom Glenn, David Allen, or Simon Prickett, all of whom have done this before on `#proj-grafana-pathfinder`\n\n## If you can't access stack above: Run the Plugin Locally\n\nIf you don't have access to `learn.grafana-ops.net/login` (e.g., you're an open source community contributor, customer, or internal user who doesn't have the right permissions set up), you can still run the Pathfinder plugin locally:\n\n* Clone this repo to your machine. Also clone the [interactive learning plugin](https://github.com/grafana/grafana-pathfinder-app)\n* Start the plugin repo. [Full instructions are here](https://github.com/grafana/grafana-pathfinder-app/blob/main/docs/developer/LOCAL_DEV.md) but the short version is: `npm install` then `npm run build \u0026\u0026 npm run server` and go to http://localhost:3000/\n* Now follow the same instructions as above: go to the Interactive Learning Plugin settings page, and set the\nend of the URL to include `?dev=true`. The full URL should be roughly `{instance}/plugins/grafana-pathfinder-app?dev=true`\n* All other instructions are the same.\n\n### Writing Your Guide with the Block Editor\n\nInteractive guides are JSON documents. See [explore-drilldowns-101/content.json](explore-drilldowns-101/content.json) for a complete example.\n\nThe **Block Editor** is the recommended way to create guides:\n\n1. Open the Block Editor from the Pathfinder sidebar (dev mode must be enabled)\n2. Click \"Add Block\" to add content blocks (markdown, interactive, section, etc.)\n3. Use the **Record** feature on sections to capture your interactions automatically\n4. Preview your guide with the Preview toggle\n5. Export via \"Copy JSON\" or create a GitHub PR directly from the editor\n\n### Iterate \u0026 Develop\n\nThe Block Editor auto-saves your work to localStorage, so you can iterate without losing progress.\n\nTo test your guide:\n\n1. Use the **Preview** mode in the Block Editor to see how it renders\n2. Alternatively, export the JSON and use the **URL Tester** in debug tools to load it by URL\n\nThe URL Tester accepts:\n- A local file URL (if using [Live Server extension](https://marketplace.cursorapi.com/items/?itemName=ritwickdey.LiveServer))\n- A GitHub raw URL (push to a branch first)\n- Pasted JSON content\n\n**NOTE**: URL Tester and Block Editor only appear when dev mode is enabled.\n\n**Need help with selectors?** The Block Editor captures them automatically via Record mode. For advanced patterns, see [Selectors Reference](docs/selectors-and-testids.md).\n\n**Record Mode** (for sections)\n\n1. Click the **Record** button (red circle icon) on any section block\n2. Navigate and interact with Grafana normally - clicks, inputs, and form fills are captured\n3. A red banner appears showing your step count; hover over elements to see the DOM path\n4. Press **Stop** or **Escape** when finished\n5. Recorded steps are automatically added as interactive blocks with selectors filled in\n\n**Element Picker** (for individual blocks)\n\n1. When editing an interactive, multistep, or guided block, click the **Pick Element** button (crosshair icon)\n2. Click any element on the page to capture its selector\n3. The selector is automatically inserted into the form\n\nBoth methods use intelligent selector generation that prefers stable `data-testid` attributes, falls back to semantic attributes (`href`, `aria-label`, `id`), and warns about fragile selectors.\n\nFor advanced selector patterns and manual writing, see [docs/selectors-and-testids.md](docs/selectors-and-testids.md).\n\n### Need Help? Ask Cursor\n\nCursor knows this repo well. Use Ask mode to query how interactive elements work—it reads the `docs/` folder automatically.\n\n[Download Cursor](https://cursor.com/downloads) | [Interactive Types Reference](docs/interactive-types.md)\n\n## Demo: Understand What We're Building!\n\n1. Go to [Drilldown section of Grafana Play](https://play.grafana.org/drilldown)\n2. Clicking the `?` help icon in the upper right hand corner of the screen, toggles the interactive learning plugin on/off.\n\n\u003cimg src=\"docs/img/icon.png\" alt=\"Interactive Learning Icon\" width=\"40\" style=\"height:auto;\" /\u003e\n\n3. Make sure you're on the Drilldown page, check the Recommendations tab.\n4. Follow the _Interactive Guide: Explore Drilldowns 101_ by clicking the \"View\" button by that recommendation. We're going to build\nan interactive guide like that!\n5. Notice the structure: it's built in sections, of individual steps, with each step having a \"Show Me\" and \"Do It\" option.\n\n## Getting Your Tutorial Into The Plugin\n\n1. **Submit**: Open a PR to this repo, ping reviewers\n2. **Include**: several sentences describing when/where/who should see\nyour guide, so we can include it in the recommender.\n\n## Full Reference Documentation\n\nFor complete reference documentation:\n\n- **This repo**: See [.cursor/ai-guide-reference.mdc](.cursor/ai-guide-reference.mdc) for AI-assisted authoring\n- **Pathfinder Plugin Docs**: See [interactive learning plugin docs](https://grafana.com/docs/plugins/grafana-pathfinder-app/latest/)\n\nPrimary documentation files in this repo:\n\n| Topic | File |\n|-------|------|\n| Guide Format | [docs/json-guide-format.md](docs/json-guide-format.md) |\n| Block Types | [docs/interactive-types.md](docs/interactive-types.md) |\n| Properties | [docs/json-block-properties.md](docs/json-block-properties.md) |\n| Requirements | [docs/requirements-reference.md](docs/requirements-reference.md) |\n| Selectors | [docs/selectors-and-testids.md](docs/selectors-and-testids.md) |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrafana%2Finteractive-tutorials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrafana%2Finteractive-tutorials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrafana%2Finteractive-tutorials/lists"}