Rio

Build web apps and GUIs in pure Python with no HTML, CSS, or JavaScript required

Beginner open-source self-hosted python web-development GUI

GitHub Repository Official Website

Alternative To

• Streamlit
• Gradio
• Flask
• React

Difficulty Level

Beginner

Suitable for users with basic technical knowledge. Easy to set up and use.

Overview

Rio is an open-source Python framework that allows developers to create modern web applications and GUIs using only Python code, eliminating the need for HTML, CSS, or JavaScript. Inspired by React and Flutter, Rio uses a component-based approach where UIs are built by combining reusable Python components that automatically handle state updates and rendering.

The framework bridges the gap between frontend and backend development, enabling Python developers to build complete applications without learning additional languages or frameworks. Rio transparently handles all communication between server and client, allowing developers to focus on application logic rather than web development complexities.

System Requirements

CPU: 2+ cores
RAM: 4GB+ (8GB+ recommended)
GPU: Not required
Storage: 500MB+
Python: 3.10 or higher
Operating System: Windows, macOS, or Linux

Installation Guide

Prerequisites

Basic knowledge of Python
Python 3.10 or higher installed
Pip package manager

Option 1: Standard Installation

Install Rio using pip:
```
pip install rio-ui
```
Verify the installation:
```
rio --version
```

Option 2: Creating a New Project

Rio provides a command-line utility for creating new projects with templates:

Install Rio:
```
pip install rio-ui
```
Create a new project:
```
rio new my-project
```

For a project with a specific template:

rio new my-project --type website --template "Tic-Tac-Toe"

Navigate to the project directory and run it:
```
cd my-project
rio run
```

Option 3: Development Installation

For contributing or using the latest development version:

Clone the repository:

git clone https://github.com/rio-labs/rio.git
cd rio

Install in development mode:
```
pip install -e .
```

Practical Exercise: Building a Simple Counter App

Let’s create a simple counter application with Rio to demonstrate its component-based approach.

Step 1: Set Up Your Project

Create a new directory for your project:

mkdir rio-counter
cd rio-counter

Step 2: Create the Counter Application

Create a file named counter_app.py with the following content:

import rio

class Counter(rio.Component):
    # Define component state variables
    count: int = 0

    # Method to increment the counter
    def increment(self) -> None:
        self.count += 1

    # Method to decrement the counter
    def decrement(self) -> None:
        self.count -= 1

    # Build method defines the component UI
    def build(self) -> rio.Component:
        return rio.Column(
            # Add a title
            rio.Text("Rio Counter App", size=24, weight="bold"),

            # Add some spacing
            rio.SizedBox(height=20),

            # Display the current count
            rio.Text(f"Count: {self.count}", size=18),

            # Add some spacing
            rio.SizedBox(height=20),

            # Add buttons in a row
            rio.Row(
                rio.Button(
                    "Decrement",
                    on_press=self.decrement,
                    variant="outlined",
                ),
                # Add spacing between buttons
                rio.SizedBox(width=10),
                rio.Button(
                    "Increment",
                    on_press=self.increment,
                    variant="filled",
                ),
                # Center the buttons
                main_alignment="center",
            ),
        )

# Create and run the app
app = rio.App(build=Counter)

if __name__ == "__main__":
    # Run in browser by default, can also run in window
    app.run_in_browser()
    # Alternatively: app.run_in_window()

Step 3: Run the Application

Run the application:

python counter_app.py

This will open a browser window displaying your counter application, where you can increment and decrement the count.

Step 4: Exploring Advanced Features

Once you’re comfortable with the basics, you can explore more advanced Rio features by extending the counter app:

import rio
from typing import List

class AdvancedCounter(rio.Component):
    count: int = 0
    increment_amount: int = 1
    history: List[int] = [0]

    def increment(self) -> None:
        self.count += self.increment_amount
        self.history.append(self.count)

    def decrement(self) -> None:
        self.count -= self.increment_amount
        self.history.append(self.count)

    def reset(self) -> None:
        self.count = 0
        self.history = [0]

    def on_increment_change(self, value: str) -> None:
        try:
            self.increment_amount = int(value)
        except ValueError:
            self.increment_amount = 1

    def build(self) -> rio.Component:
        return rio.Column(
            rio.Text("Advanced Rio Counter", size=24, weight="bold"),

            rio.SizedBox(height=20),

            rio.Text(f"Current Count: {self.count}", size=20),

            rio.SizedBox(height=10),

            rio.Row(
                rio.Text("Increment Amount:"),
                rio.TextField(
                    value=str(self.increment_amount),
                    on_change=self.on_increment_change,
                    width=60,
                ),
                main_alignment="center",
            ),

            rio.SizedBox(height=20),

            rio.Row(
                rio.Button("Decrement", on_press=self.decrement),
                rio.SizedBox(width=10),
                rio.Button("Reset", on_press=self.reset),
                rio.SizedBox(width=10),
                rio.Button("Increment", on_press=self.increment),
                main_alignment="center",
            ),

            rio.SizedBox(height=30),

            rio.Text("Count History:", weight="bold"),

            rio.Container(
                rio.Column(
                    *[rio.Text(f"Step {i}: {value}") for i, value in enumerate(self.history)],
                ),
                height=200,
                padding=10,
                overflow="scroll",
                border="1px solid #ccc",
                border_radius=5,
            ),
        )

app = rio.App(build=AdvancedCounter)

if __name__ == "__main__":
    app.run_in_browser()

Key Features

Rio comes with numerous features designed to simplify web and app development:

Pure Python Development: Build complete applications using only Python code
Component-Based Structure: Create reusable UI components inspired by React and Flutter
Automatic State Management: Rio watches component attributes for changes and updates the UI
50+ Built-in Components: Comprehensive library of UI elements based on Google’s Material Design
Local and Web Deployment: Same codebase can be used for local apps or web applications
Responsive Layouts: Built-in layout system that adapts to different screen sizes
Type Safety: Fully type-annotated with Python type hints for better IDE integration
Real-time Updates: Changes in component attributes automatically update the UI
Template System: Several built-in project templates to get started quickly
Modern Design: Clean, professional appearance without CSS customization