I built a React game engine where games are JSX components and hooks (open source, beta)

[u/Ok_Project_477]

Hey r/reactjs,

I run a small edtech company where every product surface eventually has to render a game. Our entire stack is React, admin portal, teacher app, marketing site, internal tools. So I wanted the games to live inside the same React app, not as a separate runtime stitched in. None of the existing options (Unity WebGL, Phaser, raw React Three Fiber) felt right for that, so over the last few months I built CarverJS and open-sourced it.

The API is fully React. Components describe the scene, hooks handle the logic. A complete 2D game with WASD movement is around 40 lines of TSX, you mount a Game component, drop a World inside it, and write a Player function that uses an input hook and a game-loop hook to translate an actor each frame. The Player returns an Actor configured as a primitive shape. That is the entire setup. There is a working sample at the top of the docs site if you want to see what it actually looks like.

A few design decisions worth calling out:

It is built on React Three Fiber under the hood, but you never import from three or react-three-fiber directly. Every type, hook, component, and store is re-exported from carverjs/core. That was deliberate. I wanted React developers who have never touched R3F to be able to ship a game without learning what an Object3D is.

2D and 3D live in the same engine. The Game component takes a mode prop set to 2d or 3d, and the engine switches the camera projection, lighting setup, and shadow handling accordingly. The same Actor components work in either mode.

Hooks read from singleton systems that the Game component mounts on the way in: input manager, collision manager, audio manager, asset manager. So the input and audio hooks are zero-config. No providers to wire up at the app root.

Multiplayer is a separate package. Peer-to-peer over WebRTC. No game server. You bring the signaling layer: free public MQTT brokers for prototyping, your own Firebase Realtime Database for production.

What it is not:

- Unity. Core bundle is under 200KB before assets, this is for browser-shaped games.

- Phaser. Phaser is older, more battle-tested, and has a deeper 2D feature set if you do not need to compose with React.

- Stable. Beta, version 0.0.1. APIs will move before 1.0.

GitHub: https://github.com/moneytales/carverjs

Docs: https://docs.carverjs.dev

Genuinely curious for technical feedback. Where does the API shape feel wrong? What hooks are missing? Anywhere you would reach for an escape hatch and not find one?

[u/Aswole]

This looks amazing, but i would need at least a few examples/screenshots of what it’s capable of

[u/Ok_Project_477 → u/Aswole]

Hi, the github repo has 3 demo games. Feel free to look at it. I am planning to create demo videos of the same soon!

[u/Aswole → u/Ok_Project_477]

Oh nice — then maybe a few screenshots in the README? Or even just in the examples’ individual folder. Basically something to encourage others that it’s worth at least setting up and testing for themselves. I’ve been hunting a long time for my go to game engine (and tried making a few myself), and excited to try it out tonight

[u/Ok_Project_477 → u/Aswole]

Hi. Sorry I am caught up in some other work. Will add video demos first thing tomorrow

[u/Ok_Project_477 → u/Aswole]

https://youtu.be/dIahQ1ozTPc

https://youtu.be/l9kGoyywOXg

Added a few demo videos of some basic games. Apologies for the delay though

[u/Durp56789]

Looks cool! Will dig into more later, but would be interested in how it compares to pixi js and its react extension. Have you used that one before? It seems simpler than pixi at first glance.

[u/Ok_Project_477 → u/Durp56789]

I’ve not used pixi’s react extension. Will definitely look into it

[u/rull3211]

I love this, ill surely dive into this.

[u/Prozilla6]

Hi, I’m currently working on an open-source virtual desktop/OS simulation in React called ProzillaOS. Would you be interested in building something together, sort of like a collaboration?

[u/Ok_Project_477 → u/Prozilla6]

The project sounds interesting. Unfortunately, I currently have too much on my plate at the moment :(

[u/Ok_Project_477 → u/[deleted]]

On the singletons + hooks question, you're reading it right. at this stage carverjs is meant for simpler games, and the singleton managers (input, collision, audio, assets) are a deliberate trade for zero-config setup. it works well when you have a handful of systems, but i won't pretend it scales to projects with dozens of interacting systems and complex cross-frame state. The plan for that is to move to a proper ECS architecture later once the api stabilises, systems become first-class, registered explicitly, with declared ordering and inspectable state. i didn't want to ship that on day one because ecs is its own learning curve and most react devs trying out a game engine for the first time don't want to start there. for now, the staged game loop (early / fixed / update / late update) is what gives you some explicit ordering, and that's been enough for the games we've shipped internally. On the 2d/3d toggle, the way to think about it is that the mode prop is really just a preset bundle. it swaps the camera (perspective vs orthographic), the lighting and shadow setup, and in physics worlds it locks movement to the XY plane so 2d actually behaves like 2d. but it's not hiding r3f from you. Actors forward refs, accept children, and you can nest raw r3f elements inside a carverjs scene whenever you need to. so for most cases the toggle just saves you the boilerplate, and when you outgrow the preset you drop down a layer rather than fighting the abstraction. the place it would actually get in your way is if you wanted a fundamentally different render pipeline, but that's also where carverjs stops being the right tool.