How to Create Custom Plotly Dash Components Using JavaScript & React | Step-by-Step Tutorial 🚀

Dash Python
, ,
1

:wave: Hey Everyone,

Rolling out a few updates with some of the work I’ve been progressing towards a finishing point. Over a year I’ve released ~15 unique components.

  • Downloads Dash Swiper - A Swiper Component for Dash
  • Downloads Dash Summernote - A rich text WYSIWYG Editor for Dash
  • Downloads Dash Insta Stories - A Instagram Stories Component for Dash
  • Downloads Dash Image Gallery - A Image Gallery Component for Dash
  • Downloads Full-Calendar-Component - A Full Calendar Component for Dash
  • Downloads Dash Emoji Mart - A Slack-like Emoji Picker for Dash
  • Downloads Dash Dynamic Grid Layout - A Dynamic Grid Layout Component for Dash
  • Downloads Dash Discord - Discord integration for the Dash framework
  • Downloads Dash Pannellum - 360 Panorama Viewer for Images and Video for Dash
  • Downloads Dash Nivo - A Nivo Component for Dash
  • Downloads Dash Excalidraw - A Freeform Drawing and Notebook Component for Dash
  • Downloads Dash Charty - A Charting Library for Dash
  • Downloads Dash Credit Cards - A Credit Card Component for Dash

With this I wanted to share with those interested on some of the tips and tricks I wish I had when embarking on this journey, to hopefully help more developers create amazing packages for this Plotly community. So I created this video tutorial ~ 50min long to showcase how to build a component from scratch. While explaining the overall archeticture involved in the process.

showcase_notebook
showcase_notebook1920×1644 381 KB

With this I’m happy to announce a new component to the dash library pip install dash-excalidraw - Notebook, Freeform, Drawing type of component.

Features The Excalidraw editor (pip dash package) supports:

  • :100: Free & open-source.

  • :art: Infinite, canvas-based whiteboard.

  • :writing_hand: Hand-drawn like style.

  • :first_quarter_moon: Dark mode.

  • :building_construction: Customizable.

  • :camera: Image support.

  • :grinning: Shape libraries support.

  • :tongue: Localization (i18n) support.

  • :framed_picture: Export to PNG, SVG & clipboard.

  • :floppy_disk: Open format - export drawings as an .excalidraw json file.

  • :hammer_and_pick: Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser…

  • :arrow_right: Arrow-binding & labeled arrows.

  • :back: Undo / Redo.

  • :mag: Zoom and panning support.

  • :rocket: +Many more…

Find my documentation on this new dash component here or built it alongside the video tutorial:

Outside of this new component I’ve also created a new addition to the dash-swiper component library with the new carousel

Screenshot 2024-10-27 at 10.17.38 AM
Screenshot 2024-10-27 at 10.17.38 AM1646×536 179 KB

This new component can be used to create a nice carousel, with features like auto rotate, or navigation, number of slides pagination and so much more. Learn more about this new component here:

Lastly I’ve made some other overall improvements to the documentation, fixing some of the bugs I’ve found. Please reach out if you notice anything not working as intended.

Outside of the new components and documentation, I’ve been working on a full stack application that has had some substantial improvements to its UI moving from dmc 0.13 → 0.14.6 :star_struck:

  • Improved navigation
  • Added alerts for acctions
  • have base username / password authentication working (not fully released yet)
  • added a new message system to reach out directly with me
  • new Freeform page, based on the dash-excalidraw
  • improvements to the geoguesser game
    • much more :slight_smile:

With this I’m going to be focusing more time in development of my Dash and Dajgno application and spend less time building new components for Plotly and Dash while maintaining the list of current releases I’ve created. Hope you all enjoy the video I made and contribute to what is an amazing framework.

Follow me on Github and give some love and :star: your favorite repository I’ve built & like or subscribe to my Youtube channel to support my work.

Cheers & gl on your coding journey,
Pip

6 Likes
3

Thanks for the kind words. It would be a bit more difficult to make templates for Dash. You’d need to port over the whole ui library you want to use with the dash-component-boilerplate and any individual packages like the components I’ve built. Then you’d need to build the whole template in just dash.

also worth mentioning dash is going to change soon with new requirements for custom components so it might be worth waiting till that rolls out so that you don’t build you the template and need to re-build it to fit the newer dash versions. Changes are mainly with the props of components from my limited understanding.

1 Like