Add Search Bar to Blocks Editor for Faster Navigation

Open Source Development
, ,
1

Overview

The Blocks editor currently lacks a search functionality, requiring users to manually navigate through multiple categories (Control, Logic, Variables, etc.) to locate specific blocks.

While this approach works for small projects, it becomes inefficient and time-consuming as project complexity grows.

Problem

  • Manual navigation slows down development
  • Difficult to locate specific blocks in large projects
  • High cognitive load, especially for beginners
  • Inconsistent UX compared to the Designer, which already provides a search feature

Proposed Solution

Introduce a search bar in the Blocks editor (similar to the Designer search bar) that allows users to quickly find blocks by name, functionality, or associated component.

Screenshot 2026-03-24 at 12-58-01 MIT App Inventor.png323×878 26.3 KB
Screenshot 2026-03-24 at 12-58-17 MIT App Inventor.png292×878 17.9 KB

Left: Designer search (existing) | Right: Blocks editor (no search)

Suggested Features

  • Real-time filtering of blocks based on search input
  • Support for both built-in and component-specific blocks (e.g., Button1.Click)
  • Fuzzy matching for partial or approximate queries (e.g., "speak" → TextToSpeech blocks)
  • Highlighting or preview of matching blocks
  • Clicking a result scrolls to the block or inserts it into the workspace (optional enhancement)

Benefits

  • Faster development workflow
  • Improved usability for large-scale projects
  • Better accessibility for beginners
  • Consistent user experience across Designer and Blocks editor

Additional Context

The Designer already includes a search feature for components, which significantly improves usability. Extending similar functionality to the Blocks editor would provide a more cohesive and efficient development experience.

Open Questions

  • Should search results replace the toolbox temporarily or appear as an overlay panel?
  • Should selecting a result auto-insert the block or just navigate to it?

I’d be happy to contribute or help explore implementation approaches if this feature is considered valuable.

2

Have you tried the Text blocking feature yet?

3

Thanks for pointing that out!

Yes, I’ve tried the text block search (Ctrl + F), and it’s helpful for finding blocks already placed in the workspace.

However, my suggestion is slightly different — it focuses on improving block discovery within the toolbox itself.

Currently:

  • Ctrl + F helps locate blocks that are already used
  • But it doesn’t help when trying to find a block that hasn’t been added yet

The proposed search bar would:

  • Allow users to search across all available blocks (including component blocks)
  • Reduce the need to manually navigate through categories
  • Improve usability especially in larger projects

So this would complement the existing feature rather than replace it.

Would love to hear your thoughts on whether this distinction makes sense.

4

Typeblocking is a different feature than the block workspace search (Ctrl+F). Click on the workspace, and then begin typing the text of a block (e.g., sort). You will get a dropdown of all the blocks that match. It is also locale aware, so people using App Inventor in another language can search the translated blocks list.

1 Like
5

from

6

Got it — thanks for pointing me to typeblocking, that helped clarify things.

What I’m thinking of is slightly different:

Right now, typeblocking shows text-based suggestions when typing, but users don’t see the actual block structure until they insert it.

It might be helpful if the suggestions also included a visual preview of the corresponding blocks, so users can:

  • Quickly recognize the block visually
  • Understand its structure before inserting it
  • Reduce trial-and-error, especially for beginners

I’m planning to experiment with a small prototype by building on top of the existing typeblocking system to see how this feels in practice.

Would love to share results once I have something working.