App Pages UI Editor

The App Creator UI Editor is a powerful, visual tool for designing mobile app interfaces. It features a drag-and-drop system, allowing you to easily add, arrange, and customize UI components. The editor supports three view modes—Edition, Drag & Drop, and Preview—allowing you to simulate different languages for testing multilingual apps and running data flows.

The different sections

Simulated Language

Simulate different languages to preview how your app will appear to users in various locales. Languages are configured in the Multi-Language Editor.

View Modes

App Creator offers three view modes for different stages of development:

Edition Mode: Edit component properties and settings.
Drag & Drop Mode: Easily move components around the canvas.
Preview Mode: Simulate the app and execute the data flow for rapid testing. This mode allows you to interact with the app as a user would.

UI Component List (Second to Right Panel)

The component list is organized into categories for easy access:

Layout: Components like Card, Buttons, Menu, List, Tabs, Toolbar...
Text and Images: Components like Image, Paragraph, Title, Icon, Label, and SVG.
Data Display: Components like Area Chart, Bar Chart, and Grouped Bar Chart.
...

Drag a component from the list and drop it onto the canvas to add it to your page.

Canvas (Center Panel)

The canvas is where you design your app's UI. You can:

Add Content: Click the ADD CONTENT button to insert new components or using drag & drop from the UI Component List Panel
Edit Content: Click on any component on the canvas to edit its properties. The UI Component List Panel is replaced by the selected Component settings Panel.
Remove Content: Delete or replace existing components.
Move Up/Move Down: Move up or down UI elements
Copy/Cut: Open the context menu on a UI component (using right click) to copy/cut/paste a UI component.