Live/Button Press Markdown Preview

Using Streamlit
1

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
   st.subheader("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
       title_input.text(default_title)
   if preview_title:
       with st.spinner("Generating Preview"):
           st.markdown(title_input,unsafe_allow_html=True)
   else:
      st.markdown(default_title,unsafe_allow_html=True)

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!

2

Hi @rahulbanerjee26, welcome to the Streamlit community!

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

Best,
Randy

1 Like
3

Thanks for the suggestion! I will look into it.