I need someting like this - https://htmx.org/examples/sortable/#demo in Reflex.
Just sorting by dragging and dropping

Hello, I'm quite new to reflex, I'm fetching data from supabase, to pass them to ag-grid. The issue I have is the type of output, I'm having "reflex.vars.base.Var" and for the Ag-grid it is required to be a list.

Here is the code I used for fetching data:

from dotenv import load_dotenv
from supabase import create_client, Client
import reflex as rx
import os

load_dotenv()
url = os.getenv("SUPABASE_URL")
key = os.getenv("SUPABASE_KEY")
client: Client = create_client(url, key)

class ProjectState(rx.State):
    projects = []

    u/rx.event
    async def fetch_projects(self) ->list:
        """Fetch projects from Supabase and update the state."""
        print("Fetching projects from Supabase...")
        response = client.table("projects").select("*").execute()
        if response.data:
            self.projects =   # Update the state with fetched projects
            for project in self.projects:
                project.pop('id', None)  # Remove 'id' if needed
            
            print("Fetched projects:", self.projects)
            print(type(self.projects))
        else:
            print("Error fetching projects or no data found.")response.data

I tried then to format it :

formatted_data = ProjectState.projects.to(list)
print("formatted data:", formatted_data)
print(type(formatted_data))

but the outcome is not a list instead, I'm getting:

formatted data: reflex___state____state__portailcs___state____project_state.projects
<class 'reflex.vars.base.Var.__init_subclass__.<locals>.ToVarOperation'>

Any idea how to fix?

Thanks

Edit: Formating the code

Hi all!

I had a reflex app deployed with Reflex Cloud (version 0.5.10). Yesterday I tried to upload an update and it didn't recognize the app.

Later, I saw the new Reflex Cloud version and I'm trying to deploy an updated version (0.6.6.post2) but it looks like backend isn't running correctly. I can't access my backend URL, maybe it's offline?

https://preview.redd.it/v77f7dm0s95e1.png?width=394&format=png&auto=webp&s=7fba56598bc59fd1ed291060f967d1706a9d6f57

Also, I saw some sort of landing page with a countdown. Should I wait to that date in order to fix my deployments? Is there any way to retrieve the old school deployment? (it was enough to me hehe)

https://preview.redd.it/26k5liz8s95e1.png?width=1619&format=png&auto=webp&s=5a3b1d0dc8aa97eb1fdc13ee14562f55e5bc5e83

Thaaaaaanks <3

How to Deploy website in an offline server .

I can download reflex and install in my offline computer but node packages cannot be downloaded when I run reflex init.

hello - any plans to stream live sessions? :)

Our setup is NGINX on a vm and our docker containers on another. Everything is working until I add the https to the the proxy. The page loads but the backend times out. Do I need to get https working on just the container first or is this something else?

Hello there! I'm new to Reflex and I'd like to set a background image for the whole app. I was under the impression that I had to do something like this but it's probably a mistake:

app = rx.App(
    theme=rx.theme(
        background="center/cover url('/my-background.jpg')"
    ),
)
app.add_page(index)

Do you know how I should do this?

https://preview.redd.it/n5der13ullsd1.png?width=1100&format=png&auto=webp&s=519a54efb5d0351cc8d7c840b42ecc68ca27ac7d

Check out a new blog here: https://reflex.dev/blog/2024-09-25-using-ag-grid-in-reflex/

I want to make a CRUD website using Reflex

And want to display it in tabular format

I have experience in python programming and want to know any good tutorials out there on making a CRUD app.

What's New in Version 0.6.0: Key Changes and Updates

Released on: September 24, 2024

Breaking Changes

