Migrating Legacy Pages

Overview

Bubble's Responsive Engine, the framework for how responsive web pages are built and rendered, has been re-designed from the ground up to provide a faster and more powerful way to build responsive layouts in Bubble. For those who may be more technical, the new engine is based on CSS and CSS flexbox properties. Regardless of your understanding of the underlying technologies though, the new responsive engine will run your app pages faster and give you more control over the behavior of your page as the screen or content re-sizes.

Because Bubble's Responsive Engine has been completely re-built, there are a number of new controls that your existing pages do not yet have access to. We'll walk through how to migrate any of your existing pages over to the new responsive engine so you can take advantage of this new, more powerful way to build.

Your page is on the Legacy rendering engine if it has a blue upgrade icon next to it. If it doesn't, feel free to skip this section!

Upgrading your Page

Upgrading to the new Responsive Engine happens at the page level. To upgrade a particular, navigate to the desired page (new or existing) and click the “Upgrade responsive engine” button in the Responsive sub tab in the Design Tab. You now have access to the new responsive controls on this page!

Pages and reusable elements not yet upgraded will carry a blue upgrade icon in the page menu.

Converting an existing page

If you are upgrading an existing page, your old settings will be converted to the new system automatically. Depending on the migration option you choose, there will likely be some follow up work to make sure your page behaves as expected. You might even choose to re-build certain sections as the new controls allow for more powerful and cleaner ways to build your pages. In addition, the undo history will be reset when the page is upgraded.

We strongly recommend reviewing your upgraded page before deploying to Live to ensure the behavior matches your expectations. Some new controls are incompatible with the old rendering engine so not everything on your page will map 1:1 once it has been upgraded.

Warning: There is no way to downgrade a page once on the new Responsive Engine. There is, however, the option to create a copy of the old page in case you would like to return to that version at a later time. Selecting this option will create a copy of the page before the upgrade that can be found in your page menu. Keep in mind that this copy will not contain any changes you made to the UI after upgrading the page.

Confirmation modal when converting an existing page

Converted page layout

The migration algorithm tries its best to match the behavior of your page to the new responsive engine settings. Converted pages will generally have the following layout: Page is set to a column container layout type and will contain many groups set to a row container layout type. In turn, these row container layout types will contain the page content. This is because a column container organizes its content vertically and will expand or shrink based on its content. The row containers organize their content horizontally and allow the content to wrap or collapse as the screen resizes. In concert, a "column of rows" layout best matches the responsive behavior of legacy pages while now giving you more explicit control.

You may also choose to migrate your page "as-is." This setting copies your page over exactly as it appears in your editor, but everything will be absolutely positioned. You'll likely want to adjust the new layout settings on all of your elements to get your desired responsive behavior.

Note: Because most converted pages will now have a responsive container layout type, you will not be able to drag to resize elements like you're used to. With responsive containers, child elements need to follow rules as the screen or content resizes (stay aligned to the left? Stretch to fit the width?), and these rules are set in the Property Editor's Layout tab. Changing a container to a Fixed type will allow you to drag to resize, but the element will no longer behave responsively.

Reusable Elements

Reusable elements must be updated separately to the new Responsive Engine as well. Legacy reusable elements won’t break upgraded pages, but will also not have access to the latest controls and might not work as expected. Similarly, upgrade reusable elements will not break un-upgraded pages, but will not take advantage of the new responsive controls and may not work as expected.

Property Editor

The Property Editor has been updated to accommodate the new responsive controls. Most notably, a layout tab has been added to house the new responsive controls. The Property Editor is now the same across the UI Builder tab and Responsive tab, making it easier to continue building regardless of the tab you are in.

Appearance

Controls related to the overall appearance of an element. This includes the data type, data source, styles, and transitions settings.

Layout

Controls related to the overall layout of an element on the page. This includes the width, height, container layout type, page visibility, and margins.

Conditionals

Conditionals allow you to control how page elements behave and appear under certain circumstances. This tab remains unchanged from before.