Streamlit Ace Editor Component

0.1.1 · maintenance · verified Fri Apr 17

streamlit-ace is a Streamlit component that embeds the Ace code editor, allowing users to interact with code snippets directly within their Streamlit applications. The library is currently at version 0.1.1, with its last commit in late 2021, indicating a slow release cadence and potential for compatibility considerations with recent Streamlit versions.

Common errors

```
ModuleNotFoundError: No module named 'streamlit_ace'
```
cause The `streamlit-ace` package has not been installed in the current Python environment.

fix Run `pip install streamlit-ace` in your terminal to install the required package.
```
NameError: name 'st_ace' is not defined
```
cause The `st_ace` function was not imported from the `streamlit_ace` package.

fix Add `from streamlit_ace import st_ace` at the top of your Streamlit script to import the function.
```
TypeError: st_ace() got an unexpected keyword argument 'lang'
```
cause An invalid or misspelled keyword argument was passed to `st_ace`. For specifying the programming language, the correct argument is `language`, not `lang`.

fix Refer to the `streamlit-ace` documentation or the quickstart example for the correct keyword arguments. In this case, change `lang='python'` to `language='python'`.

Warnings

gotcha The `streamlit-ace` library has not been updated since late 2021 (v0.1.1). While generally functional, it may exhibit styling inconsistencies or unexpected behavior with newer versions of Streamlit (e.g., Streamlit 1.x or 2.x) due to changes in Streamlit's frontend or component API.
Fix: Test thoroughly with your target Streamlit version. If styling issues occur, consider using custom CSS overrides. For critical compatibility issues, exploring alternative components or implementing a custom component might be necessary.
gotcha By default, `st_ace` does not automatically update its value back to Streamlit on every keystroke (`auto_update=False`). You need to explicitly trigger an update or rely on Streamlit's rerun mechanism to fetch the latest content.
Fix: Set `auto_update=True` in the `st_ace` call if you need immediate feedback (e.g., for real-time code analysis). Alternatively, ensure your Streamlit app has a button or other interactive element that triggers a rerun to fetch the editor's latest content after user edits.
gotcha The component's returned value is the content of the editor at the time of Streamlit's rerun. If the user modifies the editor in the browser, these changes are not immediately visible to the Python script until a new rerun occurs.
Fix: To get the latest content, ensure `auto_update=True` is set, which triggers a rerun on every change (can be resource-intensive for large documents). If `auto_update=False`, add a Streamlit button (e.g., `st.button('Get Code')`) that triggers a rerun and retrieves the editor's current content.

Install

pip install streamlit-ace Install with pip

Imports

st_ace
```
from streamlit_ace import st_ace
```

Quickstart

This example demonstrates how to embed the Ace editor in a Streamlit application, initialize it with content, and retrieve the user's edits. The `auto_update=True` parameter ensures that changes in the editor are immediately reflected in the Streamlit app.

import streamlit as st
from streamlit_ace import st_ace

st.set_page_config(layout="wide")
st.title("Streamlit Ace Editor Example")

initial_content = """import pandas as pd

def hello_world():
    print("Hello, Streamlit Ace!")

hello_world()
"""

content = st_ace(
    value=initial_content,
    language="python",
    theme="dracula",
    keybinding="vscode",
    height=200,
    font_size=14,
    tab_size=4,
    show_gutter=True,
    show_print_margin=True,
    wrap=False,
    auto_update=True, # Set to True to get immediate updates
    readonly=False,
    annotations=[{"row": 0, "column": 0, "text": "Welcome to Ace!", "type": "info"}]
)

st.subheader("Editor Content:")
st.code(content, language="python")

if st.button("Run Code (simulated)"):
    st.success("Code execution triggered with current content.")

view raw JSON →