• Dropped Support for Python 3.8: As of this release, the minimum required Python version is 3.9. While Python 3.9 will still be supported, it will come with a deprecation warning to encourage upgrading (#3956, #3976).
• Moved chakra to it's own 3rd party package: Since moving our core components to Radix we have now moved Chakra into it's own 3rd party pip package. pip install reflex-chakra
• Removal of Deprecated Features: Several features that were previously marked as deprecated have now been fully removed. This includes the removal of components such as rx.input.root, rx.Component._apply_theme, and older prop-rewriting techniques for _type, _min, and _max.

Enhancements and improvements

• Optimized Performance: Multiprocess compilation is now available as an opt-in feature, dramatically improving compilation speed for large applications.
• We significantly improved our graphing components. Additionally the charts can be made responsive to the window size by setting width to a percentage.
• A new /_health endpoint has been added for easier monitoring in production environments great for people working with k8s.
• The CLI for creating and publishing 3rd party components has been enhanced, making it easier to extend Reflex's functionality.
• Improved error messages and warnings help developers identify and resolve issues more quickly.

DiskStateManager to maintain state between reloads

When saving a file Reflex now uses a DiskStateManager to maintain state between reloads. This means that the state is preserved across reloads and you don't lose your application state during a 'reflex run'.

The application state is reset when you stop a 'reflex run' and start it again.

Consistent theming

• Reflex now supports a consistent theming system across all core components, they now inherit the app theme and are fully customizable.app = rx.App( theme=rx.theme( appearance="light", has_background=True, radius="large", accent_color="teal", ) )

Responsive support for style props

Reflex now comes with configurable responsive breakpoints for all style props. If you change the window size the component will update to match the new breakpoint, see the example below.

rx.badge(
    "Hello World",
    color="black",
    background_color=rx.breakpoints(
        initial="pink",
        sm="lime",
        md="sky",
        lg="yellow",
    ),
)

Removed features and deprecated functions

The following deprecated functions and components were officially removed to streamline the codebase and align with newer implementations:

• Removed Lucide icons that were deprecated upstream, clearing out outdated elements from version 0.4.6.
• Passing children to rx.color_mode.button is no longer allowed (removed in 0.5.0).
• Other minor deprecated features from earlier versions, such as rx.cached_var and REDIS_URL specifications without a scheme, have been cleaned up.

Reflex website

We've rebuilt our landing page from the ground up using Reflex! The website is open source and a great tool to learn Reflex best practices, find it on GitHub @ reflex-dev/reflex-web

https://preview.redd.it/9xbfdh7yo0rd1.png?width=1225&format=png&auto=webp&s=ad02bf3ab5188a808591cf9b99e087ef27f187a8

I"m two minutes into hearing about Reflex (through Youtube's CodingEntrepreneurs) so excuse my ignorance. Can a static Reflex website be hosted on Cloudflare? This issue on Github seems to indicate ... yes?

Hi Guys,

I am new to reflex, and I got stuck trying to make a navbar which displays different menu itemes depending on whether the user is logged in or not.

The navbar and the user logging management work fine. I can display stuff and log users in and out. What bugs me is: how can I display different menu items depending on the state of the app?

My first guess was: let's supply the navbar function only the menu items which are relevant. Easy peasy:

    def get_navbar() -> rx.Component:
        unauth_user_links = [
            NavbarLink(text="Home", url="/"),
            NavbarLink(text="Login", url="/login"),
        ]
        auth_user_links= [
            NavbarLink(text="Home", url="/"),
            NavbarLink(text="Secret text", url="/secret-text"),
        ]
    
        if State.logged_in:
            navbar = Navbar(auth_user_links)
        else:
            navbar = Navbar(unauth_user_links)
    
        return navbar.render()

But unfortunarely this approach doesn't work, because (I understand) this python part is executed before runtime, so it doesn't get access to State.logged_in.

The second idea was to supply Navbar with two lists of links (one for authenticaded users and the other for not autheticated ones) and then use something like rx.Cond(State.logged_in, *auth_user_links, *unauth_user_links) to discriminate which lists gets used. But hey, Cond is not able to manage all those arguments I would be passing (it only expects 3).

What am I missing here? Is there something else which could work here?

Thanks

I'm trying to create a new page when someone submits a form. I am using a formstate function to handle_submit from the form by writing the form values to a database. within the function I am calling

app.add_page(lambda tool_id=tool_id: tool_page(id), route=f"/tool/{tool_id}")
rx.redirect(f"/tool/{tool_id}")

the tool_page(tool_id: int) funtion is used to build the page with rx.components. I can submit the form see the page but continuously get 404 error. Previous version i tried something different and would get the 404 error but then after making an edit to the app and restarting it, the page would render. How should I go about creating the page and having it render in real time?

Hey everyone,

Here is a simple QRCode component for reflex which wraps react-qr-code React component.

https://preview.redd.it/illk3skqa1bd1.png?width=2392&format=png&auto=webp&s=043fd52fa4aa233ed9978f9a87caf1ad2c611458

Feel free to give it a try. Source is at https://github.com/onexay/reflex-qrcode

basically the title. I want to minimize the time it takes from making changes to my app to seeing them reflected in the final product. I don't have much experience running dockers and VPS's. Reflex offers a deployment solution but they won't allow us to use custom domains and they don't fully support all backend operations like databases. That's why I was looking for self-hosting options.

Hello - I'm struggling to get my head around how to update themes on the fly. I have created a Theme class in State, to configure theme variables I can use within components. That works fine. But how can I change the accent_colour within rx.App(theme=rx.theme(accent_color="red"), dynamically at runtime?

Any help would be appreciated - I can't quite figure it out from the docs or the github repo

I've just started messing around some with reflex -- trying to put together something simple. I was starting with a simple login-page -- and I have the basic info showing up there OK. It took me a bit to realize I needed to wrap things in rx.center() to get it centered on the page... but got that done. However, I haven't been able to get the overall page background color set! I tried a dark-theme, but page bg is still white. I removed the theme ref, to let it default to whatever, -- and I tried several things with and without a specific theme set, but no luck so far.

Hints?

Hi!, I have published my app using the reflex deploy command, but the database is not created. Locally I run "reflex db migrate" but on the server reflex.run I can't create it. Could you help me?

so I'm pretty foreign to webdev thous I enjoy reflex. So my question is whats the best way to implement xtermjs, to my understanding is xtermjs just javascript and not a react package. There are react wrappers for xtermjs however they seem not well maintained...
Any suggestions?

Best regards

Hello I'm new to using reflex framework and I'm checking out the components library.

In the the Box section and theres an example with 4 boxes. The 4th box as a background image. And I literally copied the exact same code and have an image that I want to use in the same folder as my python code. But the box doesn't display any image at all. What ma I doing wrong?

I know is dumb but need this feature to finish a project rn.

And let me know other ways of just setting a background image in another component or in the entire page or whatever thank you.

Any help is really appreciated.

I've just started dabbling with reflex locally and I've noticed that if I edit a normal page (eg. app.add_page(index, route="/")) and save, the app recompiles, the browser refreshes, and my changes are shown automatically.

However, if it's a dynamic route (eg. app.add_page(server, route="/[x]/[y]/[z]")), then I have to hit Ctrl-C, run reflex run, and then Ctrl-Shift-R to reload the browser page before I see my changes.

Is this normal? Is there a way to avoid having to do this?

Hi I want to do an inventory web app for my job and recently know about this reflex project.

It’s possible to do it with Reflex?

If it’s possible, what will si need to code this?

I assume it will involve a database, a front end and an user authentication, right?

I want to make a card that you can drag-and-drop between columns of cards - anyone know how you can do this?

I'm trying to add a dropdown menu to each row in a table with the use of reflex https://reflex.dev/. The table is build in a state and buttons generally in definitions. This is an example that can be found on their site:

class DataEditorState_HP(rx.State):
    clicked_data: str = "Cell clicked: "

    cols: list[Any] = [
        {"title": "Title", "type": "str"},
        {
            "title": "Name",
            "type": "str",
            "group": "Data",
            "width": 300,
        },
        {
            "title": "Birth",
            "type": "str",
            "group": "Data",
            "width": 150,
        },
        {
            "title": "Human",
            "type": "bool",
            "group": "Data",
            "width": 80,
        },
        {
            "title": "House",
            "type": "str",
            "group": "Data",
        },
        {
            "title": "Wand",
            "type": "str",
            "group": "Data",
            "width": 250,
        },
        {
            "title": "Patronus",
            "type": "str",
            "group": "Data",
        },
        {
            "title": "Blood status",
            "type": "str",
            "group": "Data",
            "width": 200,
        },
    ]

    data = [
        [
            "1",
            "Harry James Potter",
            "31 July 1980",
            True,
            "Gryffindor",
            "11'  Holly  phoenix feather",
            "Stag",
            "Half-blood",
        ],
        [
            "2",
            "Ronald Bilius Weasley",
            "1 March 1980",
            True,
            "Gryffindor",
            "12' Ash unicorn tail hair",
            "Jack Russell terrier",
            "Pure-blood",
        ],
        [
            "3",
            "Hermione Jean Granger",
            "19 September, 1979",
            True,
            "Gryffindor",
            "10¾'  vine wood dragon heartstring",
            "Otter",
            "Muggle-born",
        ],
        [
            "4",
            "Albus Percival Wulfric Brian Dumbledore",
            "Late August 1881",
            True,
            "Gryffindor",
            "15' Elder Thestral tail hair core",
            "Phoenix",
            "Half-blood",
        ],
        [
            "5",
            "Rubeus Hagrid",
            "6 December 1928",
            False,
            "Gryffindor",
            "16'  Oak unknown core",
            "None",
            "Part-Human (Half-giant)",
        ],
        [
            "6",
            "Fred Weasley",
            "1 April, 1978",
            True,
            "Gryffindor",
            "Unknown",
            "Unknown",
            "Pure-blood",
        ],
    ]

    def click_cell(self, pos):
        col, row = pos
        yield self.get_clicked_data(pos)

    def get_clicked_data(self, pos) -> str:
        self.clicked_data = f"Cell clicked: {pos}"

It creates the table that is attached. I now want to change the House column to having a dropdown menu every row where if you click the cell, it will show the options Gryffindor, Huffelpuf, Ravenclaw and Slytherin. If you click one of them that name shows up in the table. This is the code that represents the dropdown menu:

rx.menu(     
    rx.menu_button("Menu"),     
    rx.menu_list(         
                rx.menu_item("Example"),         
                rx.menu_divider(),         
                rx.menu_item("Example"),         
                rx.menu_item("Example"),    
                ), 
        ) 

What confuses me is that the rx only seems to be usable in a definition and not in a state, but the table exists in the state. How do I solve this?

I tried to add the menu in the state, but I get an error.

​

Hi, I like to start a new project with Reflex, I created an API with FastAPI and now I want to use Reflex only for the frontend, butI can't do it, it raises an error with the Websocket, How can I do it?

Do we have a detailed guide on how to deploy the reflex app on Vercel or netlify? Any help would be appreciated.