Getting Started
Set up world.tsx and start placing blocks with React
Science isn't about WHY, it's about WHY NOT!
—Cave Johnson
world.tsx is a custom React renderer that targets Minecraft. You write TSX, and your world updates in real time. Think React Three Fiber but your render target is a Minecraft server instead of a WebGL canvas.
function Tower({ height, block }) {
return (
<group origin={[0, 0, 0]}>
{Array.from({ length: height }, (_, y) => (
<fill key={y} blockId={block} from={[0, y, 0]} to={[3, y, 3]} />
))}
</group>
);
}Under the hood, the reconciler diffs your component tree, figures out which blocks changed, and sends only the delta to the server via RCON. State management, conditional rendering, composition, it's all just React.
See It in Action
Still not convinced? Here's a demo that showcases a house built in world.tsx. You can control the properties either directly in the code, or by creating a UI like a normal React website:
Check out the full source if you're curious.
Setup
This will run /setblock and /fill commands on your server. There is no
undo. Use a test world.
You'll need a Minecraft Java Edition server with RCON enabled. Then clone the repo and start the dev servers:
pnpm install
pnpm dev:allThe proxy server runs on Bun, so you'll need it installed.
This starts two things: the Vite dev server (the web UI) and a Bun proxy server that bridges WebSocket to RCON (since browsers can't talk RCON directly).
Open http://localhost:5173 and you should see the demo.
Configuration
If your server isn't on localhost or uses different ports, edit these files:
packages/server/src/rcon.tsfor RCON host, port, and password (defaults:localhost:25575, passwordpassword)packages/server/src/index.tsfor the proxy WebSocket port (default:8090)packages/core/src/socket.tsfor the proxy WebSocket port (default:8090)