Development How-tos | Superset (2024)

Contributing to Documentation

The latest documentation and tutorial are available at

The documentation site is built using Docusaurus 2, a modernstatic website generator, the source for which resides in ./docs.

Local Development

To set up a local development environment with hot reloading for the documentation site:

cd docs
yarn install # Installs NPM dependencies
yarn start # Starts development server at http://localhost:3000


To create and serve a production build of the documentation site:

yarn build
yarn serve


Commits to master trigger a rebuild and redeploy of the documentation site. Submit pull requests that modify the documentation with the docs: prefix.

Creating Visualization Plugins

Visualizations in Superset are implemented in JavaScript or TypeScript. Supersetcomes preinstalled with several visualizations types (hereafter "viz plugins") thatcan be found under the superset-frontend/plugins directory. Viz plugins are added tothe application in the superset-frontend/src/visualizations/presets/MainPreset.js.The Superset project is always happy to review proposals for new high quality vizplugins. However, for highly custom viz types it is recommended to maintain a forkof Superset, and add the custom built viz plugins by hand.

Note: Additional community-generated resources about creating and deploying custom visualization plugins can be found on the Superset Wiki


In order to create a new viz plugin, you need the following:

  • Run MacOS or Linux (Windows is not officially supported, but may work)
  • Node.js 16
  • npm 7 or 8

A general familiarity with React and the npm/Node system isalso recommended.

Creating a simple Hello World viz plugin

To get started, you need the Superset Yeoman Generator. It is recommended to use theversion of the template that ships with the version of Superset you are using. Thiscan be installed by doing the following:

npm i -g yo
cd superset-frontend/packages/generator-superset
npm i
npm link

After this you can proceed to create your viz plugin. Create a new directory for yourviz plugin with the prefix superset-plugin-chart and run the Yeoman generator:

mkdir /tmp/superset-plugin-chart-hello-world
cd /tmp/superset-plugin-chart-hello-world

Initialize the viz plugin:

yo @superset-ui/superset

After that the generator will ask a few questions (the defaults should be fine):

$ yo @superset-ui/superset
_-----_ ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ generator-superset │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
´ ` |° ´ Y `
? Package name: superset-plugin-chart-hello-world
? Description: Hello World
? What type of chart would you like? Time-series chart
create package.json
create .gitignore
create babel.config.js
create jest.config.js
create tsconfig.json
create src/index.ts
create src/plugin/buildQuery.ts
create src/plugin/controlPanel.ts
create src/plugin/index.ts
create src/plugin/transformProps.ts
create src/types.ts
create src/SupersetPluginChartHelloWorld.tsx
create test/index.test.ts
create test/__mocks__/mockExportString.js
create test/plugin/buildQuery.test.ts
create test/plugin/transformProps.test.ts
create types/external.d.ts
create src/images/thumbnail.png

To build the viz plugin, run the following commands:

npm i --force
npm run build

Alternatively, to run the viz plugin in development mode (=rebuilding whenever changesare made), start the dev server with the following command:

npm run dev

To add the package to Superset, go to the superset-frontend subdirectory in yourSuperset source folder run

npm i -S /tmp/superset-plugin-chart-hello-world

If you publish your package to npm, you can naturally install directly from there, too.After this edit the superset-frontend/src/visualizations/presets/MainPreset.jsand make the following changes:

import { SupersetPluginChartHelloWorld } from 'superset-plugin-chart-hello-world';

to import the viz plugin and later add the following to the array that's passed to theplugins property:

new SupersetPluginChartHelloWorld().configure({ key: 'ext-hello-world' }),

After that the viz plugin should show up when you run Superset, e.g. the developmentserver:

npm run dev-server


Python Testing

All python tests are carried out in toxa standardized testing framework.All python tests can be run with any of the tox environments, via,

tox -e <environment>

For example,

Alternatively, you can run all tests in a single file via,

tox -e <environment> -- tests/

