A hybrid property derives a value from other vars using a single method that works on both the backend and the frontend. It is defined with the hybrid_property decorator, currently available as an experimental feature:

When you reference a hybrid property in your UI, Reflex compiles it into a client-side var expression built from the vars it reads — no extra data is created or sent. The same method also works on the backend, where it behaves like a normal Python property.

Try typing in the inputs below — full_name updates on the client as you type:

Here full_name is rendered directly in the browser as first_name + " " + last_name. Because it is a property, the same method is also available on the backend — inside an event handler, self.full_name returns the actual combined string.

Computed vars and hybrid properties both derive a value from other state vars, but they work very differently:

A computed var effectively duplicates data: Reflex computes the value on the server, stores it in your state, ships it to the browser, and keeps it in sync. That is exactly what you want when the value depends on something only the server has.

A hybrid property adds no extra state. NameState.full_name above renders as an expression over first_name and last_name that already live on the client, so there is nothing extra to store, cache, or transmit. Reach for a hybrid property when you simply need to reshape existing frontend data for display, and for a computed var when the value can only be produced on the server.

By default a hybrid property reuses the same code on the frontend and backend. When the two should differ, register a frontend-only implementation with @<name>.var. The decorated function receives the state class and returns a Var:

Because the frontend expression is built only from data that reaches the client, a hybrid property's frontend logic may reference regular vars but not backend-only vars (those prefixed with _). Reading a backend var while building the frontend value raises an error — produce such values on the server with a computed var instead.

Hybrid properties also work when defined on a dataclass, Pydantic model, or SQLAlchemy model that is used as a var. Accessing the property through the object var renders it just like accessing it on the state directly: