App Builder
A visual design canvas for assembling a custom screen from a component palette — no coding required. Click to add a form, an input field, a button, or a badge, arrange them, and save the result as a reusable app.
What Is App Builder?
App Builder is where you assemble a custom screen by hand, one component at a time, using nothing but clicks. Instead of describing what you want to a developer and waiting for a new page to be coded, you open a palette of five component types, click the ones you need, and watch them appear in a running list that becomes your screen's design.
Every design you build is saved as a named app — a small, reopenable blueprint you can revisit, keep editing, and eventually place into your own navigation menu using Menu Builder.
In one sentence
App Builder turns "I need a small custom screen" into a five-minute, click-only task — no waiting on a developer, no writing a single line of code.
The Three-Panel Layout
App Builder's screen is split into three working areas side by side:
Components (left)
A palette of five clickable component types: Form, Input, Button, Badge, and Table. Clicking one adds it to your design canvas immediately.
Canvas (center)
Your app's name and description fields, followed by the running list of components you've added — the design itself, in the order you assembled it.
Saved Apps (right)
Every app you've saved so far, most recently updated first. Click one to reopen it and continue editing.
Building a Screen, Step by Step
| Step | What you do |
|---|---|
| 1. Click "New App" | Clears the canvas so you can start a fresh design. If you were editing an existing app, this does not affect it — it's still saved and available under Saved Apps. |
| 2. Add Components | Click any component in the left palette as many times as you need. Each click appends it to the bottom of your design — there's no drag-and-drop, just click-to-add. |
| 3. Name & Describe | Give your app a name (required) and an optional description so you — and anyone browsing Menu Builder's screen picker later — know what it's for at a glance. |
| 4. Save App | Click "Save App". Your design is stored and immediately appears at the top of the Saved Apps list on the right. |
The Save button won't let you make a mistake
"Save App" stays disabled until you've typed a name — there's no way to accidentally save an unnamed, un-findable design.
The Five Components You Can Add
| Component | What it's for |
|---|---|
| Form | A container that groups the rest of your components together. Every app is wrapped in one automatically when saved. |
| Input | A single labeled field for showing a piece of information — a name, a number, an ID. |
| Button | A clickable action, like "Confirm" or "Submit". You choose its color role — see below. |
| Badge | A small status pill, useful for showing a state like "Approved" or "Pending" at a glance. Also has a color role. |
| Table | A placeholder for showing a list of rows — reserved for screens that need to display more than a handful of fields. |
Color Roles for Buttons and Badges
Button and Badge components let you pick a color role from a small dropdown right next to them in the canvas: Primary, Secondary, Success, or Danger. These are roles, not literal colors — the actual shade shown is resolved by TotalApp's current theme, so your app looks correct whether your workspace is in dark, light, or any other theme.
Removing a component
Hover over any component in the canvas list and click the trash icon that appears to remove it — components can be removed in any order, not just the last one added.
Editing an App You Already Saved
Click any app in the "Saved Apps" list on the right to reopen it. Its name, description, and full component list load back into the canvas exactly as you left them. Make your changes and click "Save App" again — because you're editing the same app rather than starting a new one, your changes update it in place instead of creating a duplicate.
AI Assistant
App Builder has its own AI Assistant panel, opened from the right edge of the screen. It reads the app's current name, description, and full component list on the canvas, and helps you refine your design without leaving the builder. Example prompts:
Where App Builder Fits
App Builder only designs — it does not, on its own, make your app reachable anywhere in TotalApp's navigation. That's the job of its companion tool:
| Tool | What it adds |
|---|---|
| Menu Builder | Lets you create a custom navigation menu and place your saved App Builder apps into it, so your team can actually open and use the screens you designed. |
A saved app is a draft until it's placed in a menu
Saving an app in App Builder keeps it available for editing and reuse, but it stays invisible to everyone else until you add it to a menu in Menu Builder. Design first, then place — see the App Factory overview for the full picture.