Streamlit Code Editor

Common errors

• Editor content does not reflect changes to the initial code string on subsequent reruns.

  cause The `code_editor` component, when given a static `key`, defaults `allow_reset` to `False`, preventing programmatic updates to its displayed content from the input `code` argument.
  fix Pass `allow_reset=True` to the `code_editor` function: `code_editor(initial_code, key='my_editor', allow_reset=True)`.

• The first edit made to the code editor is not registered or reverts to the original value.

  cause This often occurs due to Streamlit's rerun model and how `st.session_state` is updated from widget outputs, similar to the 'double submit' problem in Streamlit's `st.data_editor`.
  fix Ensure `st.session_state` is correctly initialized for any variable managing the editor's content. When reacting to the editor's output, use `response_dict['id']` to confirm a *new* response before processing and updating state, preventing reprocessing of stale values.

• Buttons or callbacks intended to modify the editor's content do not work on the first click or behave inconsistently.

  cause Incorrect management of `st.session_state` when trying to programmatically change the `code_editor`'s value via a button click or callback.
  fix Ensure `st.session_state` variables are properly initialized and updated within callback functions or directly within the main script logic based on user interaction, then passed to the `code_editor` with `allow_reset=True`.

Warnings

• gotcha Editor content may not update when input code changes if `key` is static and `allow_reset` is `False`.
  Fix: To allow programmatic updates to the editor's content while keeping a consistent `key`, set `allow_reset=True` in the `code_editor` function call. `code_editor(initial_code, key='my_editor', allow_reset=True)`.
• gotcha The default `response_mode` only returns content on explicit user commands (e.g., Ctrl+Enter).
  Fix: If real-time updates (e.g., on text change, blur, or selection) are desired, explicitly set the `response_mode` argument, e.g., `response_mode="debounce"` or `response_mode=["blur", "select"]`.
• gotcha Streamlit's rerun model can lead to unexpected widget behavior or lost input if `st.session_state` is not handled correctly with interactive components.
  Fix: Always initialize `st.session_state` keys (e.g., `if 'key' not in st.session_state: st.session_state.key = initial_value`). When processing editor output, check `response_dict['id']` to ensure a new response has been sent before updating state or taking action.

Install

• pip install streamlit-code-editor Install with pip

Imports

• code_editor

  from code_editor import code_editor

Quickstart

This quickstart demonstrates how to embed a basic Python code editor in a Streamlit app. It uses `st.title` and `st.subheader` for layout and `code_editor` to render the interactive editor. The `key` argument is important for maintaining state across reruns, and the `response_dict` captures the editor's output, allowing submission handling.

import streamlit as st
from code_editor import code_editor

def main():
    st.set_page_config(layout="wide")
    st.title("My Streamlit Code Editor App")

    initial_code = """import pandas as pd

def greet(name):
    return f"Hello, {name}!"

print(greet("Streamlit"))
"""

    st.subheader("Edit your Python code:")
    response_dict = code_editor(initial_code, lang="python", key="my_editor")

    if response_dict and response_dict["type"] == "submit":
        st.write("You submitted the following code:")
        st.code(response_dict["text"], language="python")

if __name__ == "__main__":
    main()