sistine 0.1.2

React-like framework for Python - return HTML/CSS/JS like React, route like Next.js

Sistine

React-like UI framework for Python, powered by Streamlit. Build incredibly flexible, custom-designed UIs with HTML/Tailwind, while leveraging Streamlit's native widgets and data caching.

Why Sistine?

Streamlit is fantastic for data apps, but often developers complain:

• Hard to customize CSS/Layouts or use Tailwind.
• Complex nested UIs are difficult to build.
• UI elements lack flexibility.

Sistine fixes this! You can write full custom HTML, inject Tailwind CSS, and separate your concerns using a React-like component approach, all while letting Streamlit handle the backend server, caching, and state management.

Installation

pip install sistine

Features

• React-like Syntax (Chaining): Write clean components el.div(cls="...")(children).
• Tailwind CSS Built-in: One command app.use_tailwind() to enable utility classes.
• Native Streamlit Interoperability: Mix st.write() or Streamlit buttons alongside Sistine components!
• Auto-caching: Use @query to fetch API/Database, and it automatically hooks into st.cache_data.
• MVC Modularity: Fully supports splitting code into Models, Views, and Controllers.

Quick Start

from sistine import streamlit as st, Sistine, el

app = Sistine(title="My App")
app.use_tailwind()

# 1. Modular React-like Component using Chaining Syntax
def Card(title: str, description: str):
    return el.div(cls="bg-white p-6 rounded-xl shadow-md")(
        el.h2(cls="text-2xl font-bold text-gray-800")(title),
        el.p(cls="text-gray-600 mt-2")(description)
    )

# 2. Define Routes Easily
@app.sistine("/")
def home():
    # You can still use Streamlit native features!
    st.toast("Welcome to Sistine!")
    
    return str(
        el.div(cls="min-h-screen bg-gray-50 p-10 flex flex-col items-center justify-center")(
            el.h1(cls="text-4xl font-extrabold text-blue-600 mb-8")("Hello Sistine!"),
            Card("Awesome Framework", "Return HTML/Tailwind seamlessly inside Streamlit.")
        )
    )

if __name__ == "__main__":
    app.run(port=8080)

Run your app normally:

python app.py

The Power of @query

Say goodbye to slow apps! Use @query for any API calls or expensive database queries. Sistine automatically caches it using st.cache_data in the background.

from sistine import query
import requests

@query
def fetch_users():
    # Only hits the network once, subsequent calls are instantly cached!
    res = requests.get("https://jsonplaceholder.typicode.com/users")
    return res.json()

Streamlit State & Widgets

Sistine runs inside Streamlit. You can use st.session_state to make your Sistine UI reactive!

from sistine import streamlit as st, Sistine, el

app = Sistine()

if "count" not in st.session_state:
    st.session_state.count = 0

@app.sistine("/")
def counter():
    # Native Streamlit Widget
    if st.button("Add +1"):
        st.session_state.count += 1
        
    # Sistine UI that reacts to Streamlit state!
    return str(
        el.h1(cls="text-3xl")(f"Count is: {st.session_state.count}")
    )

Examples

Check out the examples/ directory for complete applications:

• tailwind_app.py - Basic Tailwind setup.
• routing_app.py - Multi-page routing with URL parameters (/user/{id}).
• dashboard_app.py - Complex UI layout (sidebar, grid cards).
• pokeapi_app.py - Working API integration showcasing @query.
• state_app.py - Interactivity using Streamlit's session_state.
• mvc_app/ - Example of organizing a massive Sistine app using MVC pattern.