Neo UI redesign — a work-in-progress demo, feedback wanted

[preetvadaliya]

Hi everyone,

I'm Preet Vadaliya. Some of you may remember me — I contributed to App Inventor a few years ago and was a GSoC contributor (2021). I've been away from the project for quite a while, and this is my way of coming back.

Over the last weeks I've been reworking the Neo layout so that it feels like one consistent, modern design system rather than a restyled classic. It follows the shadcn/ui "nova" pattern: a small set of design tokens, a set of UI primitives (buttons, fields, dialogs, menus, toasts…) and screens composed from them, with Tabler icons for every component. All of it lives under style/neo and goes through a handful of hooks in the core, so the classic layout keeps working unchanged.

What's in the demo so far:

• Project list, folders and the project toolbar

• The designer: project bar, palette (with an extension drop area), viewer with real device frames (phone / tablet / monitor, Android and iOS), component tree, properties panel with new property editors, Media dialog

• Redesigned dialogs and wizards (new project, project properties, UI settings, …)

Try it: https://appinventor-neo.uc.r.appspot.com — sign in with any Google account. It's a plain App Inventor instance running my branch; there's no build server behind it, so Build → .apk won't work, but the Companion connects normally.

It is not finished. Some screens and dialogs are still classic or half-done (blocks editor chrome, several build/connect dialogs, the template gallery, the admin pages), and you'll find rough edges. That's exactly why I'm posting now: I'd rather hear early what feels right and what doesn't than polish in the wrong direction.

Feedback I'm especially looking for:

1. Does the designer layout (palette · viewer · tree · properties) work for you in daily use? Column widths, spacing, readability?

2. Property editors — anything that got harder than in classic?

3. Dialogs: heading + body + footer on every dialog, inline validation instead of alerts — good or annoying?

4. Anything that looks unfinished or inconsistent — screenshots welcome.

To be clear about intent: this is not a commercial project and never will be. The demo instance exists only to collect feedback; nothing is monetised and I'm not building a product on top of App Inventor. If the response is positive, my goal is to bring the work back into App Inventor itself — I'll write the usual design doc and split the branch into reviewable pull requests with the MIT team's guidance.

Thanks for looking, and please be blunt.

Preet

[Patryk_F]

I think you could add another layout—for example, named "Modern"—and leave "Neo" as it is.
I also think that if someone has a lot of projects, a list is better than tiles.

[TIMAI2]

@preetvadaliya

sign in with any Google account

Would need you to provide one!

No code2 type sign in ?

[preetvadaliya]

@Patryk_F thanks for the feedback yes it is already in my list of todo.

[preetvadaliya]

@TIMAI2 sorry for that but I was in hurry so I just deployed quickly before thinking .

[natalie]

Hi Preet,

Great to see you back! This redesign looks great. I agree with @Patryk_F ‘s comment about adding it as another layout option instead of replacing Neo. That would be easier for teachers to manage since a lot of curricula and screenshots were just redone for Neo.

I love the “Test on my phone” dropdown button. I can see “Test on web emulator” being super easy to add/find that way once it’s formally released.

Small nitpick: the selection bounding box on the button in the screenshot below doesn’t quite match the actual button size. (I am on Chrome if that makes a difference). I haven’t tested all of the components, but am seeing the same thing for DatePicker, ListPicker, TimePicker, Textbox…etc.

[Patryk_F]

A nice option is the horizontal phone preview without changing the orientation in Screen1.
A very nice and compact look for the color editor in the designer.
An excellent media manager.

Bug: The extension selection window has no background.

[Peter]

I really like this design. This is what I got in the blocks editor.

[AkshatRana]

I loved the user interface... Kudos @preetvadaliya .
However, I have a few suggestions:

1. Try making the width of all ode-boxes adjustable
2. Move these helper texts to tooltips:
   
   

I know that this design is in its initial phase; these were just my suggestions. I am sure that you'd improve this design in coming releases.

[preetvadaliya]

@karlang thank you, it is still work in progress ui and definitely i will add the list view.

[preetvadaliya]

@natalie thanks for the feedback, I haven’t started working on the Screen editing and how better we can preview the mocks but sure that is next target, want to make them as much as similar to actual device

[preetvadaliya]

@Peter App Inventor is planning to blockly update so i am not touching that part but yeh this black UI is CSS but will fix that.

[preetvadaliya]

@AkshatRana good noticed, will improve it

[ABG]

I'm getting snow blind.

[Peter]

This is the neo interface on the latest App Inventor version.

This is the same project with your new UI.

The settings are the same. Responsive sizing. The squares are buttons in a number of layouts.

[Peter]

@ABG There is a dark setting.

I really like this theme. It looks really professional. And indeed it should get it's own name like "Modern" as @Patryk_F suggested.

[Peter]

This is the window when loading an extension:

I guess it should look something like this.

[ABG]

@Peter

is a dark setting.

I could not find it in the snow.

[ABG]

While you are redesigning, my pet peeves ...

When I add a new Label, Button, or Textbox, I hate having to scroll down to the T's to get to the Text attribute.

That's 20% of the effort for 80% of the result in planting a new component.

You already have attribute subclass sections.

Add a new one 'data' for the Text and pure content attributes that affect the code only.

[davidefa]

One thing should be addressed, I think, in the designer is that, apart from the icon, there is no reference to the original component, and when a user renames it without a suitable prefix/suffix ( or names it in his own language ) it is not that evident what is the base component

You added an help icon on the right, which is good, I’d add the component base name, in parentheses, beside the component name ( or a tooltip… )

P.S.

This is true also for the original designer