Blocks Editing Tip: Arranging and collapsing blocks in the editor

As you develop your App Inventor program using the Blocks editor, do you find your blocks overlapping and crashing in to one another on the screen? You know, like this:


You can drag the blocks on the screen so they no longer overlap, but dragging each block is tedious (time consuming). But there is an easy way to automatically re-arrange the blocks.

  • Move the mouse pointer to any part of the white space outside the blocks
  • On Windows, right-click the mouse button
  • On Mac OS X, press Ctrl and click the mouse button

A pop up menu appears with several options to automatically arrange the blocks:

Screen Shot 2015-01-28 at 3.17.02 PM

The first option “collapses” each block into a single line:

Screen Shot 2015-01-28 at 3.20.17 PM

You can right-click again and choose Expand Blocks – or you can right click on individual collapsed blocks to display a pop up menu and an option to expand only the selected block. (You can also right click on a block and collapse individual blocks of code.)

To arrange the blocks into a vertical order, select the Arrange Blocks Vertically option. The block are then arranged into a vertical column up to the maximum number that fit on the screen in your browser window. If there are more blocks (and there always are more blocks!), the additional blocks will appear in vertical columns to the right. You may have to use the scroll bars to see where the blocks were relocated!


Arrange Blocks Horizontally places the block groups across the screen:


This tip may make your programming more productive – now, whenever your blocks get too crowded on the screen, let App Inventor’s Blocks editor automatically re-arrange the blocks for you.

(The example code is meaningless – do not try to use this code. This code is an old experiment on Bluetooth – a new and expanded version of this will be published here soon.)

Bonus Tip!

You can use the “zoom” feature of your browser to zoom in and out of the viewing area in the Blocks editor – this feature enables you to view more blocks on the screen at the same time!

On Chrome, (shown here from Mac OS X), select Zoom out to display more blocks on the screen.

Screen Shot 2015-01-28 at 4.22.39 PM


Firefox (on Mac OS X) – use the View menu and then the Zoom option:

Screen Shot 2015-01-28 at 4.25.47 PM

4 thoughts on “Blocks Editing Tip: Arranging and collapsing blocks in the editor”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.