Live/Button Press Markdown Preview

Hey All!

Sorry if this is a duplicate question!

I am trying to create the following feature

  • A text_input with some default markdown text inside it.
  • The default markdown should be previewed
  • The user should be able to enter some markdown text in the text_input and upon clicking a button, a spinner should load and the markdown should be previewed
  • A checkbox to restore the text_input to default text and preview to default

Below is my current code

def introduction():

   # Title
   default_title = '''# Hello, folks!'''
   title_input = st.text_area(label="", value =default_title)
   preview_title = st.button('Preview')
   if st.checkbox("Restore Default"):
       title_input = default_title
   if preview_title:
       with st.spinner("Generating Preview"):

It kind of works but upon pressing the button, the spinner doesn’t load and basically nothing happens for around 10 seconds. Although the markdown is previewed, I would like the spinner to be displayed and the whole process to be faster.

On a side note, I believe the app re-runs whenever the user inputs text into the text_input component. Is it possible to build a live Markdown preview feature?

Any help is appreciated, thanks!

Hi @rahulbanerjee26, welcome to the Streamlit community!

It seems like the streamlit-ace component might do what you’re looking for?


1 Like

Thanks for the suggestion! I will look into it.