Introducing AirDev Canvas Pages - build custom and fully-responsive pages in just a few minutes

[vlad]

Hi Bubblers,

Two months ago we released AirDev Canvas to the Bubble community. As a reminder, Canvas is a free Bubble app foundation that makes it significantly faster and easier to build high-quality apps (see original post here). We’ve been thrilled to see several hundred apps created using Canvas since its release, and lots of helpful feedback from the community to make it better.

Today, we’re releasing a public beta of Canvas Pages. Pages allows you to quickly configure custom pages on top of your Canvas app from a library of fully-responsive modules that are built to fit seamlessly with the existing visual styles and dimensions.

Let me explain the reasoning behind this approach to Bubble development. Developing an application is always a balance between customization and simplicity. Many of us found when we started working on Bubble that is offers incredible customization, but that creating a full app from scratch is a ton of work and often results in poor design & persistent bugs. App templates, on the other hand, are really simple to purchase, but they only work if you’re trying to build something that’s very close to the template you choose (e.g., an Airbnb clone). With Canvas Pages, we are trying to give you cake and let you eat it – with a few clicks, you can customize each page you need while adhering to a consistent set of standards, so your app looks and works great but fits your unique blueprint.

For example, let’s say you’re trying to create a basic version of a marketplace. You probably need at least 3 pages (in addition to the pages that already come with Canvas, like the homepage, settings page, and owner’s portal):

1. A search page that allows users to search for products based on various criteria
2. A profile page for a product that shows some basic information about the product, reviews, and other relevant products
3. A private portal for a user, where they can manage their products & purchases

To build that UI through Canvas Pages, you will do the following:

1. Add this page with this group
2. Add this page with this group and this group
3. Add this page with this group

Note that Canvas Pages is primarily meant for UI at this point, meaning that if you add a “reviews” group to a page, you’ll also have to set up the workflows and database that are required to make reviews work. That’s because reviews are likely to need to work differently across different applications. However, some navigation/visual logic is already included in the pages.

Each page and group costs a certain number of credits that you purchase. Pages and groups are licensed per app, so once you buy one for an app, you can use it in that same app as many times as you’d like.

Here’s a short video that shows how Canvas Pages works. Please feel free to comment on this thread with any questions or page/group requests. We plan to continuously update our library with the most highly requested assets.

Thanks!

Vlad
AirDev

[stephanie]

As a thank you to all the support we’ve received from the Bubble community, we are giving away 3 credits to all new users (and existing Canvas users). Feel free to try out Canvas Pages and let us know what you think!

Stephanie
AirDev

[timgarrett111]

This is a very exciting!

I actually think you are solving a massive pain point in the bubble ecosystem. Over the last year I have struggled with design and I would say spent 35% of my time fiddling and trying to develop Concepts around graphical design and layout for my app.

As a complete novis and no understanding of programming or development when I first started a year and a half ago this would have been an absolute godsend! as I quite often finding myself getting dragged down a hole I’ve design and not programming. (Hopefully you understand what I mean here)

Even to this day I struggle with design and my journey on development with bubble.

I’ve not had a chance to look in detail yet but is it possible to apply these templates to existing pages?

I will take a deeper dive tomorrow and i really appreciate all your amazing input into the bubble community.

Kind regards

[ahaller]

Thanks for the input @timgarrett111! Would love to get your feedback after you take it for a spin, so we can improve the flow.

To answer your question, Canvas pages can only be added to apps you’ve created through Canvas, and Canvas groups/modules can only be added to pages you’re creating through Canvas. The reason for this is because everything relies on the underlying set of styles and dimensions in the Canvas app — putting them into another app would create lots of Bubble issues and mess with responsiveness. So it’s a bit of a limitation if you’re trying to add to an old app, but Canvas has lots of goodies out of the box so it’s a great way to start something new (it’s what we use).

Looking forward to your feedback!

[peter]

to be honest this may bring me back to bubble. i’m afraid bubble has completely fallen behind responsive design and needs a massive rethink. bubbles strengths are its logic, authentication and database model but its design side is too flexible so you spend ages on design issues that come out of the box using css frameworks.

[ahaller]

Let us know how you find the experience @peter. I’d be really curious to hear whether it fills the gap you’re describing or still falls short. Thanks!

[stephanie]

Hi all,

