{"id":9341,"library":"streamlit-code-editor","title":"Streamlit Code Editor","description":"Streamlit Code Editor is an active, community-driven component that integrates a React-Ace based code editor into Streamlit applications. It currently stands at version 0.1.22, offering features like custom themes, syntax highlighting for various languages, and customizable interface elements. The library maintains an active release cadence, with updates addressing performance, bug fixes, and new features.","status":"active","version":"0.1.22","language":"en","source_language":"en","source_url":"https://github.com/bouzidanas/streamlit-code-editor","tags":["streamlit","code editor","react-ace","component","UI","developer tools"],"install":[{"cmd":"pip install streamlit-code-editor","lang":"bash","label":"Install with pip"}],"dependencies":[{"reason":"This is a custom component for Streamlit and requires Streamlit to function.","package":"streamlit","optional":false}],"imports":[{"symbol":"code_editor","correct":"from code_editor import code_editor"}],"quickstart":{"code":"import streamlit as st\nfrom code_editor import code_editor\n\ndef main():\n    st.set_page_config(layout=\"wide\")\n    st.title(\"My Streamlit Code Editor App\")\n\n    initial_code = \"\"\"import pandas as pd\n\ndef greet(name):\n    return f\"Hello, {name}!\"\n\nprint(greet(\"Streamlit\"))\n\"\"\"\n\n    st.subheader(\"Edit your Python code:\")\n    response_dict = code_editor(initial_code, lang=\"python\", key=\"my_editor\")\n\n    if response_dict and response_dict[\"type\"] == \"submit\":\n        st.write(\"You submitted the following code:\")\n        st.code(response_dict[\"text\"], language=\"python\")\n\nif __name__ == \"__main__\":\n    main()","lang":"python","description":"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."},"warnings":[{"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)`.","message":"Editor content may not update when input code changes if `key` is static and `allow_reset` is `False`.","severity":"gotcha","affected_versions":"All versions"},{"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\"]`.","message":"The default `response_mode` only returns content on explicit user commands (e.g., Ctrl+Enter).","severity":"gotcha","affected_versions":"v0.1.4+"},{"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.","message":"Streamlit's rerun model can lead to unexpected widget behavior or lost input if `st.session_state` is not handled correctly with interactive components.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"fix":"Pass `allow_reset=True` to the `code_editor` function: `code_editor(initial_code, key='my_editor', allow_reset=True)`.","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.","error":"Editor content does not reflect changes to the initial code string on subsequent reruns."},{"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.","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`.","error":"The first edit made to the code editor is not registered or reverts to the original value."},{"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`.","cause":"Incorrect management of `st.session_state` when trying to programmatically change the `code_editor`'s value via a button click or callback.","error":"Buttons or callbacks intended to modify the editor's content do not work on the first click or behave inconsistently."}]}