MinecraftWorld

<MinecraftWorld> is the bridge between normal React DOM and the Minecraft reconciler. Wrap your Minecraft components in it. Everything outside is regular React, everything inside targets the server.

function App() {
  const [block, setBlock] = useState("stone");

  return (
    <>
      {/* Normal React DOM */}
      <button onClick={() => setBlock("diamond_block")}>
        Click for Diamond!
      </button>

      {/* Minecraft reconciler */}
      <MinecraftWorld>
        <block coords={[0, 64, 0]} blockId={block} />
      </MinecraftWorld>
    </>
  );
}

State flows naturally across the boundary. Change state in your DOM UI, and the Minecraft world updates reactively.

Your own components are just regular React components that return the built-in elements. Check out packages/demo/src/App.tsx for a full house builder example with walls, roofs, windows, and a chimney you can light on fire.