Video and chapters

1:20 · Silent video

On screen

Start with Empty canvas

Choose an empty canvas, name the project and keep a copy of any previous project before replacing it.

Descriptive transcript and files

This video is silent. The transcript describes actions and visual results; captions repeat the on-screen instructions.

0:00
Start with Empty canvas — Choose Empty canvas, then name your project.
0:03
Name the project — Enter Outpost Welcome in Project name.
0:07
If a project is already open — Keep an export before replacing it, then choose Continue.
0:10
Add a Card — Open + Add to choose a component.
0:12
Choose Card — Click Card under Component kits.
0:14
Customize the title — Choose Title in the Card properties.
0:16
Replace Card title — Enter Welcome to Outpost in Title.
0:18
Confirm the title — Press Tab: the canvas updates to the new value.
0:20
The title is visible on the Card — Now edit Body, the text below the title.
0:22
Enter the welcome text — Replace the Body text, then confirm with Tab.
0:27
Name the button — Action label changes the button’s visible text.
0:29
Open → Server rules — Type Server rules, then press Tab.
0:33
Make the Card wider: W — W is width. Replace 360 with 720 pixels.
0:37
Set the height: H — H is height. Replace 260 with 400 pixels.
0:41
Position the Card: X — X controls horizontal position. Enter 280.
0:45
Position the Card: Y — Y controls vertical position. Enter 160.
0:49
The Card has the chosen size and position — 720 × 400 pixels, positioned at X 280 and Y 160.
0:52
Give the button an action — Click Server rules, then open Interaction.
0:54
Choose the behavior — In Behavior, choose Show message.
0:58
Create the Show message action — Check Show message, then click Create action.
1:00
Enter the button message — The button will display this text in Test mode.
1:10
Test the button — Click Test, then Server rules in your interface.
1:12
The message appears — Your button works. Use Exit preview to continue editing.
1:16
Your first interface is ready — The next lesson adds an image and a progress bar.

Download MP4 video VTT captions VTT chapters

Follow the steps

Start with Empty canvas and add the Card component.
In Properties, customize the title, body, button and layout.
Select the button on the canvas, create its Show message action, then try it with Test.

Download example project JSON ↓

Windows, pages, screens and components: what’s the difference?

Window and pages: A window has a shared frame and content pages, such as Rules or News. Window edits the shared frame; selecting a page edits that page.
Screen: A unit in an advanced CUI project. The video examples link two standalone screens; several pages of a window can share one underlying screen.
Element: A panel, text, button, input or image. Select it on the canvas or in Layers, then edit it in Properties.
Component kit: A group ready to customize, such as Card or Progress. Select the group for its options. A blank page also lets you place your own elements in the CUI editor.

On mobile, use Layers or Properties, then Canvas to return to the workspace.

How do I edit a plugin’s interface?

In the plugin’s configuration, open Appearance, then its CUI editor if available.
Customize colors, text and positions. The plugin’s actions are preserved.
Use Apply to configuration to return to the configurator, then export the result or prepare its transfer. From a window, Return to window also keeps the edits in that window.

This editing is available for interfaces supported by the plugin’s configurator. The example project opens directly in the CUI editor.

The four videos and their projects show the standalone workflow recorded in October 2026; their images and former labels are retained. For current Window/Page settings, format and ZIP export, follow the Server windows guide.