world.tsx

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:all

The 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.ts for RCON host, port, and password (defaults: localhost:25575, password password)
  • packages/server/src/index.ts for the proxy WebSocket port (default: 8090)
  • packages/core/src/socket.ts for the proxy WebSocket port (default: 8090)

What's Next

On this page