Rio 0.10.6

We've released version 0.10.6, focusing on stability and bug fixes rather than large overhauls. But that's not to say there nothing has changed—there are still some exciting improvements!

Improved rio run 🌐

One of the great things about Rio is how rio run auto-detects changes to your project and reloads the page. This feature has been further refined:

rio run now reloads all packages in the project folder, not just the main module. If your project is split into multiple sub-projects, all of them will be kept up-to-date automatically. Packages within virtual environments are exempt from this to avoid unnecessary reloads and keep everything responsive.

You’ve long been able to load Rio apps as FastAPI apps with the as_fastapi() method:

app = rio.App(...)

fastapi_app = app.as_fastapi()

fastapi_app.add_route(...)

Previously, rio run would still execute the original app, not fastapi_app, which meant any custom routes you added were left out. To host such an app, you’d need to rely on other servers, like uvicorn, sacrificing the Rio dev tools.

This limitation is gone! rio run will now prioritize Rio apps converted to FastAPI, hosting those first. If none are found, it will fall back to the standard Rio app. Now you can enjoy custom routes and middlewares without losing any of the dev tools.

Better Tables 📊

rio.Table has received some much-needed attention. We realize that many of you are using Rio for data-science applications and just how important tables are in that context. While we still consider them experimental for now, tables now look much nicer than before and we've laid the groundwork for more improvements to come. Watch this space!

Up Next 🚧

Even with the table improvements in this release, there’s more in store. We’re working on styling for individual cells, sorting, inserting arbitrary Rio components into cells, and much more.

Our documentation is also getting a full revamp. We've invested time in enhancing the API docs, and now it’s time to bring the rest of the docs up to speed with improved navigation, more how-tos, and examples for common tasks.

Finally, custom HTML components are still in development. Much of the groundwork is in place, and we’re actively shaping the public API.

Install 🛠️

Get it from PyPI: pip install --upgrade rio-ui 🌊

Rio 0.10

It's been two months since the previous release, and 0.10 is a big one. The team has been busy, and we've got a lot to cover. Let's dive into the highlights of this release.

Major Highlights 🌟

Reworked Routing 🗺️

Rio now automatically detects your app's pages! Instead of specifying each page during app creation simply place your Python files in the "pages" directory and annotate components with @rio.page(...). Rio will scan the directory and add all annotated components to your app.

This change simplifies page management and follows our philosophy of making Rio user-friendly. If this does not work for you (for example,
because you want to add pages dynamically) the old system absolutely still works and isn't going anywhere.

A new kind of page has also been added: rio.Redirect allows to to add a page to your app that will immediately redirect to another page. This has always been possible with page guards, but the new system is more explicit and more convenient.

Page guards have also received a small update. Previously they were passed multiple parameters which cluttered up their signature. We've changed this to a single rio.GuardEvent object that contains all the information you need. This allows us to add more information in the future without breaking existing code.

To round it all out, any app with two or more pages will now have a default navigation added. This will help you get around during development and can easily be replaced by assigning your own navigation to the app's build callback. Learn more here.

Improved Parameter Naming 🏷️

We've seen some confusion around the naming of parameters in previous releases and have taken this opportunity to make several changes to clarify parameter names. The most prominent change are the width and height parameters.

Previously these would either accept a single number, or the literal "grow" to indicate that a component would like additional space. This has now been split into two values instead:

• min_width and min_height control the minimum size of a component. This allows you to force components to be larger than they would be based on their content.

• grow_x and grow_y correspond to the previous width="grow" and height="grow" respectively. As before, these will cause components to be prioritized when superfluous space is available.

To upgrade to the new system just apply a few simple replacements:

• width=123 -> min_width=123
• width="grow" -> grow_x=True
• height=123 -> min_height=123
• height="grow" -> grow_y=True

That's it! Even better, the old parameters will continue to work for now, and emit a warning in the terminal to remind you to update your code.

Other name changes include:

• rio.Text.wrap has been renamed to rio.Text.overflow. This avoids the confusing case of wrap="ellipsize".

• rio.Session.file_chooser is now rio.Session.pick_file

• rio.Page is now rio.ComponentPage. This is to avoid confusion with the lowercase @rio.page decorator.

• rio.Page.page_url is now called rio.ComponentPage.url_segment. This makes it clearer that only one segment should be specified, and not the entire URL.

• The plain style of rio.Button is now called plain-text. This separates it clearly from the new colored-text style.

Again, all old names will continue to work for the near future. We recommend slowly switching to the new names as you work on your app.

Dialogs 🗨️

Dialogs have finally arrived! These have been often requested and for good reason. They're a great way to ask users for input, confirm actions, or just display information in a way that doesn't require a new page.

The easiest way to do so is using the show_yes_no_dialog method available in the session. In just a few lines of code you can ask users a simple yes/no question and wait for them to respond

ice_cream_lover = await self.session.show_yes_no_dialog(
    title="This is a Dialog",
    text="Do you like ice cream?",
)

