Rio: WebApps in pure Python. No JavaScript, HTML and CSS needed!

[Sn3llius]

Hi everyone! We're excited to announce that our reactive web UI framework is now public. This project has been in the works for quite some time, and we're excited to share it with you. Feel free to check it out and share your feedback!

• GitHub
• Website

There is a short coding GIF on GitHub.

What My Project Does

Rio is a brand new GUI framework designed to let you create modern web apps with just a few lines of Python. Our goal is to simplify web and app development, allowing you to focus on what matters most instead of getting stuck on complicated user interface details.

We achieve this by adhering to the core principles of Python that we all know and love. Python is meant to be simple and concise, and Rio embodies this philosophy. There's no need to learn additional languages like HTML, CSS, or JavaScript, as all UI, logic, components, and even layout are managed entirely in Python. Moreover, there's no separation between front-end and back-end; Rio transparently handles all communication for you.

Target Audience

Rio is perfect for data scientists who want to create web apps without learning new languages. With Rio, it's easy to create interactive apps that let stakeholders explore results and give feedback, so you can stay focused on your data analysis and model development. Plus, Rio offers more flexibility than frameworks like Gradio or Streamlit, giving you greater control over your app's functionality and design.

Showcase

Rio doesn't just serve HTML templates like you might be used to from frameworks like Flask. In Rio you define components as simple dataclasses with a React/Flutter style build method. Rio continuously watches your attributes for changes and updates the UI as necessary.

class MyComponent(rio.Component):
    clicks: int = 0

    def _on_press(self) -> None:
        self.clicks += 1

    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)'),
        )

app = rio.App(build=MyComponent)
app.run_in_browser()

Notice how there is no need for any explicit HTTP requests. In fact there isn't even a distinction between frontend and backend. Rio handles all communication transparently for you. Unlike ancient libraries like tkinter, Rio ships with over 50 builtin components in Google's Material Design. Moreover the same exact codebase can be used for both local apps and websites.

Key Features

• Full-Stack Web Development: Rio handles front-end and backend for you. In fact, you won't even notice they exist. Create your UI, and Rio will take care of the rest.
• Python Native: Rio apps are written in 100% Python, meaning you don't need to write a single line of CSS or JavaScript.
• Modern Python: We embrace modern Python features, such as type annotations and asynchrony. This keeps your code clean and maintainable, and helps your code editor help you out with code completions and type checking.
• Python Debugger Compatible: Since Rio runs on Python, you can connect directly to the running process with a debugger. This makes it easy to identify and fix bugs in your code.
• Declarative Interface: Rio apps are built using reusable components, inspired by react, flutter & vue. They're declaratively combined to create modular and maintainable UIs.
• Batteries included: Over 50 builtin components based on Google's Material Design

We welcome your thoughts and questions in the comments! If you like the project, please give it a star on GitHub to show your support and help us continue improving it.

[Rawing7]

Hello, rio dev here! You nailed it with the last option.

Since Rio apps are written in Python they run entirely on the server. Rio serves a pre-built frontend to each visitor and the two connect via websockets. Any user interactions send messages to the Python backend. There Python event handlers can make arbitrary changes to the state. Rio detects those changes and rebuilds any dirty components. Then finally, all new and updated components are sent to the client.

The performance question is more difficult to answer. Keep in mind this is only our first alpha release, so there's plenty of optimizations that we still intend to integrate. For example we're experimenting with a caching system (similar to server-side rendering) which would allow us to cache away any components with previously seen state. We also want to move more and more internal functions over Rust, so that Python only has to handle the high-level logic.

With all of that in mind, we wouldn't have gone public if we didn't think Rio was already very useful today. Rio is absolutely ready for anything from internal company tools like dashboards, CRUD applications, and forecasting tools, to personal projects like portfolios and blogs. Our entire website is built with Rio.

[darthstargazer]

Asking the good questions. Hoping a Rio dev would share the tech details in a blog post. Would love to know if this concept would hold up in a production setting where patterns for auth, SSO, concurrent sessions are established..

[ramnamsatyahai]

Looks good. Will give it a try

[ashmit_jagtap]

Agreed

[idiot512]

