Ore UI

{
 "title": "Ore UI",
 "rows": [
 {
 "field": "Paulo Ragonha, Fernando Vía Canel, Marlon Huber-Smith, Anna Päärni, (link to Oleg Kozitsyn article, displayed as Oleg Kozitsyn), Danila Dergachev, Omar ElGaml, James Nicholls",
 "label": "Developer(s)"
 },
 {
 "field": "(link to Mojang Studios article, displayed as Mojang Studios)",
 "label": "Publisher(s)"
 },
 {
 "field": "Same as in ''(link to Bedrock Edition article, displayed as Bedrock Edition)'', ''(link to Minecraft Education article, displayed as Minecraft Education)'', and ''(link to China Edition article, displayed as China Edition)''",
 "label": "Platform(s)"
 },
 {
 "field": "[https://coherent-labs.com/products/coherent-gameface/ Coherent Gameface]",
 "label": "Engine"
 },
 {
 "field": "(link to wikipedia:TypeScript article, displayed as TypeScript) and (link to wikipedia:JavaScript article, displayed as JavaScript)",
 "label": "Written in"
 },
 {
 "field": "React Facet: [https://github.com/Mojang/ore-ui/releases/tag/v18.6.0 v18.6.0]",
 "label": "Latest version"
 },
 {
 "field": "First commit on October 11, 2021",
 "label": "Release date"
 },
 {
 "field": "1.57MB",
 "label": "Size"
 },
 {
 "field": "(link to wikipedia:MIT License article, displayed as MIT License)",
 "label": "License"
 },
 {
 "field": "Yes",
 "label": "<span style=\"white-space:normal\">Source available</span>"
 },
 {
 "field": "\n* [https://github.com/Mojang/ore-ui Website]",
 "label": "Links"
 }
 ],
 "invimages": [],
 "images": [
 "Ore UI.png"
 ]
}

Ore UI is a collection of open source packages designed for building interactive video game user interfaces using web technology, written in the TypeScript programming language and utilizing the React library. It provides reusable building blocks for video game development and general-purpose web applications.^[2] Ore UI is currently used in Minecraft games such as Bedrock Edition, Bedrock Editor, Minecraft Education, China Edition, and Minecraft Legends.

In Bedrock Edition, a new UI design system is being developed using the Gameface engine (formerly Hummingbird^[5]) by Coherent Labs,^[6][7][8] which made it possible to run modern web technology such as JavaScript, HTML and CSS.^[9]

On November 9, 2018, Tobias Ahlin, the lead experience designer at Mojang Studios, announced a UI overhaul coming to Bedrock Edition built on Hummingbird engine, which runs a subset of HTML and CSS, and a design system built with React.^[7] A tech preview for the title screen redesign featuring a user-friendly input for touch, controller, and keyboard was shown at the dotJS 2018 developer conference.

The new title screen from the tech preview features two pages. The top page shows the player's last played world, with the background UI that changes to match the world's thumbnail. The bottom page shows five interactable buttons and their actions possibly:

• "Play" which lets the player navigate to the Select World screen.
• "Store" which lets the player navigate to the store (similar to the modern Marketplace).
• "Skins" which lets the player change their skin (similar to the modern Character Creator).
• "Achievements" and "Settings" which let the player view their achievements and settings.

