Elements
The built-in primitives: <block>, <fill>, and <group>
There are three primitives. They're lowercase JSX tags, like <div> or <span> in React DOM.
<block>
Places a single block. You can also pass blockState to set block states like facing, lit, waterlogged, etc.
<block coords={[10, 64, 10]} blockId="stone" />
<block coords={[10, 65, 10]} blockId="campfire" blockState={{ lit: true }} />Block IDs and their valid states are fully type-safe. The types are generated from minecraft-data, so you get autocomplete and type checking for block IDs and their corresponding states.
The generated types target Minecraft 1.21.10 by default. You can change MC_VERSION in packages/core/scripts/generate-block-types.ts and run pnpm --filter @world-tsx/core generate-types to regenerate for any version. For versions newer than what's bundled, you may need to update the minecraft-data package first.
<fill>
Fills a rectangular volume.
<fill from={[0, 0, 0]} to={[10, 4, 10]} blockId="cobblestone" /><group>
Offsets all children by a position. Groups nest, and offsets stack.
<group origin={[100, 64, 100]}>
{/* This block ends up at [101, 65, 100] */}
<block coords={[1, 1, 0]} blockId="stone" />
<group origin={[5, 0, 0]}>
{/* This block ends up at [105, 64, 105] */}
<block coords={[0, 0, 5]} blockId="oak_planks" />
</group>
</group>