Code Editor for app.py

import streamlit as st
from streamlit_ace import st_ace

st.title("JavaScript Code Editor")

# Initialize session state for code if not exists
if 'js_code' not in st.session_state:
    st.session_state.js_code = """// Write your JavaScript code here
function sayHello() {
    console.log("Hello, World!");
}"""

st.markdown("""
This is a simple JavaScript code editor. You can write and edit JavaScript code here.
The editor features:
- Syntax highlighting
- Auto-completion
- Line numbers
- Theme support
""")

# Code editor
code = st_ace(
    value=st.session_state.js_code,
    language="javascript",
    theme="monokai",
    keybinding="vscode",
    min_lines=20,
    max_lines=None,
    font_size=14,
    key="js_editor"
)

# Update session state
st.session_state.js_code = code

# Show the code
if code:
    st.subheader("Your JavaScript Code:")
    st.code(code, language="javascript")
    
    # Add some explanatory text
    st.markdown("""
    ### Features:
    1. **Syntax Highlighting**: JavaScript keywords and syntax are highlighted
    2. **Auto-completion**: Press Ctrl+Space for suggestions
    3. **Line Numbers**: Makes it easier to reference specific parts of code
    4. **VSCode Keybindings**: Familiar keyboard shortcuts
    
    ### Tips:
    - Use the editor just like you would use VSCode
    - The code is automatically saved in the session state
    - Copy your code using the copy button in the code display below
    """)