Skip to content
On this page

Integrating RpgGame Component into a React App

This guide provides step-by-step instructions on how to insert an RpgGame component into a React application using ViteJS.


Ensure that you have a React application set up with ViteJS. Your package.json should include the following scripts:

"scripts": {
    "dev": "rpgjs dev",
    "build": "rpgjs build"

Step 1: Create the Game Directory

Create a new directory within your source folder:


Step 2: Configure RPG Module

In your rpg.toml file, set the module root and disable autostart:

modulesRoot = './src/game'
autostart = false

The autostart option prevents the engine from automatically searching for a div with the id #rpg. Instead, it will use the React component.

Step 3: Import RpgGame Component

Import the RpgGame component from the RPGJS client package for React:

import { RpgGame } from '@rpgjs/client/react';

Step 4: Utilize RpgGame Component

Implement the RpgGame component with an onReady function:

const onReady = ({ server, client }) => {
    // server is an instance of RpgServerEngine or null
    // client is an instance of RpgClientEngine

<RpgGame onReady={onReady} />

In MMORPG mode, server will be null. In RPG mode, you can access both client and server sides.

Step 5: Advanced Configuration

To add modules via the React app, use the following setup:

const [modules, setModules] = useState<any[]>([
        server: {
            player: {
                onConnected(player) {
                    player.setHitbox(24, 24);
                    player.speed = 4;
        client: {
            engine: {
                onStart() {


In MMORPG mode, you only have access to the client API.