✨ Reflex is in Hosting Alpha! Learn more here. ✨
DocsBlogGallery

Search documentation...

/

Star

13k+

[ Learn ]

[ Concepts ]

[ Reference ]

Introduction


Looking for Pynecone? You are in the right place, Pynecone is now Reflex!

Reflex is an open-source, full-stack Python framework that makes it easy to build and deploy web apps in minutes. Reflex is a full-stack framework for building and deploying web apps.

Motivation


Reflex was created with the following goals:

Pure Python

Use Python for everything. Don't worry about learning a new language.

Easy to Learn

Build and share your first app in minutes. No webdev experience required.

Full Flexibility

Remain as flexible as traditional web frameworks. Reflex is easy to get started with, but powerful enough for advanced use cases.

Build anything from small data science apps to large, multi-page websites.

This entire site was built and deployed with Reflex!

Batteries Included

No need to reach for a bunch of different tools. Reflex handles the frontend, backend, and deployment of your app.

Get Started


Below is a quick example of a counter app to get a feel for how Reflex works.

For a more in depth example, we recommend going through the tutorial or go straight to the installation to start building your own app.

First Example


Let's go over a simple counter app to explore the basics of Reflex.

0

Here is the full code for this example:

import reflex as rx


class State(rx.State):
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1


def index():
    return rx.hstack(
        rx.button(
            "Decrement",
            bg="#fef2f2",
            color="#b91c1c",
            border_radius="lg",
            on_click=State.decrement,
        ),
        rx.heading(State.count, font_size="2em"),
        rx.button(
            "Increment",
            bg="#ecfdf5",
            color="#047857",
            border_radius="lg",
            on_click=State.increment,
        ),
        spacing="1em",
    )


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

The Structure of a Reflex App


Let's break this example down.

Import


import reflex as rx

We begin by importing the reflex library. All Reflex functions and classes begin with the rx prefix.

State


class State(rx.State):
    count: int = 0

The state defines all the variables (called vars) in an app that can change, as well as the functions that change them.

Here our state has a single var, count, which holds the current value of the counter. We initialize it to 0.

Event Handlers


def increment(self):
    self.count += 1

def decrement(self):
    self.count -= 1

Within the state, we define functions, called event handlers, that change the state vars.

Event handlers are the only way that we can modify the state in Reflex. They can be called in response to user actions, such as clicking a button or typing in a text box. These actions are called events.

Our counter app has two event handlers, increment and decrement.

Frontend


def index():
    return rx.hstack(
        rx.button(
            "Decrement",
            bg="#fef2f2",
            color="#b91c1c",
            border_radius="lg",
            on_click=State.decrement,
        ),
        rx.heading(State.count, font_size="2em"),
        rx.button(
            "Increment",
            bg="#ecfdf5",
            color="#047857",
            border_radius="lg",
            on_click=State.increment,
        ),
        spacing="1em",
    )

This function defines the frontend of the app.

We use different components such as rx.hstack, rx.button, and rx.heading to build the frontend. Components can be nested to create complex layouts, and can be styled using the full power of CSS.

Reflex comes with 50+ built-in components to help you get started. We are actively adding more components, plus it's easy to wrap your own React components .

rx.heading(State.count, font_size="2em"),

Components can reference the app's state vars. The rx.heading component displays the current value of the counter by referencing State.count. All components that reference state will reactively update whenever the state changes.

rx.button(
    "Decrement",
    bg="#fef2f2",
    color="#b91c1c",
    border_radius="lg",
    on_click=State.decrement,
),

Components interact with the state by binding events triggers to event handlers. For example, on_click is an event that is triggered when a user clicks a component.

The first button in our app binds its on_click event to the State.decrement event handler, and the second button binds its to the State.increment handler.

Routing


app = rx.App()

Next we define our app and add the counter component to the base route.

Compiling


app.add_page(index)

Finally, we compile our app, and we are ready to run it.

Next Steps


And that's it! We've created an entire frontend and backend in less than 30 lines of code. From here we can continue developing or deploy it to the web in a single command.

To see what other cool things you can build with Reflex check out this App .

Keep reading the docs to learn how to try Reflex yourself!

Installation →

Copyright © 2023 Pynecone, Inc.