Create custom visualizations for Dashboard Studio with the Splunk dashboard extension CLI

You can use @splunk/create --mode=dashboard-studio-extension to scaffold a custom visualization project and package it as a Splunk app (.spl file) that can be installed for use in Splunk Dashboard Studio. This process consists of the following steps:

1. Create the custom visualization project.

2. Build the custom visualization using build.

3. Package the visualization as a Splunk app.

4. (Optional) Add visualizations to the existing project.

Prerequisites

• Node.js 22.0.0 or higher

• One of the following:

  • npm 10 or higher

  • Yarn 1.22 or higher

Create the custom visualization project

You can create a custom visualization project using one of the following ways:

npm create @splunk/create@latest --mode=dashboard-studio-extension

yarn create @splunk/create@latest --mode=dashboard-studio-extension

You can choose one of the following templates for your project. The templates include a working example of a custom table visualization.

my_viz/ 
├── package.json                         # Node scripts & devDependencies 
├── README.md 
├── build.mjs                            # esbuild build script 
├── package.mjs                          # Packager script (runs packaging logic) 
├── build-plugins/ 
│   └── css-and-size.mjs                 # esbuild CSS injection + bundle size warnings 
├── package/ 
│   └── app/ 
│       └── app.conf                     # Splunk app identity (source of truth) 
└── visualizations/ 
     └── my_viz/                          # One visualization per subdirectory 
         ├── config.json                  # Viz metadata for Splunk 
         └── src/ 
             ├── visualization.js (or .jsx) 
             ├── visualization.css 
             └── assets/ 
                 └── ChartColumnSquare.svg

dist/ 
└── my_viz/ 
     └── visualization.js   # Bundled output

Bundle the custom visualization using build

cd my_viz 
yarn install       # Install dependencies 
 
yarn build         # One-time build → dist/ 
yarn dev           # Watch mode (rebuilds on file changes) 
yarn build:prod    # Production build (minified, no sourcemaps) 
 
yarn package       # Package into a .spl Splunk app

{ 
   "config": { 
     "name": "My Visualization", 
     "description": "...", 
     "category": "Custom", 
     "icon": null, 
     "dataContract": { 
       "requiredDataSources": ["primary"], 
       "optionalDataSources": [] 
     }, 
     "size": { 
       "initialWidth": 400, 
       "initialHeight": 300 
     }, 
     "optionsSchema": {}, 
     "editorConfig": [] 
   }, 
   "showTitleAndDescription": true, 
   "includeInToolbar": true, 
   "includeInVizSwitcher": true, 
   "showDrilldown": false, 
   "canSetTokens": [], 
   "hasEventHandlers": false 
}

[package] 
id = my_viz           # Splunk app ID 
 
[ui] 
is_visible = 1 
label = My Visualization 
 
[launcher] 
author = Your Name 
description = A custom viz 
version = 0.1.0 
 
[install] 
is_configured = 0 
build = <auto-populated from git hash> 
 
[manifest] 
category = Custom

Package the visualization as a Splunk app

You can use yarn package to package the visualization. yarn package does the following:

1. Validate project structure. Checks for package.json, visualizations/ directory, config.json in each visualization directory and built dist/{vizName}/visualization.js files.

2. Read package/app/app.conf for app identity (id, version, label, author, etc.).

3. Create staging directory at stage/{appId}/ with the full Splunk app directory layout.

4. Copy each built dist/{vizName}/visualization.js to appserver/static/visualizations/{vizName}/visualization.js. Copy source maps if present.

5. Generate Splunk config files:

   • default/visualizations.conf: register each visualization with Splunk (label, description, framework_type = studio_visualization)

   • metadata/default.meta: set export permissions (export = system)

6. Generate app.manifest (JSON manifest Splunk uses for app inspection).

7. Create .spl archive in dist/{appId}-{version}-{7-char-git-hash}.spl.

The output of yarn package is as follows:

• stage/{appId}/: staged app directory (useful for debugging app structure)

• dist/{appId}-{version}-{hash}.spl: installable Splunk app file. A .spl file is a gzipped tar archive (.tar.gz with a different extension). The archive contains a single top-level directory named after the app ID, which contains the full Splunk app structure. You can install it via Install app from file in Splunk Enterprise.

Add visualizations to an existing project

The packager automatically discovers all subdirectories of visualizations/. To add more visualizations to an existing project, do the following:

1. Create visualizations/my_new_viz/ with config.json and src/visualization.js.

2. Run yarn build && yarn package to bundle all visualizations in the project into the same .spl file.

Troubleshoot