pip install streamlit-ace
import streamlit as st
from streamlit_ace import st_ace
# Spawn a new Ace editor
content = st_ace()
# Display editor's content as you type
content
Ace editor component for Streamlit.
Home Page: https://share.streamlit.io/okld/streamlit-gallery/main?p=ace-editor
License: MIT License
How is It possible to load an already existing file into the streamlit-ace editor?
I am sorry, if this is not the right place to put the request. I am new to GitHub.
Hi. With this component, I wish to make a voice-controlled code editor. So, each time a user presses a button, I want the value/code in the editor to be updated with the text in the user's voice.
But, I am not able to do this because of the way streamlit works. I face multiple 'key error' if I wrap the component with a function.
Else, the code in editor contains only the new text...
Can you please help me out with this?
It's not clear what does the apply button do
Can you add more examples like this and show them in main page and explain them.
code_editor = st_ace(language='python', theme="monokai", keybinding="emacs", height=400, value="your code here",font_size=14, tab_size=4, show_gutter=True, show_print_margin=True, wrap=True, auto_update=False, readonly=True)
Was just using an app on mobile that uses this editor and the problem on mobile is that I can't do CTRL + Enter to make changes, because that's not a keyboard option on mobile! Would be great to have another way to do this - a button option for example.
Is there any way to change the width and height of the ace editor widget?
Hey, streamlit_ace is great stuff.
I am having issues though making the "markers" option do anything. Am I correct to think that it takes a list of dicts looking like
{'startRow': 1, 'startCol': 0, 'endRow': 302, 'endCol': 0, 'className': 'red', 'type': 'text'}
And "red" needs to be defined as CSS class via st.markdown()
?
If not, how does it work?
Thanks
Hi there,
I tried using streamlit-ace as the editor for SQL in my streamlit app and it works great for me.
But compared to input like st.text_area
, I find the streamlit-ace editor will automatically submit the query in the editor every time I change the query, for example, when I enter a query like SELECT * FROM my_table
, the streamlit will be re-run every time when I type a character in the editor, which cause some unnecessary failed requests because the query is partial. I've no idea if this is caused by the streamlit component API or the streamlit-ace editor itself. Is there any way I can change this behavior to something like st.text_area
so that I can manually apply the query using Command + Enter
(I am using macOS) when the query is fully typed into the editor? Thanks.
I found that when the yaml file is too long, it is good to have a scroll bar there. Thank you again for your great streamlit component.
Hi, is there any way to get the value of the streamlit widget as an input to the code inside the Ace editor and execute the code (entered by the user) and print out the result of executed code?
Example:
# Get user input
user_input = st.slider(
'Input:',
0.0, 100.0
)
# Spawn a new Ace editor
content = st_ace()
# Printout the result
output = exec(content)
st.text(content)
I tried using the exec()
function but as it only returns a None
I cannot print out the results. I also tried the eval()
but it gives me an error.
Thanks you!
If I install streamlit-ace
with streamlit-nightly
already installed, it'll install streamlit
which causes issues with the nightly version:
$ pip list | grep streamlit
streamlit-nightly 0.70.1.dev20201101
$ pip install streamlit-ace
$ pip list | grep streamlit
streamlit 0.71.0
streamlit-ace 0.0.4
streamlit-nightly 0.70.1.dev20201101
Hi,
Thanks for providing this awesome widgets!!
I have read the issue #25 and #28.
My idea is to apply the streamlit-ace
to display the log file, and the log file will keep changing (i.e., It will keep adding some information into the log file.)
Here is my current code which was referred from #25.
with open('/var/log/out.log') as f:
lines = f.read()
content = st_ace(value=lines)
Is it possible to keep displaying the log file information this goal?
Thank you!!
BR,
Chieh
The editor component only shows up when the iOS device is set to "Request Desktop Website".
Even manually spoofing the user agent does not work.
Any iOS/iPadOS device (even DevTools) will not show the editor at all.
The submit button should be toggleable so that we can remove it and have st.button submit button. It should behave like the default streamlit textbox and on an external submit it should fetch the text value.
Normal streamlit behaviour:
text = st.text_input('my input')
submit = st.button('submit')
if submit:
st.write(text)
with streamlit-ace
val = st_ace('input json', height=350,
language='json', theme='twilight', wrap=True, auto_update=False)
if val:
st.write(val) # this will always write on startup since we have given a default value.
the demo link is broken: https://share.streamlit.io/okld/streamlit-gallery/main?p=ace-editor
ideally there would be more documentation on the readme page for quick configuration reference
Hi,
I am relatively new to Streamlit. I was wondering if it was possible to automatically print the output of the code defined in the value parameter.
content = st_ace(
value = """a = 2 \n b = 3 \n c = a + b \n print(c)""",
placeholder=" a = 2",
language='python',
theme='dracula',
show_print_margin=True,
auto_update=True
)
# Display editor's content as you type
content
I would want to print the output of c to the Streamlit app. Is there a specific way I should be defining this?
Any input would be gretaly appreciated.
Thank you for your time,
Henry
Hi.
I want to populate the ACE editor with the content from a file before editing. This works, but I want the user to be able to pick another files' content on the fly and then the ACE editors value should be changed. But this does not seem to work...
Am I missing something here?
Would you have any idea how this could be achieved?
Cheers,
C
I am having the same issue as described here: https://stackoverflow.com/questions/8021821/arrow-keys-and-delete-work-in-ace-editor-but-typing-text-doesnt-work
I cannot type code into the editor even when it's set to editable. Only arrow keys and delete work.
You can see the bug in action on the 'Ice' page here: https://share.streamlit.io/spiruel/satschool/main/app.py
Is there a way to overcome this in streamlit?
Thanks
Is there any way to set the default text? I could use the placeholder but I want to build a feature where the user can edit the placeholder text. With the functionality right now, as soon as the user types in the text box, the placeholder text disappears.
Currently, these:
// Set default prop values that shouldn't be exposed to python
args.enableBasicAutocompletion = true
args.enableLiveAutocompletion = true
are deliberately not exposed to the Python side.
For some languages (e.g., Markdown) being able to turn auto completion off would be great, though.
I have a strange problem that occurs randomly.
I have deployed a streamlit app that uses streamlit_ace editor. When I visit the web page, I get the following error
sometimes and other times it works fine!
Your app is having trouble loading the streamlit_ace.ace component.
(The app is attempting to load the component from **, and hasn't received its "streamlit:componentReady"** message.)
If this is a development build, have you started the dev server?
If this is a release build, have you compiled the frontend?
I have it deployed here and here
It works consistently when run from my laptop with the exact same dependency and versions installed.
here's the output when the app is run locally.
I don't think this is an issue with streamlit-ace, however, I am hoping someone here might recognise the issue and guide me.
If it helps, the source is hosted here
I am wondering how I could reset state of the editor. I found that I could set initial text with value
key but updating it later does not seem to change anything. Here is my attempt
import streamlit as st
from streamlit_ace import st_ace
LANGUAGE = "yaml"
THEME = "twilight"
if 'manifest' not in st.session_state:
st.session_state.manifest = ""
reset = st.button("Reset!")
if reset:
st.session_state.manifest = ""
print(st.session_state.manifest == "")
content = st_ace(
value=st.session_state.manifest,
placeholder="# Paste your manifest here",
language=LANGUAGE,
theme=THEME,
font_size=14,
tab_size=4,
min_lines=45,
auto_update=True,
key="ace",
)
if content:
st.session_state.manifest = content
st.subheader("Content")
st.code(content, language=LANGUAGE)
One of my use cases involves a desire to have the ace editor automatically resize. The Ace Editor React Component appears to have this capability built in but requires setting the "max_lines" property to javascript Infinite. If we could assign the max_lines property infinity with either float('inf') or the string "Infinity" this would enable the auto resize functionality.
Alternatively, the default could be sent to Infinite so that the editor resizes by default but becomes fixed when the max_lines property is manually assigned.
This is slightly related to #25.
I want to use the editor to edit a selected file on the filesystem - read at the beginning and write on any change.
With st.text_area
I'am able to achieve this by using the on_change
callback together with custom key
.
But st_ace
doesn't support on_change
callback and yet it's not able to read content of the key
which I provide.
st.session_state["content"] = "This is some content"
st_ace(key="content")
The editor's content remains empty and yet the st.session_state["content"]
is not updated on change. However, if I remove the prepared session state and only use the second line, the st.session_state["content"]
is updated properly on each change.
Here is my working example with st.text_area
:
import streamlit as st
import os
def on_change_callback():
with open("file.txt", "w") as f:
f.write(st.session_state["content"])
if not os.path.exists("file.txt"):
open("file.txt", "w").close()
with open("file.txt", "r") as f:
st.session_state["content"] = f.read()
st.text_area("file.txt", key="content", on_change=on_change_callback)
This allows me to edit the file.txt
, update it multiple times and always have the correct content on the filesystem (and thus read the file again in another components).
Thanks for any help!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.