Reflex Examples

The lorem_stream example demonstrates how to use Reflex background tasks to concurrently generate and stream data (simulating multiple API calls) to the UI as it becomes available.

It manages multiple concurrent tasks by storing state in dictionaries keyed by a unique task_id. For each task, the state tracks:

• running: bool: Indicates if the task should continue processing.
• progress: int: The number of iterations completed.
• end_at: int: The target number of iterations before the task stops.
• text: str: The accumulated generated text.

The Form Designer is a Reflex sample application designed to demonstrate how to build dynamic forms, collect user responses, and display those responses to form owners.

User Roles:

• Admin: The first user registered on an instance is automatically granted admin privileges, allowing them to view and edit forms created by any user.
• Standard User: Can create forms, fill out forms, and view responses for their own forms.

The Link in Bio application is organized into the following key files:

• linkinbio/linkinbio.py: The core application logic, containing the index function (the main UI entry point) and the link_button component.
• linkinbio/style.py: Centralized styling definitions for buttons, links, and the overall layout.
• rxconfig.py: The Reflex configuration file required to run the app.
• requirements.txt: Lists the necessary Python dependencies and Reflex version.

Dynamic components allow you to create and store components directly in a State variable or return them from a computed variable. Unlike standard UI components that require rx.cond or rx.foreach to handle conditional or list-based rendering, dynamic components can be constructed imperatively using regular Python code. This is particularly useful for rendering deeply nested or complex data structures where the UI hierarchy is determined at runtime.

Key Considerations:

• Flexibility: They allow for more complex, imperative construction of UI elements using standard Python logic.
• Performance & SEO: Dynamic components can be less performant and may negatively impact SEO compared to standard declarative components like rx.foreach.

To switch between different datasets or tables in this application, you must modify the configuration parameters.

1. Select a Model: Change the MODEL parameter to one of the defined database models in models.py (e.g., Customer, Cereals, Covid, or Countries).
2. Load a Data File: If you want to populate the selected model with data from a file, set the data_file_path parameter to the path of your data source.

The basic_crud application exposes API routes for managing product models. You can interact with these endpoints via the UI provided in the app.

Available Endpoints

• products:
  • GET: Retrieve a list of products.
  • POST: Create a new product.
• products/[id] (where [id] is the specific product ID):
  • GET: Retrieve a specific product.
  • PUT: Update an existing product.
  • DELETE: Remove a product.

UI Interaction

1. Select the desired HTTP Method from the dropdown menu.
2. Enter the API endpoint (e.g., products or products/1) in the input box.
3. For POST or PUT requests, enter the request body in the text area.
4. View the response body in the main screen area and the request execution results in the bottom pane.

To personalize the application with your own information, edit the index function within linkinbio/linkinbio.py. You can update the following variables to reflect your personal details:

• name: Your display name.
• bio: A short description or biography.
• avatar_url: The URL for your profile image.
• links: A list containing the links you want to showcase (e.g., Twitter, GitHub, LinkedIn).

To set up the basic_crud example, you must first initialize and migrate the database, then initialize the Reflex project and run the development server.

Follow these steps in order:

1. Initialize the database: Run reflex db init followed by reflex db migrate to prepare the schema.
2. Initialize the project: Run reflex init.
3. Run the app: Run reflex run to start the development server.

You can extend the app to support your own datasets by creating a new rx.Model class in models.py.

Critical Requirement: The keys defined in your rx.Model must match the column headings in your data source EXACTLY.

Naming Rules & Examples:

• Case Sensitivity: If a heading is Name, the key must be Name (not name).
• Python Compatibility: Column names containing special characters (like State/UT) must be mapped to valid Python identifiers (e.g., state).
• Spaces: Column names with spaces (like people count) must be mapped to snake_case (e.g., people_count).

To set up the Link in Bio application locally, ensure you have Python 3.7+ and pip installed. Follow these steps:

1. Clone the repository and navigate to the specific app directory:

   git clone https://github.com/reflex-dev/reflex-examples
   cd reflex-examples/linkinbio

2. Install dependencies using the provided requirements.txt:

   pip install -r requirements.txt

3. Run the application using the Reflex CLI:

   reflex run

Once running, the app is accessible at http://localhost:3000.