Skip to content
JavaScript Python CSS Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Dash Responsive Grid Layout

This repository contains the minimal set of code required to create your own custom Dash component.

  1. Install the dependencies:
npm install
  1. Open up the JavaScript demo environment:
npm run start
  1. Write your component code in src/lib/components. There is a sample component called ExampleComponent.react.js that you can use for inspiration. The demo app is in src/demo and you will import your example component code into your demo app.

  2. Test your code in a Python environment:

    1. Build your code
    npm run build:js-dev
    npm run build:py
    1. Run and modify the sample dash app:
  3. Create a production build and publish:

    1. Build your code:
    npm run build:js
    npm run build:py
    1. Create a Python tarball
    python sdist

    This distribution tarball will get generated in the dist/ folder

    1. Test your tarball by copying it into a new environment and installing it locally:
    pip install dash_responsive_grid_layout-0.0.1.tar.gz
    1. If it works, then you can publish the component to NPM and PyPI:
    npm publish
    twine upload dist/dash_responsive_grid_layout-0.0.1.tar.gz

More details

  • Include CSS files in your distribution folder (dash_responsive_grid_layout) and reference them in
  • The tests folder contains a sample integration test. This will run a sample Dash app in a browser. Run this with:
    python -m tests.test_render
    The Dash team uses these types of integration tests extensively. Browse the Dash component code on GitHub for more examples of testing (e.g.
  • Publishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash servers the component library's CSS and JS from the remote unpkg CDN, so if you haven't published the component package to NPM you'll need to set the serve_locally flags to True. We will eventually make serve_locally=True the default, follow our progress in this issue.
  • Watch the component boilerplate repository to stay informed of changes to our components.

More Resources

You can’t perform that action at this time.