There is also a profile button (with the player's profile picture) on the top right corner, which likely lets the player navigate to their profile screen.

The website for Minecraft JavaScript API documentation was once available through a link which can be seen near the end of the talk; the documentation provides the page to the tech preview where users could freely interact with the redesigned user interface.^[7] The original link for the documentation now redirects to a completely different website, making the documentation inaccessible; it is now considered lost media as it has not been archived elsewhere.

In beta 1.16.100.50, released on July 31, 2020, the new achievements screen was added. It was rolled out initially for 5 percent of the player base.^[10] For the next 9 weeks, the number of players who could access the new achievement UI gradually increased from 5% to 75%.^[11]

In the following years, more JSON UI menu screens were gradually refreshed with Ore UI, with design previews available in Minecraft Preview before full release in usually a few months. The internal resources for Ore UI include a texture atlas containing revamped textures for in-game GUIs, such as the inventory. These have been teased to be in early development.

On October 18, 2021, the React Facet source code was published on Ore UI GitHub repository under the MIT License.^[12]

On October 25, 2021,^[13] Paulo Ragonha, a tech lead at Mojang Studios, introduced React Facet, an observable-based state management for video game user interface built in React.^[6] This was announced at the React Advanced 2021 developer conference. In the talk, Ragonha showcases how React Facet bridges game data by introducing a system that connects the backend C++ game engine (where the game's states reside) with the frontend JavaScript UI. This connection relies on a concept called "facets", which are lightweight observable objects representing slices of the game's state. These facets allow the UI to subscribe to specific pieces of data from the game engine, such as player health, inventory, or environmental changes, and receive real-time updates as the state changes in the game.

The Ore UI design system can be found inside the Ore UI Developer Page section in the Minecraft Bedrock Developer Mode. For all texture elements, see Bedrock Edition GUI, UI, and Ore UI textures § Ore UI.

• 👁 Ore UI Developer Pages section
  
  Ore UI Developer Pages section
• 👁 Hero (green with Minecraft Ten font) button states
  
  Hero (green with Minecraft Ten font) button states
• 👁 Primary (green with Mojangles font) button states
  
  Primary (green with Mojangles font) button states
• 👁 Secondary (white) button states
  
  Secondary (white) button states
• 👁 Destructive (red) button states
  
  Destructive (red) button states
• 👁 Modal with placeholder content
  
  Modal with placeholder content
• 👁 A dummy modal
  
  A dummy modal
• 👁 Checkboxes in action
  
  Checkboxes in action
• 👁 Checkbox states
  
  Checkbox states
• 👁 Dropdown button states
  
  Dropdown button states
• 👁 Radio button states
  
  Radio button states
• 👁 Slider states
  
  Slider states
• 👁 Toggle states
  
  Toggle states
• 👁 Text field states
  
  Text field states
• 👁 Toggle button states
  
  Toggle button states
• 👁 Tab button states
  
  Tab button states
• 👁 All tag variants
  
  All tag variants

The menu screens updated with Ore UI implemented new features using the design system, such as informative (and sometimes humorous) descriptions, smaller fonts for readability, clearer and modern layouts, more responsive sliders, more different types of elements, and tags. The buttons are styled similarly to JSON UI, with updated looks, pressing animations, and exclusive sounds for progressive buttons. Certain menus have received additional animations and images, and all UI textures have been updated, including controller hints.

Unlike JSON UI, Ore UI menus are separated into sections containing the elements. Depending on the UI scaling, each section is individually scaled, leaving gaps for the panorama in smaller scales, while some elements like the top navigation bar remain responsive. Dropdown buttons, which open an options pop-up, are replaced with always visible toggle buttons on smaller UI scales. Ore UI supports an additional accessibility scaling option to increase the scaling.

Ore UI is currently used in the following menu screens (including sub-menus):

• Sign in
• Quick world creation
• Pop-ups on the Main menu
• Play
• Create new world
• Edit world
• All settings tabs & main settings UI except for Global Resources, Party, Storage, Resource Packs, and Behavior Packs. Realms uses the old UI for all settings.
• Inbox
• Social drawer
• Search for players
• Profile
• Suspended
• Report bad behavior
• Screenshot gallery
• Achievements
• Player permissions (except Realms)
• Realms information & purchase screens
• Realms hub
• Edit world Realms
• Death
• Sleep

Additionally, the toast that appears after 15 minutes of inactivity, along with the overlay, is based on Ore UI.

• World and Realm selection for local uploading to Realms.
• Storage settings tab.

• Create new project
• Projects tool mode

• Main menu

• Create new world
• Edit world
• Death
• Sleep

• Skin store
• Mod store
• Play
• Create new world
• Mini map

These are standalone Ore UI releases on GitHub.

Issues relating to "Ore UI", "OreUI", "New UI", "NewUI", or "New design" are maintained on the bug tracker. Issues should be reported and viewed there.

• The in-game descriptions of features are sometimes remarkable or humorous. Notable quotes are:
  • Explore a mysterious world where you build, collect, craft, and fight monsters.
  • Whatever the default game mode is... that's what you get.
  • You can't respawn if you die. Good luck! You'll need it.
  • A mysterious series of numbers used to create your world
  • Might want to build with stone
  • Red box goes boom
  • Enjoy Minecraft with friends
  • Minecraft is for everyone, including you
  • Shiny glint for enchanted items
  • Reverses up and down when looking around. A less common option for keyboard and mouse users, but you do you.
  • We didn't know where else to put these settings
  • Technical info that's not relevant to players. Feel free to have a look if you're curious!
  • Not a trick question. How smooth do you like your blocks?
  • Happy little clouds in the sky
  • Leaves but better
  • Bubbles with style
  • Minecraft, in full screen

• 👁 "Worlds" tab in the Play screen (grid view)
  
  "Worlds" tab in the Play screen (grid view)
• 👁 "Worlds" tab in the Play screen (list view)
  
  "Worlds" tab in the Play screen (list view)
• 👁 "Create from..." screen, showing world templates
  
  "Create from..." screen, showing world templates
• 👁 Create new world screen
  
  Create new world screen
• 👁 Edit world screen
  
  Edit world screen
• 👁 "Realms" tab in the Play screen, when not owning a Realm
  
  "Realms" tab in the Play screen, when not owning a Realm
• 👁 "Realms" tab in the Play screen, on an owned Realm
  
  "Realms" tab in the Play screen, on an owned Realm
• 👁 Realms Hub
  
  Realms Hub
• 👁 "Servers" tab in the Play screen
  
  "Servers" tab in the Play screen
• 👁 Settings screen
  
  Settings screen
• 👁 Inbox screen
  
  Inbox screen
• 👁 Player permissions screen in the game menu
  
  Player permissions screen in the game menu
• 👁 Sleeping screen
  
  Sleeping screen
• 👁 Death screen in Survival or Adventure mode
  
  Death screen in Survival or Adventure mode
• 👁 Death screen in Hardcore mode
  
  Death screen in Hardcore mode
• 👁 Social drawer in the Play screen
  
  Social drawer in the Play screen
• 👁 Social drawer when in a party
  
  Social drawer when in a party
• 👁 Profile screen
  
  Profile screen
• 👁 Search for players screen
  
  Search for players screen
• 👁 Report bad behavior screen
  
  Report bad behavior screen
• 👁 Screenshot gallery in the Profile screen
  
  Screenshot gallery in the Profile screen
• 👁 Achievements screen
  
  Achievements screen

• 👁 Main menu screen
  
  Main menu screen
• 👁 Create new project screen
  
  Create new project screen
• 👁 A project in tool mode
  
  A project in tool mode

• 👁 Create new world screen
  
  Create new world screen
• 👁 Edit world screen
  
  Edit world screen

• 👁 Skin Store screen
  
  Skin Store screen
• 👁 Mod Store screen
  
  Mod Store screen
• 👁 Play screen
  
  Play screen
• 👁 Create new world screen
  
  Create new world screen
• 👁 Mini-map screen
  
  Mini-map screen

• 👁 An older version of the atlas file.
  
  An older version of the atlas file.
• 👁 An older version of the atlas file.
  
  An older version of the atlas file.
• 👁 An older version of the atlas file.
  
  An older version of the atlas file.
• 👁 An older version of the atlas file.
  
  An older version of the atlas file.
• 👁 An older version of the atlas file.
  
  An older version of the atlas file.
• 👁 The current version of the atlas file.
  
  The current version of the atlas file.

• 👁 A sneak peek of the achievement screen.
  
  A sneak peek of the achievement screen.
• 👁 A sneak peek of the achievement details screen.
  
  A sneak peek of the achievement details screen.

• 👁 A sneak peek of the create new world screen, showing a part of the "Create" button.
  
  A sneak peek of the create new world screen, showing a part of the "Create" button.
• 👁 Another sneak peek of the create new world screen, showing the world's difficulty selector.
  
  Another sneak peek of the create new world screen, showing the world's difficulty selector.
• 👁 A sneak peek of the create new world screen, showing active resource packs section.
  
  A sneak peek of the create new world screen, showing active resource packs section.

• 👁 An early look of the old hotbar.[26]
  
  An early look of the old hotbar.^[26]
• 👁 An early look of the new hotbar.[27]
  
  An early look of the new hotbar.^[27]
• 👁 An early look of the old inventory screen.[28]
  
  An early look of the old inventory screen.^[28]
• 👁 An early look of the new inventory and recipe book screen.[29]
  
  An early look of the new inventory and recipe book screen.^[29]
• 👁 An early look of the old crafting table screen.[30]
  
  An early look of the old crafting table screen.^[30]
• 👁 An early look of the new workbench screen.[31][32]
  
  An early look of the new workbench screen.^[31][32]
• 👁 An early look of the inventory, workbench, and recipe book screen.[33]
  
  An early look of the inventory, workbench, and recipe book screen.^[33]
• 👁 An early look of the old crafting recipe screen.[34]
  
  An early look of the old crafting recipe screen.^[34]
• 👁 An early look of the old locked crafting recipe screen.[34]
  
  An early look of the old locked crafting recipe screen.^[34]
• 👁 An early look of the new recipe book screen.[31]
  
  An early look of the new recipe book screen.^[31]
• 👁 An early look of the new locked recipe book screen.[31]
  
  An early look of the new locked recipe book screen.^[31]
• 👁 An early look of the recipe book on input field screen.[35]
  
  An early look of the recipe book on input field screen.^[35]
• 👁 An early look of the old furnace screen.[36]
  
  An early look of the old furnace screen.^[36]
• 👁 An early look of the new furnace screen.[37]
  
  An early look of the new furnace screen.^[37]
• 👁 An early look of the lit furnace (100%) screen.[37]
  
  An early look of the lit furnace (100%) screen.^[37]
• 👁 An early look of the lit furnace (50%) screen.[37]
  
  An early look of the lit furnace (50%) screen.^[37]
• 👁 An early look of the smoker screen.[38]
  
  An early look of the smoker screen.^[38]
• 👁 An early look of the blast furnace screen.[38]
  
  An early look of the blast furnace screen.^[38]
• 👁 An early look of the old anvil screen.[30]
  
  An early look of the old anvil screen.^[30]
• 👁 An early look of the new anvil screen.[39]
  
  An early look of the new anvil screen.^[39]
• 👁 An early look of the anvil screen.[39]
  
  An early look of the anvil screen.^[39]
• 👁 An early look of the anvil screen.[39]
  
  An early look of the anvil screen.^[39]
• 👁 An early look of the anvil on input field screen.[35]
  
  An early look of the anvil on input field screen.^[35]
• 👁 An early look of the anvil on input field screen.[35]
  
  An early look of the anvil on input field screen.^[35]
• 👁 An early look of the grindstone screen.[40]
  
  An early look of the grindstone screen.^[40]
• 👁 An early look of the dropper and dispenser screen.[28]
  
  An early look of the dropper and dispenser screen.^[28]
• 👁 An early look of the hopper screen.[28]
  
  An early look of the hopper screen.^[28]
• 👁 An early look of the brewing stand screen.[40]
  
  An early look of the brewing stand screen.^[40]
• 👁 An early look of the trading screen.[41]
  
  An early look of the trading screen.^[41]
• 👁 An early look of the bundle tooltip.[42]
  
  An early look of the bundle tooltip.^[42]
• 👁 An early look of the bundle (50%) tooltip.[42]
  
  An early look of the bundle (50%) tooltip.^[42]
• 👁 An early look of the bundle (100%) tooltip.[42]
  
  An early look of the bundle (100%) tooltip.^[42]
• 👁 An early look of the magenta bundle tooltip.[43]
  
  An early look of the magenta bundle tooltip.^[43]
• 👁 An early look of the magenta bundle (50%) tooltip.[43]
  
  An early look of the magenta bundle (50%) tooltip.^[43]
• 👁 An early look of the magenta bundle (100%) tooltip.[43]
  
  An early look of the magenta bundle (100%) tooltip.^[43]
• 👁 An early look of the chest container screen.[44]
  
  An early look of the chest container screen.^[44]
• 👁 An early look of the barrel container screen.[44]
  
  An early look of the barrel container screen.^[44]
• 👁 An early look of the ender chest container screen.[44]
  
  An early look of the ender chest container screen.^[44]
• 👁 An early look of the shulker box container screen.[44]
  
  An early look of the shulker box container screen.^[44]
• 👁 An early look of the copper chest container screen.[45]
  
  An early look of the copper chest container screen.^[45]
• 👁 An early look of the exposed copper chest container screen.[45]
  
  An early look of the exposed copper chest container screen.^[45]
• 👁 An early look of the weathered copper chest container screen.[45]
  
  An early look of the weathered copper chest container screen.^[45]
• 👁 An early look of the oxidized copper chest container screen.[45]
  
  An early look of the oxidized copper chest container screen.^[45]
• 👁 An early look of the shulker box container screen.[46]
  
  An early look of the shulker box container screen.^[46]
• 👁 An early look of the red shulker box container screen.[46]
  
  An early look of the red shulker box container screen.^[46]
• 👁 An early look of the green shulker box container screen.[46]
  
  An early look of the green shulker box container screen.^[46]
• 👁 An early look of the blue shulker box container screen.[46]
  
  An early look of the blue shulker box container screen.^[46]
• 👁 An early look of the white shulker box container screen.[46]
  
  An early look of the white shulker box container screen.^[46]
• 👁 An early look of the black shulker box container screen.[46]
  
  An early look of the black shulker box container screen.^[46]
• 👁 An early look of the pocket UI profile of shulker box container screen.[47]
  
  An early look of the pocket UI profile of shulker box container screen.^[47]
• 👁 An early look of the classic UI profile of shulker box container screen.[47]
  
  An early look of the classic UI profile of shulker box container screen.^[47]
• 👁 An early look of the pocket UI profile of anvil screen.[47]
  
  An early look of the pocket UI profile of anvil screen.^[47]
• 👁 An early look of the classic UI profile of anvil screen.[47]
  
  An early look of the classic UI profile of anvil screen.^[47]

• 👁 An early look of the player permissions screen.[48]
  
  An early look of the player permissions screen.^[48]
• 👁 An early look of the Player Permissions screen.[48] (kick players confirmation dialog)
  
  An early look of the Player Permissions screen.^[48] (kick players confirmation dialog)

• 👁 An early look of the create party screen.[49]
  
  An early look of the create party screen.^[49]

• 👁 An early look of the disconnection screen.[50]
  
  An early look of the disconnection screen.^[50]

• 👁 A sneak peek of the quick world creation in select character screen.[51]
  
  A sneak peek of the quick world creation in select character screen.^[51]

• 👁 A sneak peek of the Realms Stories in "Timeline" tab opt in to timeline message.[52]
  
  A sneak peek of the Realms Stories in "Timeline" tab opt in to timeline message.^[52]
• 👁 A sneak peek of the Play screen in "Realms" tab - "Add Members" button.[53]
  
  A sneak peek of the Play screen in "Realms" tab - "Add Members" button.^[53]
• 👁 A sneak peek of the Realms owner screen.[54]
  
  A sneak peek of the Realms owner screen.^[54]
• 👁 A sneak peek of the realms hub screen.[55]
  
  A sneak peek of the realms hub screen.^[55]
• 👁 A sneak peek of the realms hub screen "community" tab.[56]
  
  A sneak peek of the realms hub screen "community" tab.^[56]

• 👁 Early prototype of Bedrock Edition's title screen UI redesign
  
  Early prototype of Bedrock Edition's title screen UI redesign
• 👁 Tech preview of Bedrock Edition's title screen UI redesign.
  
  Tech preview of Bedrock Edition's title screen UI redesign.
• 👁 An improved version of the tech preview with the panorama updated to match Update Aquatic from 2020.[57]
  
  An improved version of the tech preview with the panorama updated to match Update Aquatic from 2020.^[57]
• 👁 Bedrock Edition's achievement UI redesign.[58]
  
  Bedrock Edition's achievement UI redesign.^[58]

These UIs take design inspiration from Bedrock Edition's UI redesign, and are not really implemented through Ore UI framework, instead they may use resource pack or different implementation based on JSON UI.

• 👁 Quests screen in the Minecraft Movie Live Event.
  
  Quests screen in the Minecraft Movie Live Event.
• 👁 Map screen in the Minecraft Movie Live Event.
  
  Map screen in the Minecraft Movie Live Event.
• 👁 Return to Lobby confirmation dialog in the Minecraft Movie Live Event.
  
  Return to Lobby confirmation dialog in the Minecraft Movie Live Event.
• 👁 NPC conversation screen in the 15 Year Journey.
  
  NPC conversation screen in the 15 Year Journey.
• 👁 Sticker collected screen in the 15 Year Journey.
  
  Sticker collected screen in the 15 Year Journey.
• 👁 Return to Hub confirmation dialog in the 15 Year Journey.
  
  Return to Hub confirmation dialog in the 15 Year Journey.

Ore UI Documentation

This screen can only be access in Minecraft Bedrock Edition 1.20.0 (Dev).

• Ore UI

• Achievement in beta 1.16.100.50
  • Achievement Screen Beta Thread on July 30, 2020
• Create new world in beta 1.18.20.21
  • Updated “Create New World” experience in Bedrock Beta on January 27, 2022
• Death in Preview 1.19.80.20
  • Updated "You Died" Screen Experience on March 8, 2023
• Realms stories in Preview 1.20.60.23
  • Let's talk about Realms Stories on December 13, 2023
• Servers in Preview 1.20.80.21
  • Updated 'Servers Tab' Experience in Bedrock Preview on February 23, 2024
• Search for players in Preview 1.20.80.23
  • Enhancements to finding friends in Bedrock Preview on March 18, 2024
• Profile in Preview 1.21.0.20
  • Updated Player Profile in Bedrock Preview! on April 3, 2024
• Realms in Preview 1.21.20.21
  • Updated Realms Tab Experience in Bedrock Preview on April 23, 2024
• Screenshots in Preview 1.21.30.22
  • Screenshots available in Bedrock Preview! on August 7, 2024
• Create from template in Preview 1.21.30.24
  • Updated Template Screen Experience in Bedrock Preview! on April 11, 2024
• Play in 1.21.60
  • Let’s talk about the new Bedrock Edition Play screen! on December 12, 2024
• Player permissions in Preview 1.21.70.22
  • Improvements to the Player Permissions screen in Bedrock on February 5, 2025
• Social drawer on Party system in Preview 26.0.25
  • New Party System (Bedrock Preview) on December 10, 2025
• Settings in Preview 26.0.28
  • Let’s talk about our updated settings! (Bedrock) on January 12, 2026
• Realms hub in Preview 26.20.22
  • Bedrock Realms Hub on March 25, 2026