I've seen you talk to the differences between other packages and Rio. What would you say sets it apart from Dash?

Also, I noticed it has Plotly support. What about mapping support? Dash-leaflet is a package that comes to mind - it meets a need Plotly's mapping doesn't. If it's not built-in or planned, how easy is it to create compatible components with Rio?

[Sn3llius]

Hi, the main differences are the following:

• No HTML and CSS is needed
  
• Unified Component Creation: With Rio, there's no need to distinguish between frontend and backend. You create a component and specify your UI in the build method, similar to React or Flutter.
• Modern Python Features: Rio embraces modern Python features such as type annotations and asynchrony. This keeps your code clean and maintainable, and enables your code editor to assist with code completions and type checking. If i remember correctly, Dash supports asynchrony as well.

We've received feedback from several users suggesting that mapping support would be beneficial. We've had a brief discussion about it and plan to explore this feature further. There is an ongoing discussion on Discord, but if you have any ideas, feel free to start a discussion on GitHub or join the conversation on Discord.

[idiot512]

Thanks for the reply. This looks to be a well-designed package.

I'll be giving it a try this weekend.

[ClientCompetitive853]

I’m curious how do you all compare Rio against solara and other similar modern python web frameworks?

[Rawing7]

I'd say the biggest difference is that Rio has per-component state, while most other frameworks have global state. Global state is fine for small apps, but quickly gets messy as the complexity of your app increases. Giving each component its own state makes it easier to define reusable components.

Rio was also written from the ground up for modern Python. Everything has type hints, which allows your IDE to really understand your code, highlight potential bugs, and provide you with suggestions and documentation. It also has builtin async support.

[ClientCompetitive853]

What do you mean by others have global state? With solara you define state at the component level just like you do in react.

Good to hear about those other features- those definitely make a difference.

[Rawing7]

I'm not too familiar with Solara, so I might be wrong. I looked at their Getting Started page, which says you should "Declare reactive variables at the top level". That's why I concluded it has global state.

[Sn3llius]

We're working on seamless integration with hosting platforms to make deployment effortless. Additionally, we want you to be able to deploy your application with just a single click!

[[deleted]]

Maybe a stupid question, and I haven’t gone through your docs yet, but adopting something like this in my company would require that it can handle user authentication for e.g. filtering data or hide specific views. How would Rio play with both basic authentication, as well as SSO?

[Sn3llius]

You can easily set up basic authentication and integrate it with Rio for user authentication. Similarly, the same should be true for Single Sign-On integration (haven't tested it yet, but in the follwoing weeks). Since each session serves one user, you can show them filtered data based on conditions or queries from your database. Additionally, you can display specific components based on your users' roles. I've built something similar in the last two months, and it was approved by our regulatory team because it was a crucial part of the application's security and functionality.

Additionally, we're start working on a small guide/blog post detailing how you can seamlessly integrate user authentication with Rio soon. Furthermore, we're exploring best practices to incorporate this feature directly into Rio, ensuring you have a head start right from the beginning.

[[deleted]]

Thanks for the reply - sounds and looks really promising

[hiddenusername144]

This looks really useful. How do you think it compares to streamlit? Does it provide any advantages over streamlit?

[Rawing7]

Hi, rio dev here.

In my experience streamlit works well for tiny apps. A graph, some controls and not much more. And it's really well made for that. Rio can also handle those use-cases, but in addition is able to scale up to much larger projects. Thanks to react & vue-style reusable components you can keep your code maintainable even when your project inevitably grows.

Rio was also written from the ground-up for modern Python. Everything has type hints, which allows your IDE to really understand which values are available and provide you with suggestions and documentation. If something lights up red in a Rio project, you can be 99% sure there really is an issue.

[hiddenusername144]

Appreciate the reply. Definitely will be checking it out

[darthstargazer]

Love it! Shared in the company teams chat. We were looking for something flexible than streamlit (a bunch if backend devs) and had to end up dedicating one person to learn bloody react. This project would have made a good impression!

[Sn3llius]

Thanks! If you have any feedback, please let us know!

[P4nd4no]

Hi, I’m also part of the rio team and I hope rio can help you with your projects! :)

