Plugin

RPGReact is an RPG Maker MZ plugin that mounts a React application over the game canvas and bridges messages between the engine and your React UI.

What it does

• Mounts a DOM container overlay above the MZ canvas

• Loads your built React assets via a Vite manifest

• Exposes simple plugin commands (show/hide)

• Provides a lightweight message bridge to exchange data/events

Installation (summary)

1. Copy js/plugins/RPGReact.js into your project

2. Build the React UI: cd menus && yarn install && yarn build

3. Ensure the built manifest exists at menus/build/.vite/manifest.json

4. Enable RPGReact in Plugin Manager and configure parameters

RPGReact plugin

Rendering model

• The React overlay is injected into the same NW.js window as the game. It is positioned to cover the canvas without altering RPG Maker’s rendering pipeline.

Plugin contents

• Core: js/plugins/RPGReact.js

• Stock overrides: js/plugins/rpgreact/ (files that hook MZ scenes and dispatch UI events)

  • These generate most runtime UI events (e.g., screen open/close, battle/menu events) and send them to React.

• Custom overrides: place your own files under js/plugins/rpgreact/custom/ and list them in the manifest

  • Manifest (single source of truth): js/plugins/rpgreact/overrides.manifest.json

  • Example entry:

    {
      "entries": [
        { "file": "custom/override_scene_myfeature.js", "export": "overrideSceneMyFeature" }
      ]
    }

  • Files are executed in the order listed in the manifest.

function overrideCustom(event, createEventData, createExtraData, reactBridge, decorateData) {

  const _sceneSplash_Start = Scene_Splash.prototype.start;
  Scene_Splash.prototype.start = function() {
    console.log("STARTING SPLASH SCREEN");
    _sceneSplash_Start.call(this);
  }
}