# Step by Step to Create Your First Page

Once you are redirected to **Page Designer** for designing web pages, you can start creating content immediately using a **drag‑and‑drop interface**.\
In this walkthrough, we will create a simple **“Hello World”** web page.

***

### Step 1: Open Page Setup Screen

After completing page creation in AppSpace, the system automatically redirects you to the **Page Designer setup screen**.

From here:

* You can add content to the page
* UI elements are available in the **Components panel**
* Components can be placed on the page using **drag and drop**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FjNnSnzI7oF8L4WUTRu2A%2Fimage.png?alt=media&#x26;token=a1a89abd-0405-4a57-9152-6a640fc241c6" alt=""><figcaption></figcaption></figure>

***

### Step 2: Add an Image to the Page (Optional)

To make the page more visual, you can add an image at the top.

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

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fd3ZedSX3wvdTVIs0oL6z%2Fimage.png?alt=media&#x26;token=522bb635-12b5-4a3f-8533-929642f833d2" alt=""><figcaption></figcaption></figure>

***

### Step 3: Edit the Template Heading

When the page is created, a default **Template Heading** is added.

1. Click on the **Template Heading**
2. Click the **Edit** icon in the top toolbar

***

### Understanding the Editing Toolbar

When a text component is selected, several icons appear.\
Below is a quick reference:

(Icon references shown in the Page Designer UI)

***

### Step 4: Set Text to “Hello World”

1. Replace **Template Heading**
2. Type **Hello World**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FAdTQbz6owgVWMhFGM3lD%2Fimage.png?alt=media&#x26;token=3bbbc6e3-108a-412f-a7d2-9701a3281a2c" alt=""><figcaption></figcaption></figure>

***

### Step 5: Save the Page

After finishing your edits:

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%2Fs9cCuukYDaOdJHucGYn8%2Fimage.png?alt=media&#x26;token=377652c3-4ce2-4259-b254-a21f523542f8" alt=""><figcaption></figcaption></figure>

Your **first Hello World Web Page** is now complete.

***

### Result

You have successfully:

* Created a Web Application in AppSpace
* Created a Page
* Opened Page Designer
* Added UI elements
* Edited content
* Saved your first page

***

### Design Perspective (Beginner Tips)

* Start with simple pages before adding logic
* Use drag‑and‑drop instead of manual layout whenever possible
* Save frequently
* Explore component toolbars to understand capabilities
* Avoid over‑customization at the beginning


---

# 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/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-components/pages/create-your-first-web-page/step-by-step-to-create-your-first-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.