Using Visual Studio Code editor as component

🧩 Custom Components
,
1

I wrapped the Monaco editor (the one from Visual Studio Code) in a Streamlit component.

demo

Source: GitHub - marcusschiesser/streamlit-monaco: Monaco editor (Visual Studio Code) for Streamlit
Demo: https://vs-code.streamlit.app/
PyPi: streamlit-monaco · PyPI

Example:

from streamlit_monaco import st_monaco
import streamlit as st

st.title("Streamlit Markdown Editor")

content = st_monaco(value="# Hello world", height="600px", language="markdown")

if st.button("Show editor's content"):
    st.write(content)

Does anyone know how I can add it to https://streamlit.io/components?

5 Likes
2

That is so good!!

The components page gets populated automatically by looking in github, pypi and on the community tracker (Streamlit Components - Community Tracker) – I would recommend posting it on the community tracker, and then you can expect it to be added to the components page automatically when the next update happens.

3

Thanks @blackary , couldn’t edit the wiki post, so I left a new reply: Streamlit Components - Community Tracker - #31 by Marcus_Schiesser - I hope it works!

4

Brilliant component. I’d like to use this but curious about the syntax and if the following is possible:

  1. How would I inject text into the component with a streamlit button? Would I update a session_state variable and do a st.rerun populating the session_state into the value?
  2. Is there a way to configure the monaco box via the streamlit parameters (i.e. add/remove line numbers, add menu items to the monaco component? etc…)
5

Thanks Joseph. I hope the following helps:

  1. Here’s a complicated example. The state is stored in a dataclass, which is stored again in the session_state: https://github.com/marcusschiesser/sfguide-frosty-llm-chatbot-on-streamlit-snowflake/blob/feat/improve-ux/src/editor.py
  2. Yes, I already passed a couple of parameters, see https://github.com/marcusschiesser/streamlit-monaco/blob/main/streamlit_monaco/__init__.py#L8-L12 - These are the ones I needed, happy to merge your PR with more parameters :slight_smile:
6

@Marcus_Schiesser thank you very much for this, I love the interactivity.

the only feature that I would suggest is to add an optional debounce in ms, so that if I am still typing, the content is not returned.

7

Yes that would be great. Anyone want to send a PR?

8

Thanks for this component. It would really be great to add an optional debounce in ms…

Thanks.

9

I love this component, but one issue I’m having with the built-in streamlit theme is that the text is pretty hard to read in dark mode. Any suggestions for still being able to switch from dark to light, but with the text a bit more readable?