Visual Designer
The Designer is where you build in Loopar: a drag-and-drop canvas over the document's structure. Every Builder opens one โ an Entity designs its fields and form, a Page Builder its web page, a View/Form Builder its views. What you design is the entity's structure: a JSON tree of elements that Loopar turns into database columns, forms, and rendered pages.
The Workspace
| Zone | What it does |
|---|---|
| Header | Document name, unsaved-changes indicator, draft-conflict banner |
| Toolbar | Undo ยท Redo ยท Design/Preview toggle ยท META ยท Design AI |
| Canvas | Your structure, rendered. Click an element to select it, drag to move it |
| Right sidebar | The element palette โ or the Element Editor when an element is selected |
The sidebar also carries quick actions: undo/redo, mode toggle, Save and close.
Three tabs
| Tab | Purpose |
|---|---|
| Designer | The visual canvas |
| META | Read-only view of the structure's JSON |
| Clean | (Entities) manage orphan database columns |
Palette & Drag-and-Drop
The palette groups every element by family โ the same taxonomy as the Components reference:
| Group | Examples |
|---|---|
| Layout | section, row, col, card, tabs, panel, banner |
| Design | title, paragraph, image, markdown, button, feature_card, collection |
| Form | input, select, switch, date, currency, form_table, image_input |
Drag an element from the palette into the canvas. Containers accept children according to each element's droppable rules โ a col goes inside a row, a tab inside tabs, and so on. Drag elements within the canvas to reorder or move them between containers.
On an Entity, every Form element you drop becomes a database column when you save โ name it in the Element Editor and Loopar handles the schema migration automatically.
Selecting & deleting
- Click an element to select it โ the sidebar switches to the Element Editor.
- Delete asks for confirmation before removing the element (and its children).
Keyboard
| Shortcut | Action |
|---|---|
Ctrl/Cmd + Z | Undo |
Ctrl/Cmd + Shift + Z (or Ctrl + Y) | Redo |
Undo history covers every structural change: drops, moves, deletions and property edits.
Element Editor
Select any element and the sidebar becomes its property editor โ the header shows the element type and its key. Properties are organized in tabs:
| Tab | Contents |
|---|---|
| Content | Label, text, name, options โ what the element says |
| Style | Classes, spacing, colors, sizing |
| Animation | Entrance animation, delay, duration |
| Advanced | Visibility, custom attributes |
| (element-specific) | Some elements add their own groups โ e.g. collection adds its data source props, form fields add a Form tab with required, unique, format and a live Default value control |
Edits apply live: the canvas updates as you type, and every change lands in the undo history. Switching between elements never leaks values from one to another.
Naming form fields
For Form elements on an entity, name is the column name (snake_case). The format property on input (email, int, decimal, currency, date...) controls both validation and the column type โ see Fields & Components.
Modes, Drafts & Saving
Design โ Preview
The toggle switches between:
- Design โ canvas editable, drag-and-drop active.
- Preview โ the structure renders exactly as end users will see it, interaction included.
The mode is remembered per document, so you come back where you left off.
Local drafts
Your work-in-progress is kept as a local draft โ close the tab and your unsaved changes survive. The header shows an Unsaved changes dot until you save.
If the server content changed since your draft (someone else saved, or an app update ran), the Designer shows a conflict banner: Restore anyway applies your draft over the new server content; Discard drops it.
Saving
Save persists the structure to the document. On an Entity this is also the moment Loopar migrates the schema: new form elements become columns, changed formats alter them โ no migration files, no SQL.
Saving through the UI also bumps the owning app's version automatically, so the change travels with the app installer.
META & Design AI
The META view and button
The META tab shows the live JSON of your structure โ useful to understand what the canvas is producing, copy it between documents, or debug.
The META toolbar button goes further: paste a complete JSON structure and it replaces the current one (validated before applying, and undoable like any other change). That's the fastest way to move a design between entities or restore a snippet from the docs.
Design AI
The Design AI button opens a prompt dialog โ describe what you want:
"Generate a form that allows me to manage inventory data"
and the assistant produces a structure that lands on the canvas, ready to adjust. Two backends are available in the dialog: the GPT integration (server-side, needs an OpenAI API key configured) or Gemini local, which runs in your browser.
Clean โ orphan columns (Entities)
When you remove a form element from an entity's structure, its database column stays behind (your data is never dropped silently). The Clean tab lists these orphan columns and lets you decide per column:
| Action | Effect |
|---|---|
| Restore | Bring the column back into the structure |
| Release | Keep the column and its data, drop its constraints |
| Drop | Delete the column permanently โ data is lost (explicit confirmation) |