Reflex — Full-Stack Web Apps in Pure Python

What it is

Reflex is an open-source Python framework that lets you build full-stack web applications without writing any JavaScript. You define your UI with Python components, handle state with Python classes, and Reflex compiles everything to a React frontend with a FastAPI backend. The framework handles the full stack: routing, state management, database ORM, and deployment.

It targets Python developers who want to build interactive web apps without learning JavaScript, React, or managing separate frontend and backend codebases.

How it saves time or tokens

Reflex eliminates the context-switching between Python and JavaScript that slows down development. AI developers can build dashboards, admin panels, and user-facing apps for their ML models using the same language they use for data science and model training. The component-based architecture means you compose UIs from reusable Python functions, and hot reload shows changes instantly during development.

How to use

1. Install and create a project:

pip install reflex
reflex init
reflex run

1. Define a component:

import reflex as rx

def index():
    return rx.box(
        rx.heading('My AI App', size='lg'),
        rx.text('Built with Reflex'),
        rx.button('Click me', on_click=rx.window_alert('Hello'))
    )

app = rx.App()
app.add_page(index)

1. Add state management:

class State(rx.State):
    count: int = 0
    def increment(self):
        self.count += 1

def counter():
    return rx.box(
        rx.text(f'Count: {State.count}'),
        rx.button('Add', on_click=State.increment)
    )

Example

import reflex as rx
import openai

class ChatState(rx.State):
    messages: list[dict] = []
    input_text: str = ''

    async def send_message(self):
        client = openai.OpenAI()
        self.messages.append({'role': 'user', 'content': self.input_text})
        response = client.chat.completions.create(
            model='gpt-4o',
            messages=self.messages
        )
        answer = response.choices[0].message.content
        self.messages.append({'role': 'assistant', 'content': answer})
        self.input_text = ''

def chat_page():
    return rx.box(
        rx.foreach(ChatState.messages, lambda m: rx.text(m['content'])),
        rx.input(value=ChatState.input_text, on_change=ChatState.set_input_text),
        rx.button('Send', on_click=ChatState.send_message)
    )

Related on TokRepo

• AI tools for coding -- Developer tools with AI integration
• Featured workflows -- Discover curated developer tools

Common pitfalls

• Reflex compiles to React under the hood. Complex custom components may require understanding React concepts even though you write Python.
• Performance for highly interactive UIs may lag compared to native React because state updates round-trip through the Python backend.
• The ecosystem of third-party components is growing but smaller than React's. Check if the UI components you need are available before starting a large project.