App Builder Overview — Panels, Toolbar & Layout
A complete guide to the App Builder interface — the 3-panel layout, sub-toolbar controls, block palette, phone canvas, properties inspector, Brand Kit, and multi-page support.
What is the App Builder?
The App Builder is MobiDrag's visual editor where you design every screen of your mobile app — no code required. Drag blocks onto a phone canvas, customise their settings in the side panel, and see the result instantly in real time.
Everything you design here — layouts, colours, fonts, content — is what your customers will see when they open your app on iOS or Android. There's no gap between what you build and what gets published.
The 3-Panel Layout
The App Builder is split into three panels that are always visible on screen:
| Panel | What it's for |
|---|---|
| Left | Browse and pick blocks to add to your app |
| Center | Live phone preview — see and reorder blocks |
| Right | Edit the settings of the selected block |
The Sub-Toolbar (Builder Controls)
Below the top navigation is the builder-specific toolbar. This controls your entire editing session and is split into three zones:
Left — Mode switcher
| Button | What it does |
|---|---|
| Builder Mode | Default view — full block palette and canvas editing |
| App Navigation | Design your menus (bottom nav, side menu) |
| Brand Kit | Set global colours, fonts, and icons for your whole app |
Center — Page selector & Undo / Redo
- 1Page dropdown — switch between screens (Home, Products, Cart, etc.)
- 2Undo — reverse your last action (Ctrl + Z / Cmd + Z)
- 3Redo — redo an undone action (Ctrl + Y / Cmd + Shift + Z)
Right — Save, Preview, Publish
| Button | What it does |
|---|---|
| Save (disk icon) | Saves your layout and creates a version snapshot |
| Preview (eye icon) | Opens your app in full device preview mode |
| Publish | Takes you to the publishing flow for App Store / Play Store |
Left Panel — Block Palette
Your library of all available blocks. Each card shows a live visual preview so you know exactly what you're adding before it lands on the canvas. Use the Search here... bar to filter blocks instantly by name.
How to add a block to your app
- 1Find the block you want in the left palette
- 2Click and hold the ⠿⠿ drag handle (6 dots, top-right of each card)
- 3Drag it over the phone canvas in the center panel
- 4Release to drop it into position
Center Panel — The Phone Canvas
Shows your app inside a phone frame — exactly as customers will see it on their device. Every edit reflects here instantly. No save required to preview a change.
Block actions (hover over any block)
| Icon | Action |
|---|---|
| ⠿⠿ Handle | Drag to reorder the block up or down |
| Copy | Duplicate the block |
| Trash | Delete the block |
| Edit (pencil) | Open that block's settings in the right panel |
Right Panel — Properties Inspector
When you click any block on the canvas, its settings appear in the right panel. Changes apply live — no need to save to see them take effect on the canvas.
In the screenshot above, the Header block is selected — showing layout options (Left / Center / Right), logo content, background colour, Sticky Header toggle, and Bottom Divider settings.
Brand Kit Mode
Brand Kit is a global styling layer. Set your brand colours, fonts, and icons once and they apply automatically across your entire app — no need to update each block individually. Click Brand Kit in the toolbar to enter this mode.
| Area | What you configure |
|---|---|
| ✓ Colors | Page background, header, text, nav, and accent colours |
| ✓ Typography | Font families, sizes, and weights |
| Icons | Icon style used throughout the app |
| Brand Assets | Logo, splash screen, and app icon images |
Multi-Page Support
Your app has multiple screens. Use the Page dropdown in the toolbar to switch between them and edit each one independently.
Global blocks
Header, Bottom Navigation, and Side Navigation are shared across all pages. Edit once, updates everywhere. This ensures consistent navigation throughout your app.
Page-specific blocks
Content blocks (Hero Banner, Product Grid, Text blocks, etc.) only appear on the page they were added to. Each page can have a completely different layout.
Keyboard Shortcuts
Standard keyboard shortcuts work throughout the App Builder to speed up your workflow:
Ctrl + Z / Cmd + ZUndo last actionCtrl + Y / Cmd + Shift + ZRedoCtrl + S / Cmd + SSave current layoutBackspace / DeleteDelete selected blockEscapeDeselect block / close panelCtrl + D / Cmd + DDuplicate selected blockQuick-Start Checklist
Opening the App Builder for the first time? Follow this order for the fastest path to a complete, on-brand app: