https://github.com/plotly/dash-component-boilerplate
Get started creating your own Dash components here.
https://github.com/plotly/dash-component-boilerplate
dash plotly-dash python
Last synced: about 9 hours ago
JSON representation
Get started creating your own Dash components here.
- Host: GitHub
- URL: https://github.com/plotly/dash-component-boilerplate
- Owner: plotly
- Created: 2018-08-01T22:39:43.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2026-05-14T17:44:04.000Z (about 2 months ago)
- Last Synced: 2026-05-14T19:29:44.306Z (about 2 months ago)
- Topics: dash, plotly-dash, python
- Language: Python
- Homepage:
- Size: 294 KB
- Stars: 293
- Watchers: 42
- Forks: 196
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Dash Component Boilerplate
This repository contains a [Cookiecutter](https://github.com/audreyr/cookiecutter) template to create your own Dash components.
- New to Dash? Check out the [official Dash Documentations](https://dash.plotly.com)
- If it's the first time creating a Dash component, start with our [React guide for Python developers](https://dash.plotly.com/react-for-python-developers)
- Need help with your component? Create a post on the [Dash Community Forum](https://community.plotly.com/c/dash)
## Usage
To use this boilerplate:
1. Install the requirements:
```
$ pip install cookiecutter
```
[Node.js/npm is also required.](https://nodejs.org/en/)
2. Run cookiecutter on the boilerplate repo:
```
$ cookiecutter gh:plotly/dash-component-boilerplate
```
3. Answer the questions about the project.
- `project_name`: This is the "human-readable" name of your project. For example, "Dash Core Components".
- `project_shortname`: is derived from the project name, it is the name of the "Python library" for your project. By default, this is generated from your `project_name` by lowercasing the name and replacing spaces & `-` with underscores. For example, for "Dash Core Components" this would be "dash_core_components".
- `component_name`: This is the name of the initial component that is generated. As a JavaScript class name it should be in PascalCase. defaults to the PascalCase version of `project_shortname`.
- `jl_prefix`: Optional prefix for Julia components. For example, `dash_core_components` uses "dcc" so the Python `dcc.Input` becomes `dccInput` in Julia, and `dash_table` uses "dash" to make `dashDataTable`.
- `r_prefix`: Optional prefix for R components. For example, `dash_core_components` uses "dcc" so the Python `dcc.Input` becomes `dccInput` in R, and `dash_table` uses "dash" to make `dashDataTable`.
- `author_name` and `author_email`: for package.json and DESCRIPTION (for R) metadata.
- `github_org`: If you plan to push this to GitHub, enter the organization or username that will own it (for URLs to the project homepage and bug report page)
- `description`: the project description, included in package.json.
- `license`: License type for the component library. Plotly recommends the MIT license, but you should read the generated LICENSE file carefully to make sure this is right for you.
- `publish_on_npm`: Set to false to only serve locally from the package data.
- `install_dependencies`: Set to false to only generate the project structure.
4. The project will be generated in a folder named with your `project_shortname`.
5. Follow the directions in the generated README to start developing your new Dash component.
Installing the dependencies can take a long time. They will be installed in a
folder named `venv`, created by virtualenv. This ensures that dash is installed
to generate the components in the `build:backends` script of the generated
`package.json`.
## Advanced customization
### Shared cache groups for async chunks
Shared async chunks for code that repeats across multiple async chunks is already supported through our custom `webpack.config.js` optimizations. You can leverage it by manually the path of `{{cookiecutter.project_shortname}}-shared.js` to `_js_dist` inside `{{cookiecutter.project_shortname}}/__init__.py` (as well as the associated external URL).
## More Resources
- Found a bug or have a feature request? [Create an issue](https://github.com/plotly/dash-component-boilerplate/issues/new)
- Watch the [component boilerplate repository](https://github.com/plotly/dash-component-boilerplate) to stay informed of changes to our components.
- To get a feel for what's involved in creating a component, read the [README.md generated by this cookiecutter](%7B%7Bcookiecutter.project_shortname%7D%7D/README.md)
- Want something more visual? Check out [this asciinema](https://asciinema.org/a/393389) of how to create a dash component from this boilerplate.
- Examples of Dash component libraries include:
- [`dash-core-components`](https://github.com/plotly/dash-core-components)
- [`dash-html-components`](https://github.com/plotly/dash-html-components)
- [`dash-cytoscape`](https://github.com/plotly/dash-cytoscape)
- [`dash-deck`](https://github.com/plotly/dash-deck)
- [Curated community-made components](https://plotly.com/dash-community-components/)