Some of you may have noticed previously that when switching between the tabs in the Canvas portal the texts sometimes overflow the containing groups. This is due to a bubble bug with collapsing groups which bubble just pushed a fix for today. Hopefully this improves the user experience and makes it easier to read the content.

Enjoy and let us know if you find Canvas Pages useful!

Stephanie
AirDev

[stephanie]

Hi Bubblers,

We’ve released a new group called Instagram Tiles Group. Let us know what other groups you think would be useful to you and we will add those groups from our end. Thanks again!

Create your fully-responsive pages today at AirDev Canvas.

[louisadekoya]

Canvas Pages with Groups are the closest thing to the prepackaged reusable elements I mentioned here.

I bought some credits and created a page with a group the other day and the process was very slick. Very well done.

Page/Group suggestion: A page and/or groups for Post and Comments would be useful I think - you know, with a section for the main post and a repeating group for comments on that post.

[stephanie]

Hi Louis,

Thank you! That is a great suggestion! I’ll add that to our list of upcoming releases. In the next couple of weeks, we will be adding more groups - including fully functional widgets like chat, discussion board, and etc. Stay tuned!

[seanhoots]

Hi @stephanie,
Here is a widget/group feature request.
It will be very useful if you guys could implement a horizontal repeating group that scrolls offscreen. I know you can set a repeating group to horizontal but it still doesn’t give the effect that you see on most mobile apps horizontal grid scroll.

See the below examples from Facebook and YouTube to get what I mean.
It’s something I’ve seen asked several times on this forum and I find myself needing it.

Facebook android App:

Youtube android app:

One thing to know about this feature is that, on page load one of the items to the far right is always showing to the very edge of the screen to give the user the clue that there is more elements and you can scroll. Once you scroll.
When you scroll left the left element will also be at the edge of the screen.
You will get what i mean when you try it the facebook or youtube apps.
You can’t just achieve this behaviour with the default horizontal repeating group.

I’ve tried several tricks trying to do it natively in bubble but haven’t succeeded yet.
I’m beginning to think maybe some css has to be used to modify the repeating group to have the effect.
If anyone can pull this off in an efficient way I believe its you guys are one of them.

Will love to get this as an airdev canvas widget.

So do it for us.

Thanks

[stephanie]

Hi Sean,

We’ve done this before on a few of our client apps. I’ll add this to our list for the next release Will keep you posted!!

Stephanie
AirDev

[stephanie]

Hi @seanhoots,

We just released a group that we use a lot to get this similar effect - Please see forum post here. Thanks!

[seanhoots]

Perfect @stephanie. Thanks for this.
I will definitely be using it soon on some projects i’m working on.

[stephanie]

Hi Bubblers,

We made some updates to the UI of Canvas Pages (original forum post here) and would like to share our latest updates with all of you:

1. Minor UI updates to the Canvas Page Creator so you can easily add groups to your page

2. New group widget for 5 Column Data Table with Sorting Fields - Click on specific a header field in order to sort the list by ascending or descending order

Enjoy!

Best,
Stephanie

[louisadekoya]

Nice update @stephanie. I have a request/suggestion, please. Would it be possible to get a Canvas-friendly version of the “browser-like tabs” widget - as a page/group(s)?

If so, can I also suggest that at mobile width, the vertical RG “RepeatingGroup Profiles” be replaced by a horizontal one? It’s a really good widget but I think it could use some canvas love

Thanks,
Louis

[stephanie]

Hi Louis,

Sure thing - we’ll add this to our list! I’ll let you know when we release the canvas-friendly version
Thank you again for your feedback!

Stephanie
AirDev

[louisadekoya]

Thanks, @stephanie.

[rico]

I am excited to learn about Canvas Pages. What is involved in converting an existing application to be used in Canvas Pages?

[stephanie]

Hi @rico,

The best way is to rebuild your app using one of our templates as your base app. It’s a little bit tricky to convert an existing application to be used in Canvas Pages because a lot of the modules from Canvas Pages are optimized for our templates. Each of our templates come with Canvas styles and existing database structure. When you try to add a module from Canvas Pages to your app, your app will not have the styles or data objects and it would throw a bunch of errors.

As a first step, we recommend that you try out our free Canvas Starter Template and watch our Canvas Pages tutorial.

Enjoy!

Best,
Stephanie
AirDev