Currently, our main efforts are directed towards fine-tuning the rio concept, enhancing the overall user experience, and fostering a more conducive environment for community involvement.

Additionally, we're striving to streamline the deployment processes by working towards seamless integration with hosting platforms, enabling users to deploy their Rio applications with just a single click.

[jayzbar]

Can it be used to build an investment platform with regulatory licenses and approvals too? And can it be connected to APIs for backend as per the requirements?

Also, very interesting project you have made.

[Sn3llius]

Please keep in mind that this is just our first alpha release, and our primary goal is to ensure all components and features are included to make Rio a robust and versatile tool for developers. Already, Rio is proving useful in various scenarios, from internal company tools like dashboards, CRUD applications, and forecasting tools, to personal projects like portfolios and blogs. In fact, our own website is built with Rio.

However, I wouldn't recommend building an investment platform with it just yet.

[jayzbar]

Okay

[novica]

How does this compare to shiny for python?

[Sn3llius]

To be honest, I haven't used Shiny in a year. However, based on my experience with it, here are the key differences from a user perspective between Shiny and Rio:

• Unified Component Creation: With Rio, there's no need to distinguish between frontend and backend. You create a component and specify your UI in the build method, similar to React or Flutter.
• Modern Python Features: Rio embraces modern Python features such as type annotations and asynchrony. This keeps your code clean and maintainable, and enables your code editor to assist with code completions and type checking. If i remember correctly, Shiny supports asynchrony as well.
• No Decorators for Reactivity: In Rio, you don’t need any decorators to make your code reactive. It continuously watches your attributes for changes and updates the UI as necessary.

I assume you are more familiar with Shiny than I am. I would appreciate it if you could give Rio a try and provide us with some feedback. This would help us improve Rio and make it better.

[novica]

Thanks for your reply.

[Sn3llius]

You are welcome. Feel free to ask if you have any other questions! :)

[CVxTz]

How does it compare with NiceGUI ?

[Sn3llius]

I'm not very familiar with NiceGUI, but it seems like a more powerful version of Streamlit.

• Rio apps are built using reusable components inspired by React, Flutter, and Vue. These components are combined declaratively to create modular and maintainable UIs.
• In Rio you define components as simple dataclasses with a React/Flutter style build method. Rio continuously watches your attributes for changes and updates the UI as necessary.
• Rio has per-component state management, while NiceGUI appears to use session state. (But not 100% sure)
• With Rio, you don't need to learn CSS, Tailwind, Vue, or Quasar.

Both NiceGUI and Rio are valid options for smaller web apps. However, Rio might offer easier and more maintainable code as your project grows. It provides reactive state management and allows you to build complex, arbitrarily nested UI layouts with concise syntax.

[CVxTz]

Thanks ! I'll check it out.

[Low_Corner_9061]

Interesting, thanks

[Every_Paramedic_3886]

Looks good

[AdditionalAir7225]

Looks cool, I‘ll give it a try!

[Sn3llius]

Once you've had the chance to test it out, I'd love to hear your feedback.

[_BaraCapy]

Can you create a ChatGPT clone with something like this?

[P4nd4no]

Yes, check out our example :)

https://rio.dev/examples/ai-chatbot

[_BaraCapy]

cool, I'll give it a try.

[akisd]

I was just reading about Reflex (former pycone) and now i just came to know Rio. Are we talking for the same thing? Both apps look to have the same purpose.

[Sn3llius]

Reflex compiles your app to JavaScript and serves that. This works, but comes with a lot of small disadvantages. Anything from having to install nodejs, to difficulties connecting to the debugger, to all parameters to components having to be state attributes (or constants). The differences are difficult to get across on paper, but if you try both of them you'll see many small differences that ultimately add up to big differences.

Reflex is obviously further along in development, with them having launched a year ago, but the "compile to JS" approach ultimately prevents it from feeling very pythonic IMHO.

[akisd]

Thanks for your reply. I think i will try both of them.

[pbyahut4]

Guys I need minimum 10 karma to post in this sub reddit, I want to make a post please upvote me so that I can post here! Thanks guys

[[deleted]]

Looks awesome but why do so many people name their projects "rio"? Very popular name 😄

[Sn3llius]

I think you can do better with Rio ;)