Custom visualization project and app structure

After building a custom visualization for Splunk Dashboard Studio, you must package it into an app with specific directories, structure, and files.

This topic provides guidelines and recommendations for the structure for the custom visualization and Splunk app.

Custom visualization project structure

Using the @splunk/create --mode=dashboard-studio-extension CLI to initialize your custom visualization project is best practice. The CLI tool provides a convenient way to quickly start your project by generating the foundational files and configuration for your chosen template. The CLI tool creates a new custom visualization project with a structure similar to the following, based on the template you choose:
CODE 
my_custom_viz/ 
├── visualizations/ 
│   └── my_custom_viz/ 
│       ├── src/ 
│       │   ├── visualization.js   # entry point 
│       │   └── visualization.css 
│       └── config.json            # viz metadata 
├── package/ 
│   └── app/ 
│       └── app.conf               # Splunk app identity 
├── build-plugins/ 
├── build.mjs                      # esbuild build script 
├── package.mjs                    # packaging script 
└── package.json

If not using the @splunk/create --mode=dashboard-studio-extension CLI, you can structure your custom visualization project as preferred. There are no structural requirements for the visualization projects.

Note: While there are no structural requirements for the visualization projects, the app packaged with the custom visualization must adhere to the expected app structure as the following describes.

App structure

After building a custom visualization, you will package it into a Splunk app to install on Splunk instances.

As a Splunk app, your custom visualization will follow the required general directory structure for Splunk apps. This topic only provides information for the directories and structure relevant to custom visualizations for Dashboard Studio. For information regarding the required general directory structure for Splunk apps, see Anatomy of a Splunk app in Splunk Cloud Platform or Splunk Enterprise.

The following provides an example of a partial structure for a Splunk app that contains a custom visualization for Dashboard Studio, highlighting the required directories and files:
CODE 
<app name>
├── appserver
	├── static
		└── visualizations	
			└── <visualization name>
				├── visualization.js
				├── visualization.css
				└── config.json
	├── default
		├── visualizations.conf
		└── app.conf
	└── metadata
		└── default.meta
The following provides descriptions of the key files:
File Description
visualization.js Built/bundled JavaScript file for rendering the visualization. Entry point for the custom visualization.
visualization.css Optional. Example CSS styling and behavior rules for the visualization. There is no required structure for styling for custom visualizations.
config.json Defines various configuration options for a custom visualization, such as how to handle the presentation, default rendering, validation, and editing experience. See Visualization Config.
visualizations.conf Contains definitions for visualizations that the app makes available to Splunk.
app.conf Contains definitions for the app's properties, state, and appearance in Splunk.
default.meta Contains ownership information, access controls, and export settings for Splunk objects like saved searches, event types, and views.

Using the @splunk/create --mode=dashboard-studio-extension CLI to package your custom visualization into a Splunk app is best practice. See Create custom visualizations for Dashboard Studio with the Splunk dashboard extension CLI.