CalmUI Studio

Open Studio from Tools → CalmUI Studio in Unreal, or launch it directly and open a CalmUI project. A View is a complete interface such as a main menu or inventory. A component is a reusable part such as a button.

Where to work

Studio panels share compact controls, typography and dark surfaces. Languages uses a translation list beside its details, with independently scrollable areas. These Studio styles do not modify your project's authored UI styles.

Explorer occupies the left column, the selected source file fills the editor, and the live Preview renders whatever View or component is currently the Preview target, here, the Showcase package's hero screen. The Output panel along the bottom stays visible regardless of which Activity Bar tool is selected, so build and connection messages remain readable while you edit.

Use the Activity Bar to switch between tools. Returning to Explorer restores the source editor. Before a project is open, Studio shows the Welcome screen.

Edit and preview

1. Select a package, then a View.
2. Edit its source or arrange its elements in Hierarchy.
3. Double-click the View, or choose Show … in Preview, to make it the Preview target.
4. Press Ctrl+S to save. Read Problems if the save fails.

Single-clicking another source file leaves the current Preview target in place. Hierarchy shows static classes in muted text beside each element name. Long class lists truncate; hover over the class text to read the full list. This lets you edit a shared button while watching the menu that uses it. Studio keeps the last working preview if the new file has an error.

Returning to the same unchanged Preview target reuses its compiled preview package instead of starting the compiler again. Source, project configuration, selected theme, and compiler changes create a new cache entry. Store mocks and other runtime data update the running Preview without invalidating that package. See Preview caching.

Style changes are made in CSS. Inspector shows the element's information and provides a link to its source; it is not a CSS property editor.

Organize a project

Choose a package to see its Views. Use a View's … menu to add it to another package, move it, duplicate it, detach it, or delete its file. Deleting a package keeps the View files. Optional View folders organize lists without moving files on disk. Component folders are physical: moving a component between them updates its source references. See Component Library.

The global styles list follows the project's stylesheet order. Later rules may override earlier ones. tokens.css and global.css are required entries; edit their contents to change shared styles.

Use another monitor

Click ↗ in Preview, labeled Open preview in a separate window. Move that window to another monitor. Choose Reattach Preview or close the separate window to bring it back. Source edits continue updating the selected Preview.

Help → Open documentation opens the bundled documentation in its own window. It works offline and can stay beside your Blueprint editor.

Settings and saving

Open the Activity Bar gear or Help → Settings…. Change editor font size, indentation, wrapping, formatting on save, or keyboard shortcuts there.

By default, switching source files saves the current document first. Disable editor-exit autosave in Settings → Editor if you want to keep unsaved edits while switching files. A failed save keeps the current file open.

File → Close project returns to Welcome. If there are unsaved files, Studio asks before discarding them. See recovery after an interrupted session.

Next steps

• Create a View.
• Show it in Unreal.
• Make its buttons work.
• Supply game values.