or for a specific test via,

tox -e <environment> -- tests/

Note that the test environment uses a temporary directory for defining theSQLite databases which will be cleared each time before the group of testcommands are invoked.

There is also a utility script included in the Superset codebase to run python integration tests. The readme can befound here

To run all integration tests for example, run this script from the root directory:


You can run unit tests found in './tests/unit_tests' for example with pytest. It is a simple way to run an isolated test that doesn't need any database setup

pytest ./

Testing with local Presto connections

If you happen to change db engine spec for Presto/Trino, you can run a local Presto cluster with Docker:

docker run -p 15433:15433 starburstdata/presto:350-e.6

Then update SUPERSET__SQLALCHEMY_EXAMPLES_URI to point to local Presto cluster:

export SUPERSET__SQLALCHEMY_EXAMPLES_URI=presto://localhost:15433/memory/default

Frontend Testing

We use Jest and Enzyme to test TypeScript/JavaScript. Tests can be run with:

cd superset-frontend
npm run test

To run a single test file:

npm run test -- path/to/file.js

e2e Integration Testing

We use Cypress for end-to-end integrationtests. One easy option to get started quickly is to leverage tox torun the whole suite in an isolated environment.

tox -e cypress

Alternatively, you can go lower level and set things up in yourdevelopment environment by following these steps:

First set up a python/flask backend:

export SUPERSET_CONFIG=tests.integration_tests.superset_test_config
export CYPRESS_BASE_URL="http://localhost:8081"
superset db upgrade
superset load_test_users
superset init
superset load-examples --load-test-data
superset run --port 8081

In another terminal, prepare the frontend and run Cypress tests:

cd superset-frontend
npm run build-instrumented

cd cypress-base
npm install

# run tests via headless Chrome browser (requires Chrome 64+)
npm run cypress-run-chrome

# run tests from a specific file
npm run cypress-run-chrome -- --spec cypress/e2e/explore/link.test.ts

# run specific file with video capture
npm run cypress-run-chrome -- --spec cypress/e2e/dashboard/index.test.js --config video=true

# to open the cypress ui
npm run cypress-debug

# to point cypress to a url other than the default (http://localhost:8088) set the environment variable before running the script
# e.g., CYPRESS_BASE_URL="http://localhost:9000"
CYPRESS_BASE_URL=<your url> npm run cypress open

See superset-frontend/

As an alternative you can use docker compose environment for testing:

Make sure you have added below line to your /etc/hosts file: db

If you already have launched Docker environment please use the following command to assure a fresh database instance:docker compose down -v

Launch environment:

CYPRESS_CONFIG=true docker compose up

It will serve backend and frontend on port 8088.

Run Cypress tests:

cd cypress-base
npm install
npm run cypress open

Debugging Server App

Follow these instructions to debug the Flask app running inside a docker container.

First add the following to the ./docker-compose.yaml file

env_file: docker/.env
image: *superset-image
container_name: superset_app
command: ["/app/docker/", "app"]
restart: unless-stopped
+ cap_add:
- 8088:8088
+ - 5678:5678
user: "root"
depends_on: *superset-depends-on
volumes: *superset-volumes

Start Superset as usual

docker compose up

Install the required libraries and packages to the docker container

Enter the superset_app container

docker exec -it superset_app /bin/bash

Run the following commands inside the container

apt update
apt install -y gdb
apt install -y net-tools
pip install debugpy

Find the PID for the Flask process. Make sure to use the first PID. The Flask app will re-spawn a sub-process every time you change any of the python code. So it's important to use the first PID.

ps -ef

root 1 0 0 14:09 ? 00:00:00 bash /app/docker/ app
root 6 1 4 14:09 ? 00:00:04 /usr/local/bin/python /usr/bin/flask run -p 8088 --with-threads --reload --debugger --host=
root 10 6 7 14:09 ? 00:00:07 /usr/local/bin/python /usr/bin/flask run -p 8088 --with-threads --reload --debugger --host=

