🔧 Rio: Build Stunning GUIs and Full-Stack Web Apps in Pure Python — No HTML, CSS, or JS Needed!

What if you could build powerful, interactive web apps without ever touching HTML, CSS, or JavaScript? For Python developers, the dream of crafting sleek, modern user interfaces without stepping outside their favorite language has long been elusive. Most web frameworks demand an uncomfortable detour into frontend technologies. But Rio changes the game. https://rio.dev/

Rio is more than just another Python UI framework — it’s a complete reimagining of how Python developers build web apps. Inspired by React and Flutter, Rio brings declarative, component-based UI development directly into Python, completely eliminating the need to write or understand frontend code. You focus on Python, and Rio does the rest.

Forget the traditional backend/frontend divide. With Rio, your app is just Python — from logic to layout, from interactivity to deployment. And the best part? You can run the same codebase both locally and in the browser without modification.

This isn’t just a tool — it’s a revolution for Python developers who want to build simple GUIs or full-stack applications without leaving their comfort zone.

Why Rio?

Rio addresses the challenges Python developers face when building modern web apps. Python is extremely simple and concise, making it one of the most popular programming languages in the world. Existing frameworks often require additional skills in HTML, CSS, or JavaScript, adding complexity and creating barriers for developers who prefer Python’s simplicity. Recognizing Python’s potential for streamlined and compact development, Rio envisioned a framework that allows users to focus entirely on Python without sacrificing functionality or flexibility.

Rio eliminates the traditional divide between frontend and backend. Its automated communication simplifies development, removing the need for defining endpoints or sending requests manually. Inspired by the best aspects of frameworks like Flutter and React, Rio introduces a declarative interface, reusable components, and dynamic attribute binding to Python. These features enable developers to create powerful and maintainable applications with minimal effort.

Many projects rely on popular libraries like React internally, but the core benefits and elegance of these libraries are often diluted in the process. Take React, for example — its defining feature is that the “app is code,” where components are dynamically built within a render method that automatically re-triggers upon state changes. However, this fundamental principle is lost in libraries that simply wrap React. It contradicts the very premise of React and the reasons for its widespread popularity among developers.

Rio’s Scalability:

🔹Modern and clear project structure

🔹Reusable components

🔹Suitable for everything from POCs to production projects

🔹Versatile for hobbyists and B2B users alike

🔹Unlimited GUI designs with fully customizable components

Modern Developer Experience

🔹Hot Reloading for seamless development

🔹Static typing with extensive IDE support

🔹Classic Python debugging

🔹Targeted error messages in both the console and GUI

🔹Custom layout system enabling Python-only syntax

🔹Modern dev tools like Component Tree and Theme Picker

Rio makes UI development as natural as writing a script. Developers no longer need to wrestle with unfamiliar paradigms — just use Python the way you always have, and let Rio handle the complexity.

Build Your First Rio App in 30 Seconds ⏱️

Getting started with Rio is lightning-fast. First install the rio library using pip:

pip install rio-ui

Rio comes with a very helpful command line utility to help you out. It establishes the project structure, theme, app, and related components. Create a new project in one short command:

rio new

You can choose from a variety of built-in templates to get you started. Here’s a complete example to create a project based on the tic-tac-toe template:

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

Your first web app is up and running. No frontend headaches, no complex setup — just Python.

Check out more examples: https://rio.dev/examples

Click, explore, and experience how they look and behave right from the landing page. No more guessing — just dive in and see Rio in action!

A Simple Counter App

Here’s a minimal yet powerful example that showcases Rio’s declarative, component-based design:

# Define a component that counts button clicks
class ButtonClicker(rio.Component):
    # Define the attributes of the component. Rio will watch these
    # for changes and automatically update the GUI.
    clicks: int = 0

    # Define a method that increments the click count. We'll later
    # make a button that calls this method whenever it is pressed.
    def _on_press(self) -> None:
        self.clicks += 1

    # Define the `build` method. This method essentially tells rio
    # what a ButtonClicker component looks like. Whenever the state
    # of the ButtonClicker component changes, rio will call its
    # `build` method and update the GUI according to the output.
    def build(self) -> rio.Component:
        return rio.Column(
            rio.Button('Click me', on_press=self._on_press),
            rio.Text(f'You clicked the button {self.clicks} time(s)'),
        )

# Create an App and tell it to display a ButtonClicker when it starts
app = rio.App(build=ButtonClicker)
app.run_in_browser()  # Or `app.run_in_window()` to run as local app!

Rio automatically handles the UI rendering, state management, and updates.

How Rio Works Under the Hood

The user code is written entirely in Python and is responsible for defining the UI components of the app or website. From this point, Rio takes over: the components are automatically converted into HTML, CSS, and JavaScript, which are sent to the user’s browser.

A WebSocket connection keeps the server and client in sync. When a user interacts with the website, a message is automatically sent to the server, and UI updates are synchronized with the client. This process requires no intervention from the developer — there’s no need to manually define endpoints or send HTTPS requests.

On the client side, Rio’s layout system manages the positioning of components on the screen and dynamically adjusts the website’s DOM based on the server’s instructions.

Rio components are the building blocks of your web app. They are the visual elements that the user interacts with. You can use them to create buttons, text inputs, images, and more. Each component has its own set of properties that you can customize to fit your needs.

To learn more about Rios components, head over to https://rio.dev/docs/api

Ressources:

Documentation: https://rio.dev/docs
Website: https://rio.dev/
Github: https://github.com/rio-labs/rio