Dash Webb Compare

See the app live at https://jwt.pythonanywhere.com

You can make an app like this in ~40 lines of code!

There are 4 versions of the same app to demonstrate different features of Plotly Dash and Dash community components libraries.

Dash app with dash-boostrap-components

Dash app with dash-mantine-components

Run one of the 4 apps:

app.py is a minimal app made with dash-mantine-componets ~40 lines of code!
app_dbc.py is made with dash-bootstrap-components with the images hosted remotely rather than locally in the assets folder. No need to clone this repo - simply copy, paste and run this app.
app_pages.py multi-page app using the new pages feature
app_pages_no_assets multi-page app using pages with the images hosted remotely rather than in the assets folder.

The before and after image slider is from the dash-extensions library

Multi-page apps

There are two apps made with the new pages feature available in dash>=2.5.1. Since the layout is so simple neither one uses the pages folder, which is typical with multi-page apps. The advantage of using the pages feature even with this simple app, is that it automatically creates the meta tags for displaying nicely formatted cards when the link is shared. It also automatically updates the title for each page. For more information on multi-page dash apps, see the Plotly Dash docs

Credits

This app was deployed to Heroku using dash-tools DashTools is an open-source command line toolchain for Plotly Dash that makes creating and deploying dash projects to Heroku intuitive and easy. Thanks @andrew-hossack for providing such an awesome tool. It truly makes deploying a Dash app a piece of cake. 🍰

Note: After November 28, 2022, the Heroku webb-compare site will not work since the Heroku free tier is ending. Please see it live at https://jwt.pythonanywhere.com