Of course, you can also provide completely custom content. This is a little more involved, so check out the documentation of rio.Session.show_custom_dialog for a full example.

We're also working on another convenience function that will allow you to create dialogs with arbitrary buttons, without having to create your own component. The API for this one is still unclear, so it will drop in a future release.

(If you're coming from a pre-release rather than the previous stable version, please note that dialogs have moved from rio.Component to rio.Session.)

Support for Base URLs 🌐

Rio now has experimental support for custom base URLs. This means you can host your Rio app in a subdirectory of your domain, such as mysite.com/myapp. This can be useful if you're hosting multiple apps on the same domain, or if you maybe want to create an admin-cockpit for your server that isn't the main application for users to see.

You can set the URL in the rio run command:

python -m rio run --base-url=https://mysite.com/myapp

Remember that this is experimental for now, so please let us know if you run into any issues.

Authentication Example 🔒

We've added a new example / template to Rio that demonstrates how to implement a login system. It shows how to securely store and verify passwords, and how to use sessions to keep users logged in.

This initial version stores all passwords locally using SQLite. Support for OAuth is in the works.

You can create a project based on this template in just one line:

rio new --template authentication

API Changes 🚨

• guards: Previously, multiple parameters were passed, cluttering their signature. This has been changed to a single rio.GuardEvent object that encapsulates all necessary information.
• Several parameter names have been updated but will be deprecated in a future release.

Other Improvements ✨

• FilePickerArea: Allows file uploads through drag-and-drop functionality or by selecting files via the file browser option.
• A Chinese translation of the README has been added by @youweicheng

Up Next: The Road to Stability 🚧

You'll have noticed the unusual amount of changes in this release. This is on purpose.

Rio has matured significantly since the initial release. Most of what you'd expect from an app framework has been implemented, and the time has come where we need to stop changing things each release and instead need to start worrying about stability.

This is why we've implemented everything on our backlog that would introduce API changes in this release. It will allow us to keep the API more consistent from now on, with much less changing between releases. Think of it as a sort of "soft stable" in preparation for 1.0, which we expect to reach later this year.

This of course doesn't mean that there won't be any more improvements. We are working on support for custom components, better internal state management and plenty other updates, but we are convinced that stability and reliability need to take center stage now.

This means that we'll be focusing on bug fixes, many, many more automated tests, and documentation improvements. Our website also has several changes lined up to optimize it for mobile, as well as make documentation more accessible.

Install 🛠️

Get it from pypi: pip install --upgrade rio-ui 🌊

Rio 0.9.2

After looking into feedback and real-world apps made by the community, we've decided to make some changes to the layouting system. We've completely rewritten how components are laid out internally. This was a large undertaking and has been in the works for several weeks now - and the results are looking great! We're seeing much faster layout times, especially for larger (1000+ component) apps.

No Breaking changes

Improvements:

• Internal Layout Changes: This was an entirely internal layout change that makes Rio faster.
• Foundation for Custom Components: These changes pave the way for custom components, a feature we've been wanting to add for a while.
• rio.Switch: Appearance of rio.Switch has been enhanced for better usability and appearance.

Install 🛠️

Get it from pypi: pip install --upgrade rio-ui 🌊

Rio 0.9

I'm not going to say too much because the changelog speaks for itself, but I have to bring special attention to one feature in particular:
The dev tools sidebar got a major overhaul in this release, in particular the "component tree" tab. If you ever have trouble with rio's layouting system, the dev tools can now tell you exactly why a component is layouted the way it is, explain how you can make it smaller or larger, and even let you change the size, margin, and alignment of the component on-the-fly. To try it out, open the "Tree" tab in the dev sidebar, select a component, and then click the "Layout" button at the bottom.

Breaking changes

• Text.justify now defaults to "left"
• FlowContainer.justify now defaults to "left"
• rio.Theme.replace method has been removed, since themes are now mutable

New features ✨

• Checkbox component as an alternative to rio.Switch #51
• Experimental Switcher component for animated transitions between different child components
• FlowContainer now has a convenience spacing parameter which controls both row_spacing and column_spacing at the same time
• App now takes a dict of meta_tags as input, which are converted to HTML<meta> tags

Improvements:

• TextInputs now emit the on_change event in real time while the user is
  typing
• HTML components now execute embedded <script> nodes
• rio run no longer opens a browser, since many people found it annoying

Deprecations:

• rio.Fill and rio.FillLike are slated for removal
• The display_controls parameter of the CodeBlock component has been renamed
  to show_controls

Install 🛠️

Get it from pypi: pip install --upgrade rio-ui 🌊

Rio 0.8.7

Thanks to all of the feedback and contributions from the community, we're excited to announce the release of Rio 0.8.7! In addition to numerous bug fixes and minor improvements, there are some exciting new features:

New Features✨

• rio.Calendar: A versatile calendar component for managing dates. (experimental)
• rio.DateInput: An intuitive date input field for easy date selection. (experimental)
• rio.Popup: A customizable popup component for dynamic content display.

Install 🛠️

Get it from pypi: pip install --upgrade rio-ui 🌊

Rio 0.8.5

Thanks to all of the feedback and contributions from the community, we're excited to announce the release of Rio 0.8.5! In addition to numerous bug fixes and minor improvements, there are some exciting new features:

New Features✨

• HTML Meta Tags: Provide crucial metadata for SEO, helping search engines understand and index your web page content.
• @rio.event.on_window_size_change: Allows you to execute specific functions dynamically when the window size changes, enhancing responsive design capabilities.
• FrostedGlassFill: Creates a frosted glass effect, adding a stylish and modern aesthetic to your application's user interface. (#35 )
• Session method for reading and writing clipboard: Adds functionality to read from and write to the clipboard within a session. (#1)

New Contributors 🤝

• @16amattice made the first contribution in #1 and #35

Install 🛠️

Get it from pypi: pip install --upgrade rio-ui 🌊

Rio 0.8

It hasn't even been a week since the last announcement, but quite a lot has happened in these few days! Aside from a multitude of bug fixes, there are some neat new features:

New Features✨

• rio run now tells you if a newer rio version is available. You'll never miss an update again!
• Themes now accept a text_color parameter, giving you even more control over the look of your app
• ProgressBars now have a color parameter

Breaking Changes

There are also some breaking changes in the Banner component:

• The markup parameter was renamed to markdown for clarity
• The multiline parameter was removed; banners now always wrap text

Install 🛠️

Get it from pypi: pip install --upgrade rio-ui 🌊

Rio 0.7

Thanks to all of the feedback and contributions from the community, we're excited to announce the release of Rio 0.7! This release includes one of the largest change to layouting system in months, among many other improvements.

Breaking Changes

No changes are needed for your old code.

No more funky yellow stripes 🎉

Rows and columns have got to be some of the most important components in Rio.
Just about every app uses them, and just about every app has had to deal with
the funky yellow stripes that appear when too much space is available. This
undefined space was meant as a warning system, but after talking to many of
you we've decided that it does more harm than good. Starting with Rio 0.7,
rows and columns will now pass on all available space to their children.
This places them in line with the rest of the layouting system, and hopefully
alleviates some of the confusion around them.

New Example: Multipage Website 📄📄📄

Navigation is a common pattern in apps, and Rio now has a new example that
illustrates how to implement it. The new "Multipage Website" example comes with
three sample pages and a navbar to switch between them. The navbar automatically
highlights the current page and allows you to switch between them.

You can set up a project with this template in a single command:
rio new --template multipage-website

Thank you to @JJFlorian for contributing this example!

Other Improvements ✨

• Added a new CodeBlock component that can be used to display code snippets.
  It's similar to how code blocks in markdown work, and supports syntax
  highlighting.
• UserSettings have been migrated to our own dataclass implementation. This
  allows you to use mutable defaults.
• Many, many bugfixes, improvements and documentation updates.

New Contributors 🤝

• @JJFlorian made the first contribution in #15
• @shubham-kshetre made the first contribution in #18 and #23

Install 🛠️

Get it from pypi: pip install --upgrade rio-ui 🌊

Rio 0.6

We're excited to announce our latest release, Rio 0.6! This is a big one, because it's the first public alpha release.

Improvements ✨

• Many components have had their documentation overhauled and improved Rio is now under the open source Apache 2.0 license. While Rio has always been open-source, this license gives you even more freedoms
• Cards now have a ripple parameter, which adds a neat little effect to the card when it's clicked
• many, many more internal improvements, everything from refactoring the client side, to performance improvements, to better error messages

Breaking Changes

• Sliders have been reimplemented from scratch and are now animated. We've also changed the step_size parameter to just step, to match Python functions like range().
• Theme.from_color has been renamed to Theme.from_colors. Since thisfunction now accepts to many different colors, it wasn't clear which one the name referred to 🙂

Install 🛠️

Get it from pypi: pip install --upgrade rio-ui 🌊

Rio 0.5

This is a sizable release, with several quality of life improvements, bugfixes and improvements:

Improvements ✨

• rio.Rectangle is now much easier to use. Instead of wrapping up all of the styling components inside of a BoxStyle, you can now pass the fill, corner_radius, and other styles directly to the rectangle.

Breaking Changes

• rio.Text now has a justify attribute. Previously, align_x controlled both the position of the component itself, and the location of the text inside of the component. With this change, align_x positions the component, while justify controls where the text is placed inside of the component. This should clear up the previous confusion from align_x controlling multiple properties.
• rio.MardownView has been renamed to rio.Markdown. This brings it in line with our typical naming, since no other components end in View.
• Another change to rio.Text: multiline was replaced with wrap.

Install 🛠️

Get it from pypi: pip install --upgrade rio-ui 🌊