Inject debugpy into the running Flask process. In this case PID 6.

python3 -m debugpy --listen --pid 6

Verify that debugpy is listening on port 5678

netstat -tunap

Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address Foreign Address State PID/Program name
tcp 0 0* LISTEN 462/python
tcp 0 0* LISTEN 6/python

You are now ready to attach a debugger to the process. Using VSCode you can configure a launch configuration file .vscode/launch.json like so.

"version": "0.2.0",
"configurations": [
"name": "Attach to Superset App in Docker Container",
"type": "python",
"request": "attach",
"connect": {
"host": "",
"port": 5678
"pathMappings": [
"localRoot": "${workspaceFolder}",
"remoteRoot": "/app"

VSCode will not stop on breakpoints right away. We've attached to PID 6 however it does not yet know of any sub-processes. In order to "wakeup" the debugger you need to modify a python file. This will trigger Flask to reload the code and create a new sub-process. This new sub-process will be detected by VSCode and breakpoints will be activated.

Debugging Server App in Kubernetes Environment

To debug Flask running in POD inside kubernetes cluster. You'll need to make sure the pod runs as root and is granted the SYS_TRACE capability.These settings should not be used in production environments.

add: ["SYS_PTRACE"]

See (set capabilities for a container)[] for more details.

Once the pod is running as root and has the SYS_PTRACE capability it will be able to debug the Flask app.

You can follow the same instructions as in the docker-compose. Enter the pod and install the required library and packages; gdb, netstat and debugpy.

Often in a Kubernetes environment nodes are not addressable from outside the cluster. VSCode will thus be unable to remotely connect to port 5678 on a Kubernetes node. In order to do this you need to create a tunnel that port forwards 5678 to your local machine.

kubectl port-forward pod/superset-<some random id> 5678:5678

You can now launch your VSCode debugger with the same config as above. VSCode will connect to to which is forwarded by kubectl to your remote kubernetes POD.


Superset includes a Storybook to preview the layout/styling of various Superset components, and variations thereof. To open and view the Storybook:

cd superset-frontend
npm run storybook

When contributing new React components to Superset, please try to add a Story alongside the component's jsx/tsx file.

Contribute Translations

We use Flask-Babel to translate Superset.In Python files, we use the followingtranslation functionsfrom Flask-Babel:

  • gettext and lazy_gettext (usually aliased to _): for translating singularstrings.
  • ngettext: for translating strings that might become plural.
from flask_babel import lazy_gettext as _

then wrap the translatable strings with it, e.g. _('Translate me').During extraction, string literals passed to _ will be added to thegenerated .po file for each language for later translation.

At runtime, the _ function will return the translation of the givenstring for the current language, or the given string itselfif no translation is available.

In TypeScript/JavaScript, the technique is similar:we import t (simple translation), tn (translation containing a number).

import { t, tn } from "@superset-ui/translation";

Enabling language selection

Add the LANGUAGES variable to your Having more than oneoption inside will add a language selection dropdown to the UI on the right sideof the navigation bar.

'en': {'flag': 'us', 'name': 'English'},
'fr': {'flag': 'fr', 'name': 'French'},
'zh': {'flag': 'cn', 'name': 'Chinese'},

Creating a new language dictionary

First check if the language code for your target language already exists. Check if thetwo letter ISO 639-1 codefor your target language already exists in the superset/translations directory:

ls superset/translations | grep -E "^[a-z]{2}\/"

If your language already has a preexisting translation, skip to the next section

The following languages are already supported by Flask AppBuilder, and will make iteasier to translate the application to your target language:Flask AppBuilder i18n documentation

To create a dictionary for a new language, first make sure the necessary dependencies are installed:

pip install -r superset/translations/requirements.txt

Then run the following, where LANGUAGE_CODE is replaced with the language code for your targetlanguage:

pybabel init -i superset/translations/messages.pot -d superset/translations -l LANGUAGE_CODE

For instance, to add a translation for Finnish (language code fi), run the following:

pybabel init -i superset/translations/messages.pot -d superset/translations -l fi

Extracting new strings for translation

This step needs to be done every time application strings change. This happens fairlyfrequently, so if you want to ensure that your translation has good coverage, thisstep needs to be run fairly frequently and the updated strings merged to the upstreamcodebase via PRs. To update the template file superset/translations/messages.potwith current application strings, run the following command:

pybabel extract -F superset/translations/babel.cfg -o superset/translations/messages.pot -k _ -k __ -k t -k tn -k tct .

Do not forget to update this file with the appropriate license information.

Updating language files

Run the following command to update the language files with the new extracted strings.

 pybabel update -i superset/translations/messages.pot -d superset/translations --ignore-obsolete

You can then translate the strings gathered in files located undersuperset/translation, where there's one folder per language. You can use Poeditto translate the po file more conveniently.Here is a tutorial.

To perform the translation on MacOS, you can install poedit via Homebrew:

brew install poedit

After this, just start the poedit application and open the messages.po file. In thecase of the Finnish translation, this would be superset/translations/fi/LC_MESSAGES/messages.po.

Applying translations

To make the translations available on the frontend, we need to convert the PO file intoa JSON file. To do this, we need to globally install the npm package po2json.

npm install -g po2json

To convert all PO files to formatted JSON files you can use the script.


If you get errors running po2json, you might be running the Ubuntu package with the samename, rather than the Node.js package (they have a different format for the arguments). Ifthere is a conflict, you may need to update your PATH environment variable or fully qualifythe executable path (e.g. /usr/local/bin/po2json instead of po2json).If you get a lot of [null,***] in messages.json, just delete all the null,.For example, "year":["年"] is correct while "year":[null,"年"]is incorrect.

Finally, for the translations to take effect we need to compile translation catalogs intobinary MO files.

pybabel compile -d superset/translations



We use Pylint for linting which can be invoked via:

# for python
tox -e pylint

In terms of best practices please avoid blanket disabling of Pylint messages globally (via .pylintrc) or top-level within the file header, albeit there being a few exceptions. Disabling should occur inline as it prevents masking issues and provides context as to why said message is disabled.

Additionally, the Python code is auto-formatted using Black whichis configured as a pre-commit hook. There are also numerous editor integrations


cd superset-frontend
npm ci
# run eslint checks
npm run eslint -- .
# run tsc (typescript) checks
npm run type

If using the eslint extension with vscode, put the following in your workspace settings.json file:

"eslint.workingDirectories": [
Development How-tos | Superset (2024)


Who uses the Apache Superset? ›

Companies Currently Using Apache Superset
Company NameWebsiteSub Level Industry
Teslatesla.comBatteries, Power Storage Equipment & Generators
OpenTableopentable.comSoftware Manufacturers
Doordashdoordash.comFreight & Logistics Services
Coexyacoexya.euSoftware Development & Technical Consulting
2 more rows

Who wrote the Apache Superset? ›

Apache Superset
Original author(s)Maxime Beauchemin / Airbnb
Written inPython, TypeScript
Operating systemCross-platform
Typedata visualization, business intelligence
LicenseApache License 2.0
5 more rows

What is the Superset secret key? ›

Specifying a SECRET_KEY​

This key will be used for securely signing session cookies and encrypting sensitive information stored in Superset's application metadata database. Your deployment must use a complex, unique key.

How much does Superset cost? ›

Pricing. Superset is free to deploy to your Kubernetes cluster. Note: There is no usage fee for this product.

Is the Apache Superset better than Tableau? ›

In conclusion, while Tableau is a well-established player with robust features and support, Apache Superset is a strong open-source alternative that offers flexibility and scalability. The choice between Superset and Tableau will depend on specific organizational needs, technical expertise, and budget considerations.

Does anyone still use Apache? ›

Yes, and right out of the box. Most web hosting companies will default to Apache as the main web server software. Some may offer additional options, but due to the ease of use, popularity, and resources available, most WordPress sites stick with Apache.

Is the Apache Superset good? ›

Apache Superset is a popular business intelligence tool, in part, because of its data visualization and reporting capabilities. The following are some of the most noteworthy ones users can take advantage of: Provides dozens of pre-installed visualization options for users to represent data on their dashboards.

Is the Apache Superset completely free? ›

Apache Superset is free since it's open-source software.

What is the difference between superset and Grafana? ›

Comparing Superset and Grafana

While both Superset and Grafana are powerful visualization tools, Superset offers a more extensive range of visualizations and a semantic layer for defining custom dimensions and metrics. Grafana, on the other hand, is often favored for its time-series data monitoring capabilities.

Is Apache Superset secure? ›

Reporting Vulnerabilities

Apache Superset is highly sensitive and forthcoming to issues pertaining to its features and functionality.

What browsers are supported by superset? ›

You must install a headless browser, for taking screenshots of the charts and dashboards. Only Firefox and Chrome are currently supported.

How much memory is needed for Apache Superset? ›

Minimum Hardware Specifications
  • Memory (RAM): At least 8GB RAM is recommended for a moderately-sized instance of Apache Superset.
  • CPU: 2 virtual CPUs (vCPUs) should suffice for basic usage, but more may be required for development tasks such as compiling code or building images.

What is better than superset? ›

The best overall Apache Superset alternative is Tableau. Other similar apps like Apache Superset are Mediafly, Looker, Microsoft Power BI, and Sisense. Apache Superset alternatives can be found in Analytics Platforms but may also be in Sales Enablement Software or Embedded Business Intelligence Software.

Is superset worth it? ›

Because you ditch your usual rest between sets when you superset, the intensity of your workout is higher, causing greater muscle activation. This means increased muscle growth and strength, so if you're trying to bulk out those biceps or simply want to get stronger, supersets could help.

What is the average salary of superset? ›

The average Superset salary ranges from approximately ₹5,53,490 per year (estimate) for a Customer Success Lead to ₹30,70,634 per year (estimate) for a Product Manager. Superset employees rate the overall compensation and benefits package 4.1/5 stars.

How many companies use the Apache Superset? ›

We have data on 1,039 companies that use Apache Superset. The companies using Apache Superset are most often found in United States and in the Information Technology and Services industry. Apache Superset is most often used by companies with 50-200 employees and >1000M dollars in revenue.

How popular is the Apache Superset? ›

At the end of 2020, Superset was rank 176 among the top 200 most popular projects on Github (by stars). In 2021, the popularity of Superset catapulted the project to rank 132. The Superset Slack community more than doubled, from ~2600 members to ~5500 members!

Which companies use Apache? ›

Some high-profile companies using Apache include Cisco, IBM, Salesforce, General Electric, Adobe, VMware, Xerox, LinkedIn, Facebook, Hewlett-Packard, AT&T, Siemens, eBay, and many more (source).

Why do we use the Apache Superset? ›

Superset provides: A no-code interface for building charts quickly. A powerful, web-based SQL Editor for advanced querying. A lightweight semantic layer for quickly defining custom dimensions and metrics.


Top Articles
Latest Posts
Article information

Author: Domingo Moore

Last Updated:

Views: 6067

Rating: 4.2 / 5 (73 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Domingo Moore

Birthday: 1997-05-20

Address: 6485 Kohler Route, Antonioton, VT 77375-0299

Phone: +3213869077934

Job: Sales Analyst

Hobby: Kayaking, Roller skating, Cabaret, Rugby, Homebrewing, Creative writing, amateur radio

Introduction: My name is Domingo Moore, I am a attractive, gorgeous, funny, jolly, spotless, nice, fantastic person who loves writing and wants to share my knowledge and understanding with you.