Skip to main content

Overview

Get up and running with @bedrock-core/ui in minutes.

⚠️ Beta Status: Active development. Breaking changes may occur until 1.0.0. Pin exact versions for stability.

This is not ready for production use.

What is @bedrock-core/ui?​

@bedrock-core/ui is a React-like UI framework for Minecraft Bedrock Edition that enables you to create rich, interactive user interfaces using JSX syntax. It serializes your UI components into a protocol and renders them using JSON UI with the companion Resource Pack.

For a pre-themed component set that matches vanilla Minecraft's look (buttons, cards, checkboxes, toggles, …), see the @bedrock-core/ore-styled layer. It's optional — pick it up when you want batteries-included visuals, skip it when you'd rather style every primitive yourself.

Learn React first​

If you're new to React, we strongly recommend starting with the official React tutorial:

Differences with React​

In Minecraft Bedrock because we use @minecraft/server-ui form api we are not able to mutate the UI directly without closing and displaying a new form.

The multiple attempts we made with this resulted in poor player interaction as cursor/controller focus gets lost and there is a delay between form closing and new presentation.

So it was decided to keep the logic executing in the background and present to the player a snapshot of the UI, and only update it on player input.

TLDR: UI logic keeps running in background but we only update player presented ui when they press a button.

Your First UI​

Here's a simple example to get you started:

import { render, Screen, Panel, Text, Button } from '@bedrock-core/ui';
import { world, Player, Entity, ButtonPushAfterEvent } from '@minecraft/server';
import { MinecraftEntityTypes } from '@minecraft/vanilla-data';

// Create a simple UI component
function WelcomeScreen() {
  return (
    <Panel padding={10} gap={8}>
      <Text>{'Welcome to Bedrock UI!'}</Text>

      <Button onPress={() => console.log('clicked')}>
        <Text>{'Click Me'}</Text>
      </Button>
    </Panel>
  );
}

const isPlayer = (source: Entity): source is Player => source.typeId === MinecraftEntityTypes.Player;

// Render it to a player
world.afterEvents.buttonPush.subscribe(({ source }: ButtonPushAfterEvent): void => {
  if (isPlayer(source)) {
    render(WelcomeScreen, source, Screen.Scroll);
  }
});

How It Works​

  1. Write JSX Components: Use familiar React-like syntax to define your UI
  2. Serialization: The framework converts your component tree into a serialized protocol and injects it into @minecraft/server-ui form components
  3. JSON UI Decoding: Resource Pack companion JSON UI files decode the serialized data
  4. Rendering: Players see rich, interactive UIs in Minecraft

Next Steps​

  • Installation - Set up the framework in your project
  • Components - Built-in components that you can use in your JSX
  • ore-styled - Themed component layer with vanilla Minecraft textures (optional)
  • Hooks - Add state and effects to your components
  • API - APIs that are useful for defining components