Metadata-Version: 2.4
Name: sistine
Version: 0.1.0
Summary: React-like framework for Python - return HTML/CSS/JS like React, route like Next.js
Author: ararya
License-Expression: MIT
Project-URL: Homepage, https://github.com/ararya/sistine
Project-URL: Repository, https://github.com/ararya/sistine
Keywords: react,html,css,js,web,ui,framework,streamlit
Classifier: Development Status :: 3 - Alpha
Classifier: Intended Audience :: Developers
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.10
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Classifier: Topic :: Software Development :: Libraries :: Python Modules
Classifier: Topic :: Software Development :: User Interfaces
Classifier: Topic :: Internet :: WWW/HTTP :: Dynamic Content
Requires-Python: >=3.10
Description-Content-Type: text/markdown
Requires-Dist: starlette>=0.40.0
Requires-Dist: uvicorn>=0.30.0
Requires-Dist: streamlit>=1.28.0

# Sistine

<img width="1620" height="1620" alt="sistine-fibel" src="https://github.com/user-attachments/assets/84af899f-9fc2-418f-af78-f9408bc33d03" />

> 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

```bash
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

```python
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:
```bash
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.

```python
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!

```python
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/`](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.
