Skip to content

UI Elements for App Development

This guide introduces the two essential UI building blocks in Lucy Studio: Pages and Widgets.

What Is a Page?

A Page is the fundamental screen unit in your app and the base workspace for UI authoring.

Use the Pages panel to organize project structure clearly.

1. Create a Page

You can create a page in two ways.

  1. From the top menu

    Click the main menu (hamburger icon) and choose New Page.

  2. From the Pages panel

    Click the + button in the Pages panel.

Create Page

2. New Page Dialog

When creating a page, configure the following fields.

Field Description Example
Location Folder path where the page will be created. Select an existing path or enter a new one. page/common
Name Unique page name in the project. Duplicates are not allowed. key_list
Description Short page description for easier management. Key list screen

After entering values, click Create.

New Page Dialog

3. Page Structure: Form Management

When a new page is created, one empty Form is created by default.

Form

  • Main Form: A page can contain multiple forms. The first form on the left is treated as the main form.
  • Add form (duplicate): Click the + button on a form to duplicate it to the right.
  • Delete form: Select a form and click Delete. A single remaining form cannot be deleted.
  • Copy and paste form: Select a form, press Ctrl + C, move to another page, click empty canvas space, then press Ctrl + V.

4. URL Format for Page Navigation

Use the following path format when navigating between pages and forms.

URL Format Meaning Result
page/folder/page_name Form ID omitted Opens the page main form
page/folder/page_name.form_id Specific form ID provided Opens the specified form

If .form_id is omitted, navigation targets the page main form.

What Is a Widget?

A Widget is the basic UI element in Lucy Studio.

Text, images, buttons, and layout containers are all widgets.

Place widgets and configure properties to complete app behavior and visual design.

Create and Place Widgets

You can add widgets directly on Canvas or insert them from Widget Tree.

1. Drag and Drop on Canvas

Select a widget in Widgets, then drag it onto Canvas.

Drag and Drop

2. Add as a Child from Widget Tree

Add Child

  1. Right-click a layout widget such as Row or Column in Widget Tree.
  2. Click Add a child to this widget.
  3. Select a widget in Floating Widget Plate.

3. Insert Before or After in Widget Tree

Insert Widget

  1. Right-click a target widget in Widget Tree.
  2. Click Insert widget before this widget or Insert widget after this widget.
  3. Add a new widget from Floating Widget Plate.

Widget Categories

Lucy Studio widgets are grouped by role.

Category Main Purpose Example Widgets
Layout Widgets Define how other widgets are positioned and arranged Row, Column
Divider Widgets Add spacing or visual boundaries between UI elements SpaceBox
Content Widgets Display data or accept user interaction Text, Image, TextField, Icon