Streamlit UI Designer — Build Streamlit Apps Visually, No Code Required
I built a Streamlit app that lets you design Streamlit UIs visually and generates clean Python code from your design. Think of it as a WYSIWYG editor for Streamlit.
[Live App](https://streamltuidesigner.streamlit.app/)
What is it?
Streamlit UI Designer is a visual tool built entirely in Streamlit that lets you compose a UI by picking widgets from a palette, arranging them on a canvas, configuring their properties — and then exporting production-ready Streamlit Python code.
No more writing boilerplate. Design first, code later.
Features
- 70+ widgets supported — text elements, inputs, charts, data displays, media, layouts, and more
- Drag-free layout — add widgets from a categorized palette, reorder with
/
buttons - Container support — nest widgets inside `st.columns`, `st.container`, `st.expander`, `st.tabs`, `st.sidebar`, `st.form`, `st.popover`, and more
- Live preview — see your design rendered in real-time as you build
- Properties panel — configure every widget property (labels, options, defaults, styling)
- Code generation — get clean, copy-paste-ready Python code with proper indentation and `import streamlit as st`
- Code import — paste existing Streamlit code and import it back into the designer
- Collapsible panels — maximize your workspace by collapsing the hierarchy or properties panes
Quick Tutorial
Step 1: Pick a widget from the palette
The left sidebar shows all available Streamlit widgets organized by category (Text, Input, Charts, Layouts, Media, etc.). Click any widget to add it to your design.
Step 2: Arrange your layout
Use the Hierarchy panel (left side of the Design tab) to see your widget tree. Use / buttons to reorder widgets. Want columns? Add a `st.columns` container first, then add widgets inside specific columns.
Step 3: Configure properties
Select any widget in the hierarchy tree. The **Properties** panel (right side) shows all configurable properties for that widget — labels, placeholder text, options, min/max values, colors, icons, and more. Changes appear instantly in the preview.
Step 4: Use containers for complex layouts
Select a container (Columns, Expander, Tabs, Sidebar, etc.) from the Layouts category. The Container pane controls where new widgets are placed. Nest widgets freely — the designer handles the hierarchy.
Step 5: Generate & export code
Switch to the Generated Code tab to see your complete Streamlit app as Python code. Copy it or download the `.py` file directly. The generated code is clean, deterministic, and ready to run:
```python
import streamlit as st
st.title(“My App”)
col1, col2 = st.columns(2)
with col1:
st.text_input(“Name”, placeholder=“Enter your name”)
with col2:
st.number_input(“Age”, min_value=0, max_value=120)
st.button(“Submit”, type=“primary”)
```
Step 6 (Bonus): Import existing code
Already have a Streamlit app? Paste the code in the Generated Code tab’s import section, and the designer will parse it back into an editable design.
Tech Stack
- Pure Streamlit (it’s a Streamlit app that builds Streamlit apps!
) - `streamlit-tree-select` for the hierarchy widget
- Modular architecture — easy to extend with new widgets
- Registry-based widget system with per-widget codegen
Use Cases
- Prototyping — quickly mock up a Streamlit dashboard layout before writing logic
- Learning — see how different widgets look and what parameters they accept
- Code generation — save time on boilerplate UI code
- Team collaboration — design the interface visually, then hand off the generated code
Feedback Welcome!
This is an ongoing project. I’d love to hear:
- Which widgets or features would you like to see added?
- Any bugs or UX improvements you notice?
- Would drag-and-drop reordering be useful?
Drop a comment below. Thanks for checking it out! 
Built with 
using Streamlit