Hello World (VM)

Build a simple app using the VM layer's live-edit workflow.

Step 1: Open the Project

Windows:

Navigate to HelloReflex/project/win/
Open HelloReflex.sln in Visual Studio 2022

macOS:

Navigate to HelloReflex/project/macos/
Open HelloReflex.xcodeproj in Xcode

Step 2: Build and Run

Windows (Visual Studio):

Set configuration to Debug x64
Click ▶ Local Windows Debugger (or press F5)

macOS (Xcode):

Select your Mac as the target device
Click ▶ Run (or press ⌘R)

Two windows will appear:

Editor Window — Edit VM files (view.c, styles.txt)
Preview Window — Your running application

Tip: If the windows close, press Ctrl+Shift+D (Windows) or ⌘+Shift+D (macOS) to reopen them.

Step 3: Edit styles.txt

In the Editor window, open styles.txt and replace its contents with:

@Font Medium:
{
	path: ":res:IDE/font";
	size: 36;
};
size: 256,384;
bg_colour: 205;
HelloBox: {
    size: 280, 120;
    margin: 20;
    bg: 
        Fill(colour:49, 24, 116; corner: 12),
        Border(colour: 200; width: 1; corner: 12),
        Text(
            font: Medium; 
            value: "Hello, Reflex!"; 
            colour: 255; 
            justify: center
        );
};

Click Save (or press Ctrl+S / ⌘S).

Step 4: Edit view.c

Open view.c and replace its contents with:

#resource (stylesheet) "styles.txt" as styles;
#include "interface.h"
//get interface
Interface iface = app#iface;
//build layout
using GLX;
self.SetStyle(styles);
self.SetFlow(kFlowY);
self#resize = true;
auto helloBox = new Object;
helloBox.SetStyle(styles#HelloBox);
self.AddFloat(helloBox, kAlignmentCenter);
//update on changes
self.SetOnUpdate([]()
{
	//App state changed, update the view
});

Click Save.

Step 5: See It Live

The Preview window immediately shows your "Hello, Reflex!" box centered on screen.

Now try this:

In styles.txt, change colour: 255 to colour: 200, 50, 50
Save the file
Watch the text turn red instantly—no rebuild required!

What's next?

Learn about the UI System to build more complex interfaces with GLX.

Live Edit workflow →