DEV Community: David

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

David — Sun, 02 Mar 2025 11:26:10 +0000

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

Rio: WebApps in pure Python — A fresh Layouting System

David — Sun, 03 Nov 2024 10:25:35 +0000

We recently launched Rio, our new framework designed to help you create web and local applications using just pure Python. The response from our community has been overwhelmingly positive and incredibly motivating for us. With the praise has come a wave of curiosity. The most common question we’ve encountered is, “How does Rio actually work?” If you’ve been wondering the same thing, you’re in the right place! Here we’ll explore the inner workings of Rio and uncover what makes it so powerful.

A Fresh Layouting System

When it comes to building modern apps, components are just the beginning, it’s the layouting that pulls them together into a cohesive, user-friendly interface. In our last topic, we took a closer look at components, the essential pieces of any app. Now, let’s shift our focus to the layout system that arranges them harmoniously. Designing a layout system isn’t a one-size-fits-all task; different frameworks bring unique strengths, with CSS often at the center of debate. As we designed Rio's layout system, we aimed for something Pythonic, simple, flexible, and efficient—a system that keeps developers focused on their app’s function, not the complexities of positioning. Here, we’ll break down the core principles behind Rio’s two-step approach to layouting, where each component starts by defining its own natural size before the available space is thoughtfully distributed.

Take a look at our playground, where you can try out our layout concept firsthand with just a click and receive real-time feedback.
Layouting Quickstart

What Makes a Great Layout System

Each UI framework approaches layouting differently, all with their own unique strengths and quirks. There's of course the polarizing incumbent, CSS, but also the many systems built into popular frameworks like Flutter, QT, and others. Before we got to designing our own, we took a step back to understand what makes a great layout system. Here are some key principles we identified:

Pythonic: Rio embraces Python’s simplicity. No numbers encoded as strings
or complex unit declarations. For example, width=10 is preferred over
width="10px". This isn’t just cleaner, but also aids type checking tools and
allows for easy mathematical operations.
Simple: The system should be intuitive, even for developers without a deep
background in UI design. Rather than a tangled set of rules and exceptions, it
should be governed by a handful of principles that are applied consistently.
Flexible: From basic layouts to complex, nested structures, the system
needs to handle them all. Templates and restrictive built-in patterns won’t
cut it.
Efficient: Especially when targeting the web, performance is key. A good
layouting system should be automatically convertible to CSS, maybe with some
JavaScript sprinkled in occasionally for dynamic calculations.

Rio’s Approach: Two-Step Layouting

We've decided on a two-step layouting system that balances simplicity and
flexibility. Here's how it works:

Step 1: Natural Size Calculation

First, each component determines how much space it needs to fit its content. We
call this the component's "natural size."

For some components this is simple. For example, rio.Switch has a fixed size,
so that is also its natural size. But not all components are that simple. Take a
rio.Row for example. The row itself doesn't need any space, but it needs to
request enough space to fit its children. So the natural width of a row is the
sum of the natural widths of its children, plus any spacing between them.

Another more in-depth example is rio.Text. It's size depends on a variety of
things, such as its text content, font size, whether the font is bold, etc.

This process starts at the leaves of the component tree, i.e. first components
without any children are calculated, then their parents, and so on, until the
entire tree has computed its natural width & height.

Step 2: Space Distribution

Once each component has determined its natural size, we must decide how to
allocate the available space. For example, in a large window with only a button,
should the button be centered, aligned to one side, or stretched?

There isn't a real reason to prefer one over the other. We are solving this, by
simply giving all space to the button. If you don't want for that to happen,
you can explicitly set the button's alignment, and Rio will take it into account.

Example

Imagine a simple rio.Row containing a rio.Text and a rio.Switch. First, we
need to calculate the natural size of all components. We'll start with
components that don't have any children, so in this case the rio.Text and
rio.Switch.

The rio.Text will calculate its natural size based on its text content, font
size, etc. The rio.Switch has a fixed size, so that is also its natural size.

Now that all children have had their natural size calculated, the rio.Row can
get to work. It's natural width is the sum of the natural widths of its children
(plus any spacing) and its natural height is the maximum of the natural heights
of its children.

Finally, we need to distribute the available space. Since the window itself
always has a single child, it will pass all available space to that child - in
this case the rio.Row. The row will then distribute the space to its children;
But how?

