Hi Team! I’m working on a Streamlit app where I want to provide users with an editable code block box, similar to the existing Streamlit text box component, but with Python syntax highlighting. This would allow users to input and edit Python code within the app. I’ve looked at the Streamlit docume…

At least these are known to me, maybe there are even more. [image] Ace Editor 🧩 Custom Components Hello wave Here’s a new component showcase, featuring Ace editor , and more specifically its react wrapper . The instruction to install and test it can be found in my reposit…

Maybe also related: [image] Including a live terminal in the web app 🦄 Random Hello everyone, My goal was to have the Streamlit web app run a Python file after pressing a button and to display its live terminal in the web app itself while the execution is happening. I am…

I would recommend streamlit-code-editor if the look you are going for is like st.code but editable (so not exactly like st.text_area ). By default, the code editor will return a response when the user presses Ctrl+Enter just like st.text_area. Here is the current repo where you will find installatio…

This is great. I went with ‘code editor’. Thanks y’all!

Oh also, quick tip if you just started exploring using the code editor. You will get a nicer experience if you set allow_reset=True and give it a fixed key (like say key="my_editor"). This will prevent the editor from being recreated everytime your script re-runs and also allowing you to change/upda…

I think a cleaner way to avoid performing an action twice (or more) if the id has not changed is to encapsule the logic to perform in a handle_action function and cache it using the id value of the dict returned by code_editor. @bouzidanas , what do you think about it? A minimalistic example of w…

Hi @arielcv96 Nice! That does look cleaner than creating a session variable and adding an if statement to check whether or not id changed. I will play around with that when I get some time hopefully soon. I definitely think its a good idea to provide some more practical examples to the docs and y…

How to Add a Streamlit Editable Code Editor with Python Syntax Highlighting?

Custom Components

edsaac October 31, 2023, 7:24pm 3

Maybe also related:

Topic		Replies	Views
Make the st.code ediatble Using Streamlit discussion	1	460	November 25, 2024
New Component: streamlit-code-editor, a react-ace code editor customized to fit with streamlit with some extra goodies added on top Custom Components	31	13462	May 19, 2025
Ace Editor Custom Components	12	13105	July 19, 2024
Using Visual Studio Code editor as component Custom Components html , data_editor	8	3645	January 8, 2024
Long-time shiny user - is something like the following possible in streamlit? Custom Components	3	1597	July 11, 2022

How to Add a Streamlit Editable Code Editor with Python Syntax Highlighting?

Related topics