Source code / framework for writing Dash tutorials?

Hi everyone,

I’d like to be able to produce documentation on the fly just like the Dash tutorials - I want to embed an “app” in the page, i.e. write the code, display the code, then display the output for live interaction in the HTML page, just like, say: Basic Callbacks | Dash for Python Documentation | Plotly (see screenshot below).

So question: How are the Dash tutorials written? Is there a framework I need?



Hi @ghc1001 and welcome to the Dash community :slight_smile:

The Dash documentation and tutorial is actually a Dash app. You can find it here

If you don’t need something quite so elaborate, you can include your code using dcc.Markdown()

Wow - that’s clever: You’re documenting Dash with Dash! Thank you for the reference to GitHub - plotly/dash-docs: The Official Dash Userguide & Documentation, AnnMarie

The dash-leaflet docs are also a dash app :slight_smile:

1 Like

In case two examples aren’t already enough, the dash-bootstrap-components docs are also a Dash app. There’s a description of how it works in the Show and Tell thread (there’s a bit more going on using Flask, Jinja templates, and Markdown files).

1 Like

It’s really cool. I’m new to Dash so thanks for the references, guys!

Btw, I came across the following quote in URL Routing and Multiple Apps | Dash for Python Documentation | Plotly, which is a kind of prep for the dash-docs:

“This Dash Userguide that you’re looking at is itself a multi-page Dash app, using these same principles.”

1 Like

Hi @ghc1001
I actually just created a video tutorial to help people get started with the markdown component in Dash. In case you’re interested, you can find it here:

And attached you will find a quick cheat sheet for getting started with markdown: