ReactorUMG

<h1 id="reactorumg">ReactorUMG</h1>

<img src="./docs/imgs/Cover.png" width="600" alt="Cover" />

ReactorUMG helps you build UMG game UI and editor UI in Unreal Engine using React. The plugin is built on PuertTS scripting and pairs with AI assistance so you can develop and iterate UI efficiently with a web-style workflow. It is especially suited to using AI to quickly build a variety of in-editor UI tools.

Keywords: Unreal Engine, UE5, UMG, UI, Slate, React, TypeScript, Plugin, Hot Reload, Live Preview, Puerts

---

https://github.com/user-attachments/assets/36417479-f78c-4d2c-aaf2-029aadb4ebcd

⚠️ Alpha stage: The API and structure may still change; an official version will be released once stabilized. Given that in-game UIs typically have high visual and interactive complexity, the current version of the plugin still has limitations in adaptation completeness and cannot fully meet the presentation requirements of production-level game UIs. Therefore, at this stage, we strongly recommend prioritizing its application to UI development for editor extension tools, to improve tool development efficiency.

⚠️ Before you start: Please read the FAQ first to avoid known pitfalls.

---

跳转到中文

<h2 id="767fa455">Contents</h2>

• Why use ReactorUMG
• Core Features
• System Requirements
• Install and Quick Start
• Project Structure Example
• FAQ
• Roadmap
• Contribution Guide
• License
• Links and Resources

---

<h2 id="ca757ae1">Why use ReactorUMG</h2>

UMG is powerful, but it lacks a text-first, programmable front-end ecosystem, making it hard to plug into AI and front-end engineering practices (componentization, hot reload, static checks, automated testing, etc.). That slows teams who need quick iteration. To solve this, we built the ReactorUMG plugin. ReactorUMG lets you use native React + TypeScript + AI to quickly build game UI or editor UI. It is WYSIWYG, supports live preview and hot reload while editing, and connects modern web front-end practices to game UI development.

---

<h2 id="d2ffce75">Core Features</h2>

• Native React experience: Supports React Hooks, function/class components, TSX syntax, React container layouts, React native components, and UMG components.
• Scriptable interaction: Use PuerTS to call engine and editor scripting interfaces as a Blueprint substitute.
• AI-assisted development: Use AI Coding to quickly build editor tool panels, runtime UI, and reusable component libraries.
• Live preview: Hot-reload validation and in-editor live preview to verify layout and interaction quickly.
• Comprehensive examples: Samples and templates from beginner to advanced.
• Animation: Import Spine animations.

---

<h2 id="19c93d0a">Development System Requirements</h2>

• Unreal Engine 5.x
• Node.js >= 18 and Yarn / PNPM / NPM (choose one)
• VSCode / Cursor
• Windows 10/11

---

<h2 id="2e52a2da">Install and Quick Start</h2>

Minimal Setup

• Download the plugin and place it in the project's Plugins directory;
• Run the initialization script Plugins/ReactorUMG/Tools/setup_win.bat;
• Launch the project, create a ReactorUMG->EditorUtilityWidget asset, and write UI scripts under <ProjectDir>/TypeScript/<ProjectName>/Editor/<AssetName>.

See the docs: https://caleb196x.github.io/ReactorUMGOnlineDoc/quickstart/

---

<h2 id="x0qyv">Runtime UI Supported Platforms</h2>

• Windows, Android, Linux

<h2 id="faq">FAQ</h2>

Q: What is the relationship with native UMG/Slate? A: ReactorUMG is designed for teams that "build UI with React" and complements UMG/Slate; it still relies on UE's UI rendering system and script bridging at the low level.

Q: How to perform a full compilation of the TypeScript project? A: Execute yarn build in the TypeScript directory.

Q: The UI interface cannot run after packaging. A: Check if the Additional Non-Asset Directories to Package setting includes the JavaScript directory.

Q: How to update the puerts index files under types/ue? A: Execute ReactorUMG.GenDTS in the Editor's Console Command.

---

<h2 id="c644eeae">Roadmap</h2>

• [x] Support basic native React components and basic CSS styles
• [ ] Design a ReactorUMG-centered component library to support complex game UI, improving runtime efficiency and stability
• [ ] Support Tailwind CSS
• [ ] Support UI animation
• [ ] ...

Want something not listed? Submit a request in Issues.

---

<h2 id="f31ccad5">Contribution Guide</h2>

We welcome all kinds of contributions: bug reports, docs updates, feature proposals, and PRs.

1. Fork the repo and create a branch: feat/your-feature or fix/your-bug
2. Run local examples to validate changes
3. Submit a PR with a brief summary of motivation, scope, and testing

See CONTRIBUTING.md for submission flow, coding standards, and commit message conventions.

---

<h2 id="20a28457">License</h2>

This project uses the MIT License. See LICENSE for details.

---

<h2 id="477c63ed">Links and Resources</h2>

• Docs Home: https://caleb196x.github.io/ReactorUMGOnlineDoc/
• Sample Project: https://github.com/Caleb196x/ReactorUMGDemo
• ReactorUMG NPM Package: https://github.com/Caleb196x/ReactorUMG-TS
• Release Downloads (Releases): https://github.com/Caleb196x/ReactorUMG/releases
• Issues and Suggestions (Issues): https://github.com/Caleb196x/ReactorUMG/issues
• Discussion Board (Discussions):
  • Discord: https://discord.gg/E9672n9me7
  • QQ: 1020173543

---

If this project helps you, feel free to Star, share, and tell us your use cases and needs!