Splunk Custom Visualizations

Build Canvas 2D custom visualizations for Splunk Dashboard Studio—with a portable Agent Skill for Claude Code, Cursor, and Codex that handles scaffolding, rendering logic, testing, and packaging. Legacy Simple XML visualizations remain in legacy/examples/.

Splunk's built-in charts cover the basics, but sometimes your data deserves something more. Custom visualizations let you render search results exactly the way you want — gauges, heatmaps, status boards, or anything you can draw on a canvas.

What's Inside

.agents/skills/splunk-viz/     Canonical cross-agent skill
.claude/skills/splunk-viz/     Thin Claude Code discovery adapter
.cursor/skills/splunk-viz/     Thin Cursor discovery adapter
install-skill.sh               Install the skill for Claude, Cursor, or Codex
index.html                     Redirects to harness/
harness/                       Landing page, logo, and both harnesses
harness/studio/                Native Dashboard Studio iframe/API harness
harness/legacy/                Legacy SplunkVisualizationBase harness
shared/                        Harness CSS and Tailwind sources
studio-examples/               Native Studio v2 projects
legacy/examples/               Archived legacy viz apps
scripts/build-studio.sh        Build all native Studio example projects
legacy/build.sh                Build and package legacy apps
splunk_health/                 Bundled legacy health app

Quick Start

1. Clone this repo and open it in your editor

2. Open the repository in Claude Code, Cursor, or Codex. All three discover splunk-viz from the checked-in adapters.

3. Ask your agent to build a viz, for example:

   Using splunk-viz, create a custom visualization that shows a donut chart
   with a center label. It should accept "label" and "value" columns.
   

4. Use the skill in another project:

   ./install-skill.sh                          # user-global for detected agents
   ./install-skill.sh --project /path/to/repo  # project-local copy

See INSTRUCTIONS.md for the full setup guide.

Try the harness live: GitHub Pages Demo

Supported Agents

Agent	In this repo	After ./install-skill.sh
Claude Code	.claude/skills/splunk-viz	~/.claude/skills/splunk-viz
Cursor	.cursor/skills/splunk-viz	~/.cursor/skills/splunk-viz
Codex	.agents/skills/splunk-viz	~/.codex/skills/splunk-viz

Invoke /splunk-viz in Claude Code or Cursor, or $splunk-viz in Codex. Run npm run validate:skill after changing skill metadata, references, or adapters.

Featured Studio Visualizations

These native Dashboard Studio extensions target Splunk 10.4+. Build each project, then open harness/studio/.

Custom Single Value — last-row field display with label, alignment, colour, weight, and glow. See studio-examples/custom-single-value/.

| makeresults | eval value="Hello Splunk!"

Index Health — indexing activity, storage, and health across indexes. See studio-examples/index-health/.

Gauge — arc, donut, bar, and status modes with colour schemes. See studio-examples/gauge/.

| makeresults | eval value=75

Component Status Board — NOC-style health tiles with error/warning counts and click drilldown. See studio-examples/component-status-board/.

index=_internal sourcetype=splunkd log_level=* component=*
| stats count(eval(log_level="ERROR")) as errors
        count(eval(log_level="WARN")) as warns by component
| eval status=if(errors>0,"critical",if(warns>0,"warning","ok"))

Test Harness

python3 -m http.server 8080

Open http://localhost:8080/harness/ for the landing page, harness/studio/ for native extensions, or harness/legacy/ for archived Simple XML vizs. The repo root / redirects there.

The Studio harness derives option controls from config.json, supports fixture sliders, an editable data grid, and loading / no-data / theme / mode controls. Build a Studio project first so dist/<viz>/visualization.js exists.

See TEST-HARNESS.md for the fixture schema.

Requirements

• Splunk Enterprise 10.4+ or Splunk Cloud for native Studio extensions
• Splunk Enterprise 10.2+ for legacy apps in legacy/examples/
• Node.js 22+
• Yarn 1.22+ for a new official @splunk/create scaffold (this repo's examples use npm)
• Claude Code, Cursor, or Codex (for the portable Agent Skill)

This skill covers both native Studio and legacy frameworks. Splunk's official Studio-only skill is custom-visualization-builder. Use that workflow (interactive CLI, Yarn, per-viz SPL.md, Cloud ACS) when scaffolding outside this repository.

How It Works

Each native Studio visualization is a Dashboard Studio extension project:

1. visualization.ts — ES module that uses DashboardExtensionAPI listeners and draws on a <canvas>
2. config.json — optionsSchema and editorConfig for the Format panel
3. esbuild — bundles a self-contained ES module that Splunk loads in an iframe
4. package.mjs — produces a .spl app package

Legacy apps still use SplunkVisualizationBase, formatter.html, and webpack. Build them with ./legacy/build.sh.

splunk_health/ is an archived legacy bundle of eight health visualizations. It is not a native Studio extension. Build it with ./splunk_health/build.sh. The screenshot in screenshots/splunk-health-dashboard.png is that legacy dashboard, not a Studio port.

Contributing

1. Create a Studio project in studio-examples/ (or a legacy app in legacy/examples/ when required)
2. Add harness.json and register the viz in harness/studio/manifest.json or harness/legacy/manifest.json
3. Build with ./scripts/build-studio.sh (or npm run build:studio) or ./legacy/build.sh
4. Test in the matching harness, then in Splunk, then submit a PR

Licence

Apache 2.0 — see LICENSE.