# react-phaser: A React VDOM Bridge for Phaser Games > react-phaser maps Phaser objects to React virtual DOM nodes, letting you build games with React components. The project is a thin, opinionated wrapper that strips DOM manipulation from React and injects a Phaser renderer instead. **evilfer/react-phaser** — react-phaser - Repository: https://github.com/evilfer/react-phaser - Stars: 100 · Forks: 16 - Language: JavaScript - License: NOASSERTION - Published: 2026-08-17 · Updated: 2026-08-18 · Language: en - Canonical page: https://hysenlabs.com/projects/evilfer-react-phaser ## The Problem: Phaser and React Don't Naturally Mix Phaser is a game framework that manages its own display list and game loop. React is a UI library built around the browser DOM. When you try to use both, you get two sources of truth: Phaser's scene graph and React's virtual DOM. Keeping them in sync is manual and error-prone. react-phaser addresses this by making Phaser objects first-class citizens in React's VDOM. Instead of writing imperative calls like game.add.sprite, you declare a node in a render method. The wrapper then translates VDOM changes into Phaser add, update, and remove operations. This is aimed at developers who want the declarative component model for game entities, not just for menus or HUDs. ## How It Works: VDOM as the Single Source of Truth The README explains that react-phaser uses a React version that is 'unhooked from browser DOM manipulation.' When you require('react-phaser'), it returns the same object as require('react'), but on first load it removes the DOM manipulation functionality and injects the Phaser wrapper. This is a significant architectural choice. React's reconciliation algorithm still runs, but instead of creating DOM elements, it creates or updates Phaser objects. The render method takes a string as its second parameter, which identifies a virtual container. That string is not a DOM element; it is an internal unique identifier for the game instance. This means the wrapper maintains its own mapping between VDOM and Phaser's object tree. The example in the README shows a simple tag, suggesting that the library provides a set of tags corresponding to Phaser's object types, as listed in the wiki. ## Getting Started: Commands and Code from the README Installation is a single npm command: npm install react-phaser. The code sample uses the pre-ES6 style: var React = require('react-phaser'), and React.createClass. The render method is called as React.render(, 'game'). The second argument is a string 'game', which acts as the virtual container. The README states that is one of the tags react-phaser makes available, and it points to a wiki page for the full list. There is no mention of a build step, a bundler, or a specific Phaser version in the README. The example code in the repository implements the Phaser 'Making your first game' tutorial, which is a good starting point for seeing how the wrapper maps Phaser's API to React components. ## A Real Limitation: The Virtual Container Is Not a DOM Element The most obvious limitation is that React.render takes a string, not a DOM node. That means you cannot embed a Phaser game in a specific div on your page. The game lives in a virtual container that react-phaser controls. If you need to place a game inside a specific layout or interact with surrounding HTML elements, you will have to work around this. The README says the string is 'simply a react-phaser internal unique string.' This suggests the wrapper creates its own render target, likely a canvas or WebGL context that it manages. But that detail is not documented in the material. This design also means you cannot use React's normal event system for DOM events like clicks on buttons outside the game. You would have to handle those separately. If your project requires tight integration with a larger web page, this wrapper forces you into its own rendering model. ## The Trade-Off: React Without the DOM By stripping out DOM manipulation, react-phaser makes React a pure state management and reconciliation engine. That is clever, but it comes at a cost. You lose React's ability to render to the DOM entirely. You cannot use the same React instance to render a form or a settings panel. The README says require('react-phaser') provides the same object as require('react'), but with DOM manipulation removed. That means if you try to use ReactDOM or any DOM-specific feature, it will not work. This is a deliberate isolation, but it limits the scope of what you can build. For a pure game that lives in its own canvas, this is fine. For a hybrid app with a game plus UI, you would need to run two separate React instances, one for the game and one for the DOM, which complicates state sharing. The project's approach is a clear trade-off, and the README does not sugarcoat it. ## Alternative Approach: Direct Phaser with a Thin React Layer A common alternative is to use Phaser directly and use React only for UI overlays, such as menus or scoreboards. In that setup, React renders normal DOM elements, and Phaser manages the canvas. You bridge the two by passing callbacks or using an event emitter. This is the opposite of react-phaser's approach. Instead of making Phaser objects into VDOM nodes, you keep Phaser's imperative API and use React for the parts that benefit from declarative rendering. The difference is in the boundary: react-phaser moves the boundary inside the game object tree, while the alternative keeps it between the game and the UI. The alternative is more flexible because you can use the latest React features and any DOM library. But it requires you to write more glue code to sync game state with UI state. react-phaser promises to eliminate that glue, but it does so by constraining both sides. ## Maintenance and License: What the Repository Tells Us The repository has no description, no homepage, and no recent release information. The license is listed as NOASSERTION, which means the repository does not declare a standard open source license. That is a serious consideration for adoption. Without a clear license, you cannot legally reuse, modify, or distribute the code without explicit permission from the author. The last push date is unknown, and there are no recent releases retrieved. This suggests the project may be dormant or in early stages. The README uses React.createClass, which was deprecated in React 15 and removed in React 16. That implies the wrapper targets an older React version. If you are on a modern React, you will likely need to adapt the code. The wiki exists, but its content is not in the material. Before using this, you should check the repository's issue tracker and commit history to see if it is actively maintained. The lack of license and release metadata is a red flag for production use. ## Conclusion Adopt react-phaser if you want to write Phaser games in a React component style and you accept that the wrapper is tied to an older React API (createClass) and a specific Phaser version. Avoid it if you need current React features (hooks, concurrent rendering) or if you rely on browser DOM integration for UI overlays. Before using it, verify the exact Phaser version it targets, check the wiki for the full tag list, and test that your game logic works with the virtual container model, since the second argument to React.render is a string, not a DOM element. The project has no recent release information, so treat it as experimental and be prepared to fork or patch. ## FAQ ### Is Phaser better than Unity? This repository does not compare engines. What it records is a React-based wrapper for Phaser that depends on phaser at about 2.4.6, targets the second major version of the engine, and was last pushed to master on 2016-04-21. ### Is Phaser free to use? The repository says nothing about Phaser's own terms. What it declares is its own licence, BSD, in package.json, and its dependency on phaser at about 2.4.6 alongside extend, invariant, p2, and react-anything. ### Is PixiJs better than Phaser? Nothing here compares PixiJs with Phaser. The project wraps Phaser itself, represents Phaser objects as React VDOM nodes, and links the Phaser Making your first game tutorial as the basis for its example code. ### Is Phaser good for beginners? The repository points at the Phaser Making your first game tutorial and says its example code implements it. The react-phaser README itself is short, with the list of available tags on the project wiki rather than in the README. ## Sources - [Official README](https://github.com/evilfer/react-phaser#readme) - [Project repository](https://github.com/evilfer/react-phaser) - [README](https://github.com/evilfer/react-phaser/blob/master/README.md) - [Releases](https://github.com/evilfer/react-phaser/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/evilfer-react-phaser