Reflex: Building Pure Python Web Apps

October 13, 2025 Lisa Park - Tech Editor Tech

This code snippet demonstrates​ a basic to-do application ‍built⁤ using the Reflex Python web framework. Let’s break down the code adn‌ explain its functionality.

Overall Structure

The code defines a​ Reflex ⁢application (app) with ​a single page (index). The index page contains the main UI elements of the ⁣to-do app: a heading, an input bar for adding‍ tasks, a list of tasks, and a footer bar with filtering and clearing options.

Key Components and Functions

  1. TodoState (Implicitly Defined): ‌ Even though not explicitly shown in this snippet, Reflex applications rely on a ​ state class (likely named TodoState in this case) to manage the application’s data and logic. This state would‍ contain:

‌ * ⁣ items: A‌ list of to-do items, each likely having properties ⁤like text, ‍ id, ‍and completed.* new_todo: A string representing the text entered in ⁣the ‌input bar.
⁣ ‍ * filter: A string indicating the current filter (e.g., “all”, “active”, “done”).
⁢* add_todo: A ⁤function to add a new ‍to-do item ​to the items list.
‌ ​ *⁢ toggle_completed: A function to toggle the ‍ completed status of a ​to-do item.
* delete_todo: A function⁢ to remove a ‍to-do item from the items list.
​ * clear_completed: A function to remove⁤ all completed to-do items.
⁣* ⁣ items_left_label: A computed ‌property that ‌returns a string indicating the ⁢number of active (incomplete) to-do items.

  1. todo_input_bar() ⁤ (Implicitly defined): This function (not⁣ shown) likely returns a Reflex component containing an ​input ⁤field for entering⁢ new to-do items and a button ‌to add them.⁢ ⁢It would be connected to the TodoState to update the new_todo state variable as the user types and ​to call⁤ the add_todo function when the button is clicked.
  1. todo_list_panel() (Implicitly Defined): This function (not shown) likely returns a Reflex component that displays the list of‍ to-do items. It would iterate over the items ⁢ list in the TodoState and⁢ render a row for each​ item, including⁣ a checkbox‌ to ‌toggle completion and a‌ trash icon to⁤ delete the item. ​The checkbox and trash icon would be connected to the toggle_completed and delete_todo ⁣ functions in the TodoState, respectively.
  1. filter_button(label, value): This function creates⁤ a button for filtering the to-do list.It takes the button’s label (e.g., “All”, ‌”Active”,⁤ “Done”) ​and the corresponding filter ⁤value (e.g., “all”, “active”, “done”)‌ as arguments.Clicking ⁢the button would update the filter state variable in the ⁣ TodoState.
  1. footer_bar(): This function‌ returns ‌the footer bar component, which includes:

‌ ​* A label displaying the number of ⁤items left.
* Three filter buttons ​(All,⁢ Active, Done).
* A “Clear Completed” button.

  1. index(): This function defines the main page of ‌the application. It returns a ‍Reflex component that arranges the other components (heading, input bar, list,