Streamlit-markdown: a streaming markdown component with LaTeX, Mermaid, Table, code support

Hey, everyone :hand_with_index_finger_and_thumb_crossed:

I created a new component as a drop-in replacement for st.markdown. It has the following extra advantages:

  • streaming rendering of markdown text
  • support for latex math, mermaid diagrams, and code highlighting
  • theme color

It is not easy to modify the native st.markdown to meet various demands. Therefore, I use react-markdown library and write a new component for streamlit. However, the hardest is to prevent re-rendering during streaming tokens into a custom component. Finally I did it, by hacking to enable streaming call on a custom component.

streamlit-markdown


:seedling: Installation:

pip install streamlit-markdown

:smiling_face_with_three_hearts: Usage:

static content:

from streamlit_markdown import st_markdown

markdown_text = "$ y = f(x)$"
st_markdown(markdown_text)

streaming content:

from streamlit_markdown import st_streaming_markdown

markdown_text = "$ y = f(x)$"
def token_stream():
    for token in markdown_text:
        yeild token
st_streaming_markdown(token_stream, key="token_stream") # key must be set to prevent re-rendering

Check it out and let me know what you build!

5 Likes

I’m not seeing any output in the demo app?

Great job with this library. I’m having a problem when it renders mermaid, though. The height of the window is too short, and the flowchart is cropped.

But when I kill the streamlit process, it expands to show the whole diagram!

Is there maybe a buffer that needs to be flushed? I’m just calling st_markdown.

Thanks!

1 Like

Hi, I am trying to use but now we have this error:

Hi! I have been integrating streamlit_mermaid into my app. So, I have been looking at the test app. However, I have encountered that test app for streamlit_mermaid shows following:


instead of markdown text. I have later encountered the same issue within my app if running it deployed. Locally everything was working fine.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.