# Dash-down: Rendering markdown files into Dash components

**URL:** <https://community.plotly.com/t/dash-down-rendering-markdown-files-into-dash-components/63345>\
**Category:** Dash Python\
**Tags:** show-and-tell, community-components\
**Created:** [April 24, 2022, 10:31am UTC](https://community.plotly.com/t/dash-down-rendering-markdown-files-into-dash-components/63345 "2022-04-24T10:31:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [April 24, 2022, 10:31am UTC](https://community.plotly.com/t/dash-down-rendering-markdown-files-into-dash-components/63345/1 "2022-04-24T10:31:43Z")

</div>

While writing the new `dash-extensions` documentation page, I wanted to be able to mix text (markdown) with interactive examples (i.e. running Dash code). To fulfill this need, I have setup a tool chain that _parses markdown text into Dash component trees_. In addition to standard markdown syntax, a custom interpretation of the [directive syntax extension](https://mistune.readthedocs.io/en/latest/directives.html) makes it possible to embed Dash code blocks and/or applications (including callbacks). The resulting package has been dubbed `dash-down` inspired by @AnnMarieW😉

To give a taste of how it works, the following markdown file,

```auto
## Lottie

The `Lottie` component makes it possible to run [Lottie animations](https://lottiefiles.com/) in Dash. Here is a small example,

.. dash-proxy:: components.lottie

.. api-doc:: dash_extensions.Lottie

```

is rendered into [this page](https://www.dash-extensions.com/components/lottie) (as you might have guessed, the Python code resides in the `components/lottie.py`),

 ![Screenshot 2022-04-24 at 12.27.49](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/e/cedca1b18bc8e06aaca3e9d5fd94a8c60e758e19.png)

If you are interested, you can learn more on the [GitHub page](https://github.com/emilhe/dash-down) 🙂

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [April 25, 2022, 2:14pm UTC](https://community.plotly.com/t/dash-down-rendering-markdown-files-into-dash-components/63345/3 "2022-04-25T14:14:11Z")

</div>

Cool component, @Emil. Just added it to the [community components index](https://community.plotly.com/t/community-components-index/60098).

Thanks for making it 🙌