Minimal Rio Intro

In early November I saw a release announcement for Rio (https://rio.dev), an upcoming Python library for creating user interfaces. I have years of experience using Qt with Python and always interested in seeing new approaches.

I went through the Tic T…


This content originally appeared on DEV Community and was authored by Peter Shinners

In early November I saw a release announcement for Rio (https://rio.dev), an upcoming Python library for creating user interfaces. I have years of experience using Qt with Python and always interested in seeing new approaches.

I went through the Tic Tac Toe tutorial and found a lot of things I liked. I was initially impressed by the simplicity of writing interfaces using component classes. The interface runs through an HTML document, which is completely encapsulated by the library. This gives many possibilities on how and where Rio applications are run. Rio optionally includes a standalone webview application. However, I critically disliked the included rio command line tool and the initial project structure it creates.

I think Rio deserves a lighter weight tutorial that strips the boilerplate and abstractions to show the potential this library has. Let's start from nothing and discover how Rio feels building it up for ourselves. I found getting started with uv to be as simple as I'd hoped.

uv init minirio --no-readme --no-pin-python --vcs none
cd minirio
uv add rio-ui[window]

The optional [window] feature installs the many dependencies needed to run the standalone app. Also be aware I needed to use ==9.3 on Windows due to missing pyside builds.

Let's use the minimal code needed to build this application.

Image description

import rio

class Greeting(rio.Component):
    name: str = 'World'
    def build(self):
        return rio.Row(
            rio.Icon('material/star', align_x=0.8, align_y=0.5),
            rio.Markdown(f'Hello, **{self.name}**', align_y=0.5),
        )

if __name__ == '__main__':
    app = rio.App(build=Greeting)
    app.run_in_window()

This is a regular Python script. Run it with your python interpreter.

uv run hello.py

A component is little more than a build method that returns a component and a state defined on the class. You do not define __init__ or other typical boilerplate. You can replace the run_in_window with a run_as_web_server and interact with this application in your browser.

It takes very little to add some interactivity. Here is a similar component that adds a checkbox and styling.

gradient = rio.LinearGradientFill(
    (rio.Color.RED, 0), (rio.Color.PINK, .3),
)

class Greeting2(rio.Component):
    checked: bool = False

    def build(self):
        style = rio.TextStyle(fill=gradient) if self.checked else 'text'
        return rio.Row(
            rio.Checkbox(is_on=self.bind().checked),
            rio.Text('Roses are red.', style=style),
        )

This is using self.bind() to create a two-way binding between the checkbox state and an attribute. Alternatively, it is straightforward to assign the checkbox's on_change argument to any method and change attributes of self as desired.

Image description

Find more complete examples and documentation on the Rio project website. Personally, I'm not yet ready to leave the world of Qt and Pyside, but I also think there's enough in Rio to keep an eye on.


This content originally appeared on DEV Community and was authored by Peter Shinners


Print Share Comment Cite Upload Translate Updates
APA

Peter Shinners | Sciencx (2025-01-03T03:05:56+00:00) Minimal Rio Intro. Retrieved from https://www.scien.cx/2025/01/03/minimal-rio-intro-2/

MLA
" » Minimal Rio Intro." Peter Shinners | Sciencx - Friday January 3, 2025, https://www.scien.cx/2025/01/03/minimal-rio-intro-2/
HARVARD
Peter Shinners | Sciencx Friday January 3, 2025 » Minimal Rio Intro., viewed ,<https://www.scien.cx/2025/01/03/minimal-rio-intro-2/>
VANCOUVER
Peter Shinners | Sciencx - » Minimal Rio Intro. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/01/03/minimal-rio-intro-2/
CHICAGO
" » Minimal Rio Intro." Peter Shinners | Sciencx - Accessed . https://www.scien.cx/2025/01/03/minimal-rio-intro-2/
IEEE
" » Minimal Rio Intro." Peter Shinners | Sciencx [Online]. Available: https://www.scien.cx/2025/01/03/minimal-rio-intro-2/. [Accessed: ]
rf:citation
» Minimal Rio Intro | Peter Shinners | Sciencx | https://www.scien.cx/2025/01/03/minimal-rio-intro-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.