# Step by step to create your first mobile page

Once you are redirected to **Page Designer** for mobile application design, you can start creating page content using the drag‑and‑drop interface.\
This section explains how to create a simple **Hello World mobile page**.

***

#### Open the Page Setup Screen

After creating a mobile page in AppSpace, the system redirects you to the **Page Designer screen**.

* The page setup screen allows you to add content to the page
* UI components are available under the **Components panel**
* Components can be placed on the page by drag and drop

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FvoNAXSQ5Rth4koq84nLc%2Fimage.png?alt=media&#x26;token=ea2f7f14-36f9-4559-836e-be56f55a8dbe" alt=""><figcaption></figcaption></figure>

***

#### Add an Image to the Mobile Page (Optional)

To create a sample **Hello World** mobile page:

1. Click the **Images** icon
2. Upload a new image or browse existing images
3. Drag the image from the Images panel
4. Drop the image on the **top of the Container**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Ffnncv3DZNj1IRMp5KQMl%2Fimage.png?alt=media&#x26;token=09fe645b-5e29-4411-89d0-5284d4288238" alt=""><figcaption></figcaption></figure>

***

#### Add and Edit a Heading Component

1. Drag and drop a **Heading** component into the page
2. Click on the Heading component
3. Click the **Edit** icon on the top toolbar

***

#### Component Toolbar Reference

When a Heading component is selected, the following options are available:

| Function         | Description                                        |
| ---------------- | -------------------------------------------------- |
| Drag Handle      | Move the text to another row                       |
| Select Container | Select parent container (Div / Row / Column)       |
| Duplicate        | Copy and duplicate the selected component          |
| Edit             | Edit text content, font, or style                  |
| Connect to Data  | Bind data from Microflow, Store, or Local Database |
| Translation      | Enable multi‑language support                      |
| Delete           | Remove the text component                          |

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FSsOD4XddkwmkcKZvloQh%2Fimage.png?alt=media&#x26;token=37fabb03-e197-450d-a6ef-1f794e9042e4" alt=""><figcaption></figcaption></figure>

***

#### Set Text to “Hello World”

1. Click the **Edit** icon
2. Replace the default text **“Heading”** with **“Hello World”**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FAb7OdDkawGQyFYvByYD6%2Fimage.png?alt=media&#x26;token=59e5a083-37c8-425e-8951-1a06a6f2cc59" alt=""><figcaption></figcaption></figure>

***

#### Save the Mobile Page

To save your changes:

1. Click the **Save** icon on the top toolbar

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FirhXQ41pIUP3g29X7eOk%2Fimage.png?alt=media&#x26;token=28fe9d11-19a2-4dd5-a93f-e2a7eeed88be" alt=""><figcaption></figcaption></figure>

Your **first Hello World mobile page** is now complete.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/building-apps/ui-page-designer/ux-ui-components/pages/create-your-first-mobile-app/step-by-step-to-create-your-first-mobile-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.