Ploomber AI Editor | split-editor-app-2a28

App Description

I would like to have 2 main part on my app. The one above is splited in 2 parts (left and right) the left one is to upload a file and see the content on a editor below inside the left part. The right part is the same as the left part without the upload and the main part below is an editor of text. Then i would like a download button to download the content of the below editor

To upload files, please first save the app

Code Editor for app.py

import streamlit as st
from code_editor import code_editor

st.title("Split Editor App")

# Create two columns for the top section
col1, col2 = st.columns(2)

# Left column with file upload and editor
with col1:
    st.subheader("Left Panel")
    uploaded_file = st.file_uploader("Upload a file", type=['txt', 'py', 'json', 'csv'])
    
    # Editor for uploaded content
    if uploaded_file:
        content = uploaded_file.getvalue().decode()
    else:
        content = "# Upload a file to see its content here"
    
    editor1_response = code_editor(
        content,
        lang="python",
        height=300
    )

# Right column with editor
with col2:
    st.subheader("Right Panel")
    editor2_response = code_editor(
        "# Write your code here",
        lang="python",
        height=300
    )

# Main editor below
st.subheader("Main Editor")
main_editor_response = code_editor(
    "# Main editing area",
    lang="python",
    height=400
)

# Download button for main editor content
if st.download_button(
    label="Download Editor Content",
    data=main_editor_response['text'],
    file_name="editor_content.txt",
    mime="text/plain"
):
    st.success("File downloaded successfully!")

Loading code editor...

Click Save & Run to preview your app

Terminal

Hi! I can help you with any questions about Streamlit and Python. What would you like to know?

app.py