Since there's only so few components in the view there is likely too much space
available. Thus, the rio.Row will have to decide how much space to pass to
each child. Since we always want all components to have enough space to fit
their content ("natural size") we'll allocate each child that much space. Then,
if space is leftover we can distribute that proportionally. Ta-da! All
components now know how large they are. Their positions also follow from this.

Since this is such a common use-case, rio.Row also honors the grow_x and
grow_y attributes of components. If a component is marked to grow, and
superfluous space is available, all space will be given to that component. If
there are multiple components that are marked to grow, the space will be
distributed proportionally just between those components.

Implementation

The system described above is what we call our reference layouting system. It
isn't actually implemented like this in code, but rather as a set of CSS rules,
that result in this exact behavior. This allows our layouting to run at maximum
performance, because it relies on the browser's native layouting engine. The
described algorithm is nonetheless useful, as it guides Rio developers to how
a component should behave. It's just that this behavior is then achieved by
internal CSS rules rather than the algorithm itself.

Best of all, you'll never have to see a single line of CSS. All of this is
handled by Rio internally, so you can focus on building your app.

Limitations and Trade-offs

While Rio’s layout system is powerful and flexible, it isn't perfect. In the
interest of full transparency, we'd like to share some limitations that we've
found:

Some layouts cannot achieved just using CSS. Notably, when using the
proportions attribute of rio.Row or rio.Column, JavaScript jumps into
action to help out, because we are not aware of any pure-CSS way to achieve
our desired behavior. (If you're a CSS magician and know a way, reach out!)
There are occasional layouts that cannot be realized with this system. One
such situation that we've found is to have a row containing an icon and text,
while that text is both centered and has wrapping enabled.

This sounds like a simple case, but no combination of parameters yields the
desired result. Aligning the text to 0.5 (center) won't center the icon.
Same when using the justify attribute. Aligning the entire rio.Row will
make the row take up as little space as possible, thus squishing the text.

We've had some discussions about introducing a "preferred size" that would
solve this, but it's not in Rio yet.

Github: https://github.com/rio-labs/rio

Website: https://rio.dev/

Rio: WebApps in pure Python — Technical Description

David — Sun, 04 Aug 2024 11:12:44 +0000

We recently launched Rio (https://github.com/rio-labs/rio), our new framework designed to help you create web and local applications using just pure Python. The response from our community has been overwhelmingly positive and incredibly motivating for us.

With the praise has come a wave of curiosity. The most common question we’ve encountered is, “How does Rio actually work?” If you’ve been wondering the same thing, you’re in the right place! Here we’ll explore the inner workings of Rio and uncover what makes it so powerful.

We will explore the following topics:

What are Components?
How does observing Attributes work?
How does Diffing and Reconciliation work?

Components are Dataclasses

Among the numerous classes and functions in Rio, one stands out as indispensable: rio.Component. This base class is omnipresent throughout the code, forming the foundation for every component in an app, including both user-defined and built-in components.

Components in Rio have several key responsibilities. Primarily, they manage the state of your app. For instance, when a user enters text into a rio.TextInput, you'll need to store that value. Simply asking for user input without saving it won't make for a satisfying user experience. :)

To streamline value storage, all Rio components are designed to automatically function as dataclasses. Dataclasses in Python help reduce boilerplate code for many simple classes. For example, if you need to store information about a customer, without using dataclasses, your code might look like this:

class Cat:
    def __init__(self, name: str, age: int, loves_catnip: bool) -> None:
        self.name = name
        self.age = age
        self.loves_catnip = loves_catnip

This approach is functional but quite verbose. Notice how each attribute name must be repeated three times: once as the function parameter, once as the class attribute, and once to assign the parameter value to the attribute. The redundancy becomes even more cumbersome when inheritance is introduced:

class Animal:
    def __init__(self, name: str, age: int) -> None:
        self.name = name
        self.age = age


class Cat(Animal):
    def __init__(self, name: str, age: int, loves_catnip: bool) -> None:
        super().__init__(name, age)
        self.loves_catnip = loves_catnip


class Dog(Animal):
    def __init__(self, name: str, age: int, is_good_boy: bool) -> None:
        super().__init__(name, age)
        self.is_good_boy = is_good_boy

Notice how often we had to write same the attribute names. This repetition is so common that the developers of Python introduced dataclasses as a simpler alternative. Here's how the same scenario looks using dataclasses:

from dataclasses import dataclass


@dataclass
class Animal:
    name: str
    age: int


@dataclass
class Cat(Animal):
    loves_catnip: bool


@dataclass
class Dog(Animal):
    is_good_boy: bool

This approach is much simpler and requires significantly less effort while achieving the same result. Additionally, dataclasses offer extra benefits, such as an automatic comparison function (amongst others), allowing us to easily check if two instances are identical.

Since Rio components need to store values and all inherit from rio.Component, it made perfect sense to make them all dataclasses. This is why Rio components always come with the same, familiar structure:

class CatInput(rio.Component):
    name: str
    age: int
    loves_catnip: bool

    def build(self) -> rio.Component:
        return ...

This structure should look familiar: attributes are defined at the top, there's no __init__ function, and a build method is used to create the component's user interface. Whenever any of the attributes change, build is called again, updating the component accordingly.

This raises the question: how does Rio detect when a component changes?

Observing Attributes (aka, I feel watched!)

As we've just seen, one of the reasons Rio components are dataclasses is convenience. Notice how in the dataclass version of Animal, we are explicitly informing Python which fields the class has, and their types. For example, we're writing name: str. Because of this, Python knows exactly that each animal will have a field named name, and that the value of that field will always be a string.

Compare that to the regular class. We're telling Python that the __init__ function accepts a parameter called name, and we copy that value into the class, but we never tell Python about it. The interpreter has no clue which fields the class comes with, and what their datatypes are.

Explicit fields are not only a good idea, because they help out other developers reading your code, but because libraries such as Rio can read them as well. Because we have explicitly listed our fields, Rio now knows which values the class has, and will watch those for changes for us. How? Simple, using __setattr__.

Python classes can have magic methods. You've seen these before, they're methods starting & ending with two underscores. __init__ is one of those methods.

Another method is __setattr__. Python calls this function each time you assign a value to a class's attribute. You can use this to store values in a JSON value, whenever they're assigned to. Or maybe you're debugging code and want to print new values when they change. Or, of course, maybe you want to be informed whenever an attribute changes, so you can rebuild the UI. This is exactly what Rio does.

class MyClass:
    def __setattr__(self, name, value):
        print(f"Setting {name} to {value}")
        self.__dict__[name] = value

This is why it's crucial to always assign a new value to a component's attribute when you change it. If you modify an attribute without assignment (for example, by appending to a list), Python won't trigger __setattr__, and Rio won't know that your component needs to be updated. If your component seems unresponsive, check your code to ensure you are assigning a new values to the attributes.

Diffing & Reconciliation

So, Rio has detected that your component has changed, build has been called, and a new set of components has been created. What happens next? Should Rio simply discard the old components and replace them with the new ones? No! The previous components may contain a lot of important state that needs to be preserved. Imagine this scenario: a user has entered the perfect cat name into your app, toggled some switches, and selected an item from a dropdown menu. Then, they trigger an event, perhaps by pressing a button or resizing the window. Your event handler is called and updates a component. If Rio were to replace the old components with the new ones, that precious cat name would be lost forever.

Instead, Rio uses a set of techniques called diffing & reconciliation. The first step is to find matches between the old and new components. For instance, if the build function previously returned a TextInput and returns a TextInput again, it's likely the same component with updated state. This process of finding matching pairs is known as diffing. The basic idea is simple: Rio recursively walks the new and old output of the build function. If it encounters two components of the same type, they are considered a match. Rio then continues the search into the component's children, looking for matches there as well. If two components do not match, the recursive search stops, and the component is considered new. This "structural" matching works well in most cases and identifies most matches.

However, there are situations where it isn't sufficient. For example, imagine a list of many components. Depending on the user's actions, new components may be added or removed, changing the order of existing entries. If we were to simply match the first component in the old list with the first in the new list, we'd quickly encounter problems. To avoid this, Rio uses a second technique based on explicit keys. You might have noticed a key parameter in a Rio component before. This optional parameter is common to all components, and some even require you to set one.

If a component in the build output has the same key as a component in the previous output, they are always considered a match, regardless of changes in their parent or overall position. This allows Rio to track components that have moved and update them accordingly.

Now, with matching pairs of components identified, the reconciliation step begins. Rio compares the paired components and determines which attributes to retain from each version:

Attributes which you have explicitly set on the new component always take priority

Attributes which have changed on the previous component after their initialization are retained

Finally, any other attributes are taken from the new component

These rules strike a good balance, always honoring new values while preserving the previous state if it was likely intentionally set.

This concludes the first installment of our deep dive series. The next part will be available in the coming weeks. In the meantime, join our Discord server! You can showcase the cool apps you've built or get help if you're still early in your journey.

Source: https://github.com/rio-labs/rio