Build a Simple App in OpenReality

Hello You

A small app with two screens, input, state, and navigation.

Create a small app called Hello You. It has two screens: a welcome screen where the user enters their name, and a second screen that greets them personally.

By the end, the app will do one simple thing well: open on a clean home screen, let the user type their name, move to the next screen, and show Hello, <name>. This is a real app structure, not just a feature demo. It gives you a project, screens, state, input, navigation, and runtime behavior.

1

Start the project

Open OpenReality on macOS and create a new project. Use these values:

• Project Name: HelloYou
• Organization: OpenReality
• Platforms: macOS on, iOS on
• Icon: any default icon

Enter the editor as soon as the project is created.

2

Build the first screen

Create a new scene and name it Welcome. Set Welcome as the entry scene. Then create one entity inside the Welcome scene. This will be the main content container for the first screen.

Add a vertical layout to that entity. Use a VStack so the content appears from top to bottom. Inside that layout, add the following modules in this order:

1. A Text module
2. Another Text module
3. A TextField module
4. A Button module

Now configure them:

• Title text: Welcome
• Description text: Enter your name to continue
• Text field placeholder: Your name
• Button label: Continue

Leave the button action empty for now. At this point, your first screen should look like a simple onboarding page.

3

Add app state

Now create the data that drives the app. Add a new variable:

• Name: userName
• Type: String
• Default Value: empty, or Friend

This variable is the app's state. It stores whatever the user types into the text field. Go back to the Welcome scene, select the text field, and bind its value to userName.

Now the input field is no longer isolated UI. It is connected to the app's runtime state. That is the key shift from a static layout to a working app.

4

Build the second screen

Create another scene and name it Greeting. Do not make it the entry scene. Inside Greeting, create one entity and add a VStack.

Now add these modules:

• A Text module for the screen title
• A Text module for the personalized message
• A Button module for going back

Configure them like this:

• Title: Greeting
• Personalized message: display Hello, ${userName} or the equivalent binding pattern available in the editor
• Back button label: Back

If the editor only supports binding a single variable directly, the simplest acceptable version is showing just the name itself. Leave the button action empty for the moment.

5

Create the navigation logic

Now wire the screens together. Create a new command and name it OpenGreeting. Add one step: Open Scene to Greeting. That is enough, because the name is already being stored live in userName through the text field binding.

Select the Continue button on the Welcome screen and bind it to OpenGreeting. Next, create another command named GoBack with one step: Open Scene to Welcome. Bind the Back button on the Greeting screen to GoBack.

Now the app flow is complete: type name, continue, see greeting, go back.

6

Make the greeting feel like a real app

Right now, the app works structurally. Now improve the experience so it feels intentional.

Refine the Welcome screen by adjusting spacing so the title, description, input, and button have breathing room. Use a larger title size, a softer style for the description, and make the button visually stronger than the other elements.

Refine the Greeting screen by making the greeting message the center of attention. Use a medium or large title for Greeting, a larger personalized text for the user name, and enough vertical spacing so the screen feels calm and clear.

This should feel like a tiny finished app, not just a stack of modules.

7

Run the app

Save the project, then run it locally on macOS. On launch, the Welcome screen should open first. On the first screen, you should see Welcome, Enter your name to continue, a text field, and a Continue button.

Type a name into the field, such as Alex, then press Continue. On the second screen you should now see Greeting, Hello, Alex or the equivalent personalized output, and a Back button. Press Back and return to the first screen.

That is now a complete simple app.

8

If the greeting text does not update

If the second screen is not showing the entered name correctly, make the output more explicit. Create a second string variable:

• Name: greetingText
• Type: String
• Default Value: Hello

Then replace the forward command with one that first writes a final greeting string. Create or update the command PrepareGreeting and add these steps in order:

1. Build or set a string value for greetingText
2. Open Greeting

If OpenReality lets you set a string directly from another variable, use greetingText = Hello, + userName. If the editor does not support direct concatenation in one step, keep the output simple and just display userName directly on the second screen. Then bind the message text in the Greeting scene to greetingText and bind the Continue button to PrepareGreeting.

This version gives you a cleaner app architecture: userName stores input, and greetingText stores display output.

9

Give the app a cleaner product shape

To make it feel more like an actual app and less like an exercise, apply these final touches:

• Rename the scenes clearly: Welcome and Greeting
• Rename the entities clearly: WelcomeContent and GreetingContent
• Keep only one primary action per screen
• Keep the copy short and polished

Use restrained text such as Welcome, Enter your name to continue, Continue, Greeting, and Back. Small apps feel stronger when the language is restrained.

10

Test it on iPhone

If you want to make this a real mobile app prototype, run it remotely on an iPhone. Open OpenReality on the iPhone and keep the Mac and iPhone on the same network.

In the run controls on macOS, select iOS, choose the device, complete pairing if required, and press Run. Then test the same flow on the phone: enter a name, tap Continue, check the greeting, and tap Back.

If it feels clean on mobile, you already have a usable prototype.

11

Export it as an app project

When the flow feels right, export it using these values:

• App Name: HelloYou
• Organization Name: OpenReality
• Bundle Identifier: com.openreality.helloyou

Export to Xcode. Now your simple app exists in two forms: as an OpenReality project for fast iteration, and as a standalone Xcode project for continued development.

12

What you just built

You did not just make a screen mockup. You built a real app structure with a project, two scenes, one or two variables, user input, state binding, scene navigation, runtime behavior, local run support, optional device testing, and export support.

That is the smallest useful OpenReality app pattern.

13

What to build next

Once Hello You is working, the next good versions are:

• Version 2: Add validation and continue only if the text field is not empty
• Version 3: Add a reset action and clear the name when returning to the first screen
• Version 4: Add a profile image and display it with the greeting
• Version 5: Add a theme color variable and use it across both screens

Each one grows the app naturally without changing its structure.

14

Final app structure

Your finished project should look roughly like this:

• Scenes: Welcome and Greeting
• Variables: userName and optional greetingText
• Commands: OpenGreeting or PrepareGreeting, and GoBack
• Welcome screen: title, description, input field bound to userName, and a continue button
• Greeting screen: title, personalized text using userName or greetingText, and a back button

This is a simple app. It is small, complete, interactive, and easy to extend.