[Epic] Anvil: next generation responsive UI Builder

[areyabhishek]

Focus on solving a problem, not on tinkering with UI. Create professionally looking, responsive, accessible UIs faster than ever before — while keeping them easy to maintain and scale.

What is Anvil

Anvil is a working title for the next generation UI building experience at Appsmith, powered by fully fledged widget design system and intent-driven layout assembling. We are rethinking our UI editor from scratch to ensure engineers can iterate quicker and focus on business logic, not on tinkering with UI.

Read more about Anvil here: https://community.appsmith.com/content/blog/anvil-unveiled-forging-future-ui-building

FAQ

What is the difference between auto-layout and Anvil?

Auto-layout was our first attempt on supporting creation of responsive apps. While Anvil includes some of the mechanics that proved to be valuable in auto-layout — such as intent-driven placing of widgets, wrapping, and automatic width distribution, — Anvil is much more than auto-layout.

Why is Anvil a standalone feature and not an update to auto-layout?

Anvil could not be built without significant investment in layout and widget architecture to support its advanced features. Some of the changes could not be made backwards-compatible.

What will happen to auto-layout?

We plan to sunset creating new auto-layout apps, but all existing auto-layout apps will keep working in the foreseeable future.

Will existing apps be automatically converted to Anvil?

They will not. We will ensure that all existing apps will continue working as is even when Anvil is publicly available and becomes the default option for creating new apps.

[somangshu]

Related issue > #1043

[pierredewilde]

Since October 2020, mobile market share is larger than desktop: https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet

It is critical to support mobile in appsmith_ apps. Thank you.

[abhvsn]

A user on discord requested a feature which might be related to this epic https://github.com/appsmithorg/appsmith/issues/11154#

[cverdes]

Perhaps a possible alternative is tu be able to define different coordinates and sizes for the in page widgets for different canvas sizes. Or let the coordinates and sizes of each widget be defined by JavaScript formulas using the current size of the canva. Just ideas...

[somangshu]

@cverdes thanks for the inputs, With the first point, Did you mean we could introduce breakpoints and develop on them separately, That the easiest fix we too are thinking of right now. Let me know if you mean otherwise

[cverdes]

The idea is to do something similar to how Microsoft Power App handles responsive layouts. The scripts have access to App.Width and App.Height to know the canvas size and Parent.Width and Parent.Height in case the widgets is within a container. With this information, and letting to set, by scripting, the values of x, y, width and height of each widget, the user can compute the location an size any widget in any place depending of the canvas size and the cointaner where it is in. Perhaps this link from Microsoft can help to complement my explanation. It's an easy and quick to implement idea that I think can improve the responsive layouts in Appsmith. Best Regards.

[billyrudi]

Hi, there are news about development of this request? it is very important that it is carried out so that you can best use appsmith on industrial terminals in warehouses for example

[Nikhil-Nandagopal]

Hi @billyrudi we haven't begun on this feature yet. You can build an app for a tablet / mobile screen size today but making it responsive on all devices needs some thought from our end

[Nikhil-Nandagopal]

@billyrudi @cverdes @pierredewilde Hey we're now researching this feature. Would either of you be interested in doing a user interview with us about this? You can find a time on my calendar below if you'd like to participate https://calendly.com/appsmith-nikhil/30min?back=1&month=2022-05

[lucasa]

The most wanted Epic :+1:

[Nikhil-Nandagopal]

@lucasa that is because it's an epic epic :) We'd love some feedback from you on what we're building. If you're available for a quick chat, please block some time on my calendar https://calendly.com/appsmith-nikhil/appsmith-meeting?back=1&month=2022-11

[yasharma2301]

Hey @Nikhil-Nandagopal any updates on this feature's timeline? Dropping a conversation I had on Discord community regarding the same here

[Nikhil-Nandagopal]

@yasharma2301 yes we do have some update on this. I'd love for you to block some time on my calendar to get some feedback https://calendly.com/appsmith-nikhil/appsmith-meeting

[mweichert]

Eager to learn more about this feature as well!

[Nikhil-Nandagopal]

@mweichert please do block some time on my calendar if you're interested!

[ame-appsmith]

Another user is interested in this feature.

[jsandona]

I am also interested in this feature.

We have a form for our employees to submit invoices. Some use it from their desktops and others need access from their mobile devices while on the road. Currently my app works well on desktop using the fluid width, but on mobile all widgets are shrunk and become unusable.

[Nikhil-Nandagopal]

@jsandona we'd be happy to give you an early preview of the feature to get your feedback. You can block some time on my calendar below https://calendly.com/appsmith-nikhil/appsmith-meeting

[josh9383]

I would like to contribute to it, let me know how

[BrianJM]

@jsandona we'd be happy to give you an early preview of the feature to get your feedback. You can block some time on my calendar below https://calendly.com/appsmith-nikhil/appsmith-meeting

I'd like to participate in the early preview program. Please let me know if this is possible.

[rohitagarwal88]

Yes, @BrianJM. Please block some time on Nikhil's calendar https://calendly.com/appsmith-nikhil/appsmith-meeting for the early preview.

[richardwhatever]

+1 this please!

[cripsisxyz]

+1 this :)

[natashaooh]

Hey all @pierredewilde @cverdes @billyrudi @lucasa @yasharma2301 @mweichert @jsandona @josh9383 @BrianJM @richardwhatever @cripsisxyz, thank you for your interest in mobile responsiveness! I'm a product manager with the team that owns Appsmith's UI Builder (that's where you drag and drop and move widgets around!), so this epic is our responsibility.

To make building responsive apps truly efficient, we want to go beyond implementing individual features and dive deeper into our users’ needs and context.

That’s why I would love to learn more about your experience of designing and building interfaces (not necessarily in Appsmith). What constitutes a great app building experience? How an app interface is designed, put together, tested and maintained? What are the things that you hate in React/Bootstrap/CSS/any other frontend technology, and would love to finally see done right?

If you have built or worked with custom software in your company, automated a workflow, created a user interface for database management, or streamlined a process in any other way — it doesn’t have to be an Appsmith app! — and are willing to talk about that experience, please book us a slot: https://calendly.com/natasha-lko/ui-building

Real-world experience and insights will shape the future of UI building in Appsmith — we cannot do it without you 🙏