Using the App Builder

Start an app

Pick one of ten starter apps, each with its tabs, screens and content already wired, or choose your tabs in the short wizard to get an empty app shell. A starter link from this site (for example Bookings) opens the App Builder with that starter already built, as long as your canvas is empty; saved work is never replaced by a link. The first time you open the App Builder, a four-step tour shows you how to move, add and connect.

Add a screen

Open the New Screen menu and pick a single-screen template: login, settings, chat, a list, a detail screen, a board and many more. Then draw an arrow to it from the screen that opens it, so the app can reach it. Or draw the arrow first: drop it on empty canvas and a new screen appears there, connected and ready to name.

Edit blocks

The Blocks panel names every block in plain words, grouped by what it is for, with the ones people use most at the top. Its search forgives a typo and knows everyday words, so “on off” finds the Switch.

Drag a block onto a screen, or click it to add it to the selected screen. Drag a block to move it, and pull its side handle to make it a third, a half or two thirds of the row; blocks placed side by side stay side by side in the generated screen. Select a block to edit its words, images and options in the side panel. The command menu (Cmd K or Ctrl K) finds any screen, block or action by typing.

Select several blocks

Shift-click (or Cmd-click, Ctrl-click) blocks to build a group, drag a box from a screen’s background across the blocks you want, or press Cmd A (Ctrl A) for every block on the screen. The side panel lists the group and lets you take one out.

A group moves as one: drag it to another row or onto another screen, and any arrow a block carries goes with it. Up and Down move it a row at a time; Cmd D duplicates it, Cmd C and Cmd V copy and paste it, and Delete removes it. Each of these is a single undo.

Tidy up the canvas

Tidy up lays your screens out in the order people move through them: the first screen, then the tabs in a row, then the screens each tab opens. It is in the bar under the canvas, in the command menu and on Ctrl Alt T. It is one undo, and it tells you when there is nothing to move.

Preview it

Switch the canvas between iOS and Android to see each platform’s tab bar and controls, and use Preview to tap through the app the way it will run: follow arrows, switch tabs, go back.

Saving

Your canvas saves in this browser as you work, so a reload never loses it. When you sign in, projects save to your account instead and open on any computer.