Audience: User
The page builder is LokAkrt’s visual editor. You arrange components on a device canvas, configure properties, wire actions and data, and refine responsive styles.
The same builder shell edits project pages, global pages, templates, and blocks. Only pages use the draft / publish workflow.
| Role | Purpose |
|---|---|
| Content author | Day-to-day layout and copy |
| Power user | Data binding, actions, advanced properties |
| AI-assisted author | Combine manual edits with the AI assistant |
| Region | Purpose |
|---|---|
| Canvas | Interactive preview inside a device frame |
| Device switcher | Mobile, tablet, desktop |
| Build (right) | Layout (structure), Insert library (elements + blocks), Health issues |
| AI (right) | Natural-language compose and refine |
| Properties (left) | Element (Content / Style / Data / Behavior) and Page (or Template) |
| Page → Properties | Title, slug, page access, theme overrides |
| Page → Versions | Your named drafts plus shared published tip; Save, pin, preview, publish (pages only) |
| Page → History | Published revision restore only — not autosave, not private drafts (pages only). Shows who and by hand vs from a run |
| Toolbar | Undo/redo, reload, devices, command palette (⌘K), shortcuts (?), Preview, Save, Publish |
Autosave silently keeps your working copy; Save shares the pending set with teammates; named drafts under Versions stay yours until you publish; Publish updates the live tip and adds a History point. Details: Preview & Publish · Working together.
📷 Page builder overview
Image Path:
images/page-builder-overview.png
Alt Text:
Page builder with device canvas, properties panel, and toolbar
Caption:
Main page builder workspace.
Expected result: The selected element highlights; properties apply on the canvas.
Tip: Prefer small incremental edits; for pages, save drafts often.
Expected result: New elements appear in Layout and on the canvas.
Expected result: The mobile client enforces the access rules you configured.
Best Practice
Design mobile-first. Most Ionic apps are phone-primary.
If a binding looks blank or wrong in preview, check expression roots and prop value shape in Values and bindings. Dataset UI: Datasets · Data Sources.
click on a button, change on an input).lkt-form host — not the submit button. Submit buttons use click + submit-form.Event names and JSON shapes: Actions and validators.
See AI Assistant · Working together.
📷 AI assistant in the builder
Image Path:
images/page-builder-ai.png
Alt Text:
Page builder AI tab with a prompt and resulting canvas update
Caption:
Using the AI assistant to compose page changes.
See Blocks.
| Problem | Cause | Solution |
|---|---|---|
| Canvas empty | New page / wrong selection | Insert elements or start from a template |
| No Versions tab | Template or block | Direct save only; pages have Versions/History |
| Property missing | Element type differs | Confirm selected component type |
| Styles “don’t stick” | Wrong breakpoint | Switch device and re-apply |
| Data not showing | Binding or empty source | Check Data mapping and records |
| Leave warning | Unsaved builder changes | Save or discard intentionally |