Ore UI

This feature is exclusive to Bedrock Edition and Minecraft Education.
 
Ore UI
Ore UI.png: Infobox image for Ore UI the program in Minecraft
Developer(s)

Paulo Ragonha, Fernando Vía Canel, Marlon Huber-Smith, Anna Päärni, Danila Dergachev, Omar ElGaml, James Nicholls

Publisher(s)

Mojang Studios

Platform(s)

Same as in Bedrock Edition

Engine

Coherent Gameface

Written in

TypeScript and JavaScript

Latest version

React Facet: v18.3.0

Release date

First commit on October 11, 2021[1]

Size

1.52MB

License

MIT License

Source available

Yes

Links 

{
    "title": "Ore UI",
    "rows": [
        {
            "field": "Paulo Ragonha, Fernando Vía Canel, Marlon Huber-Smith, Anna Päärni, 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)''",
            "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.3.0 v18.3.0]",
            "label": "Latest version"
        },
        {
            "field": "First commit on October 11, 2021",
            "label": "Release date"
        },
        {
            "field": "1.52MB",
            "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. Built on React and TypeScript, it provides reusable building blocks for video game development and general-purpose web applications.[2] Ore UI is currently used in games such as Minecraft: Bedrock Edition, Bedrock Editor, Minecraft Education, and Minecraft Legends.

Bedrock Edition's new UI design system overhaul[3]
Bedrock Edition's new UI design system overhaul (Updated version)[4]

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]

Unlike JSON UI, Ore UI is hard-coded and cannot be modified by resource packs.[10][11][12] Ore UI also does not support color codes[13][14][15] or emoji.[16][17]

Development

Bedrock Edition's UI redesign tech preview

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 Bedrock Edition title screen redesign featuring a user-friendly input for touch, controller, and keyboard, was shown at the dotJS 2018 developer conference.

Bedrock Edition's UI redesign tech preview, shown in 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 you can freely interact with the UI redesign.[7] The original link for the documentation now redirects to a completely different website, making the documentation completely inaccessible, and is now considered lost media.

On July 31, 2020, the very first look at the new achievements screen was revealed in Bedrock Edition beta 1.16.100.50, rolled out gradually for 5% players.[18] For the next 9 weeks, the number of players who can access the new achievements increases slowly from 5% to 75%.[19]

React Facet

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

On October 25, 2021,[21] 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.

Design system

The Ore UI design system can be found inside the Ore UI Developer Page section in the Minecraft Bedrock Developer Mode.

  • Ore UI Developer Pages section.
    Ore UI Developer Pages section.
  • Hero button states.
    Hero button states.
  • Primary button states.
    Primary button states.
  • Secondary button states.
    Secondary button states.
  • Destructive button states.
    Destructive 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.
  • Switch states.
    Switch 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.

History

Bedrock Edition

Bedrock Edition
1.16.100beta 1.16.100.50 Achievement screen has been updated to match Ore UI, available in beta only, rolled out gradually for 5% players[18].
ReleaseAchievement screen is released to the public and no longer in beta only.
1.18.30beta 1.18.20.21 Create New World screen has been updated to match Ore UI, available in beta only.
1.19.20Create New World screen is released to the public and no longer in preview only.
1.19.40Preview 1.19.40.20 Control mode screen has been added to match Ore UI, available in preview only.
Preview 1.19.40.22 Report button screen in Profile (Other Player) screen has been updated to match Ore UI, available in preview only.
Preview 1.19.40.23 Notification screen has been updated to match Ore UI, available in preview only.
ReleaseNotification screen is released to the public and no longer in preview only.
1.19.50Control mode screen is released to the public and no longer in preview only.
Report button screen in Profile (Other Player) screen is released to the public and no longer in preview only.
1.19.80Preview 1.19.80.20 You Died screen (Experimental) toggle in Death screen has been updated to match Ore UI, available in preview only.
Editor screen has been added to match Ore UI, available in preview only.
Preview 1.19.80.21 Sign in screen has been updated to match Ore UI, available in preview only.
ReleaseSign in screen is released to the public and no longer in preview only.
1.20.30Preview 1.20.30.22 "Worlds" tab in Play screen has been updated to match Ore UI, available in preview only.
Release You Died screen (Experimental) toggle in Death screen is released to the public and no longer in preview only.
1.20.60Preview 1.20.60.21 "Friends" tab in Play screen has been updated to match Ore UI, available in preview only.
Preview 1.20.60.23 Edit World screen has been updated to match Ore UI, available in preview only[22].
Inbox screen has been added to match Ore UI, available in preview only[23].
Realms Stories screen has been added to match Ore UI, available in preview only.
Preview 1.20.60.25 Get Started button on Quick World Creation in Game Mode screen and Survival Difficulty screen has been added to match Ore UI, available in preview only.
ReleaseInbox screen is released to the public and no longer in preview only.
Get Started button on Quick World Creation in Game Mode screen and Survival Difficulty screen is released to the public and no longer in preview only.
1.20.80Preview 1.20.80.21 "Servers" tab in Play screen has been updated to match Ore UI, available in preview only.
Preview 1.20.80.23 Search for players screen has been updated to match Ore UI, available in preview only.
Death screen is released to the public and no longer in You Died screen (Experimental) toggle.
ReleaseSearch for players screen is released to the public and no longer in preview only.
Realms Stories screen is released to the public and no longer in preview only.
1.21.0Preview 1.21.0.20 Profile screen has been updated to match Ore UI, available in preview only.
Preview 1.21.0.25 "Servers" tab (MOTD) in Play screen has been updated to match Ore UI, available in preview only.
ReleaseProfile screen is released to the public and no longer in preview only.
1.21.20Preview 1.21.10.21 The texture of Control mode screen has been changed to match Ore UI.
Preview 1.21.20.21 Bed screen (Experimental) toggle in Sleep screen has been updated to match Ore UI, available in preview only.
ReleaseAchievement button in title screen and pause menu has been replaced with the profile button, along with the new profile screen, showing the player's statistics, achievements, and screenshots.[verify]
1.21.30Preview 1.21.30.22 Screenshot Gallery screen in Profile screen has been added to match Ore UI, available in preview only.
Preview 1.21.30.24 "Worlds" Tab in Play screen on Create From Template button screen has been updated to match Ore UI, available in preview only.
ReleaseScreenshot Gallery screen in Profile screen is released to the public and no longer in preview only.
1.21.40Preview 1.21.40.22 "Realms" tab in Play screen has been updated to match Ore UI, available in preview only.
1.21.50Preview 1.21.50.24Sleep screen is released to the public and no longer in Bed screen (Experimental) toggle.
ReleaseSleep screen is released to the public and no longer in preview only.
Editor screen is released to the public and no longer in preview only.
December 28, 2024Edit World screen is released to the public and no longer in preview only.
1.21.60Play screen is released to the public and no longer in preview only.
1.21.70Preview 1.21.70.22 Player Permissions screen in Pause menu screen has been updated to match Ore UI, available in preview only.
Preview 1.21.70.23 The Report Bad Behavior screen in Profile (Other Player) screen has been changed to match Ore UI.
"Report" screen has been renamed to "Report Bad Behavior" screen.
ReleasePlayer Permissions screen in Pause menu screen is released to the public and no longer in preview only.
The "Friends" drawer is now accessible from the main menu and the pause screen.
1.21.80Preview 1.21.80.25 Multiplayer and Server list in Disconnected screen or Kick screen has been updated to match Ore UI, available in preview only.
1.21.90Preview 1.21.90.25 Quick World Creation in Select Character screen and Ready To Play screen has been added to match Ore UI, available in preview only.
ReleaseQuick World Creation in Select Character screen and Ready To Play screen is released to the public and no longer in preview only.
1.21.100Preview 1.21.100.20 Audio Settings screen has been updated to match Ore UI, available in preview only.
Preview 1.21.100.22 The Multiplayer and Server list in Disconnected screen or Kick screen in added Show Details button on added Error Details screen has been changed to match Ore UI, available in preview only.
ReleaseMultiplayer and Server list in Disconnected screen or Kick screen is released to the public and no longer in preview only.
1.21.111Preview 1.21.110.20 The Edit World screen for Minecraft Realms has been updated to match Ore UI, available in preview only.
Preview 1.21.110.25 "Social" tab button on people screen in Pause menu screen has been updated to match Ore UI, available in preview only.
"Friends" tab has been renamed to "Social" tab, available in preview only.
Release Achievement screen has been changed to match Ore UI.
1.21.120Preview 1.21.120.22 Accessibility and Language Settings screen has been updated to match Ore UI, available in preview only.
Preview 1.21.120.23 The Multiplayer and Server list in Disconnected screen or Kick screen in added Learn More button has been changed to match Ore UI.
Preview 1.21.120.24 General Settings screen has been updated to match Ore UI, available in preview only.
Release"Social" tab screen in Pause menu screen is released to the public and no longer in preview only.
"Friends" tab has been renamed to "Social" tab, is released to the public and no longer in preview only.
Upcoming Bedrock Edition
1.21.130Preview 1.21.130.24 Video Settings screen has been updated to match Ore UI, available in preview only.

Minecraft Education

Minecraft Education
1.21.90Preview 1.21.90.1Added Ore UI for new world screen.
Create New World and Edit World screen has been updated to match Ore UI.

Ore UI Versions

0.1.2Stabilize automated performance tests.
Add ESLint checks.
Fix Style updates not properly cleaning previous subscriptions.
0.1.3Fix unmount cleanup of Facets.
0.1.4Separate setWithCallback support from set in facet.
0.2.0Add support for null values on some built-in equality checks.
Add support for multiple facets in useFacetCallback and useFacetEffect.
0.2.1Add "contribute" file with publishing documentation.
Fix useFacetCallback return type.
0.2.2Add login instructions to CONTRIBUTING.md.
useFacetState setter memoized.
0.2.3Add index to Map tests.
Add a condition property to the Mount component.
Rename useFacetEffect to useFacetLayoutEffect and add a new useFacetEffect.
Add With component to refine mounted components Facet type.
Deferred Mount feature: DeferredMountWithCallback.
0.3.0Add support for id attribute.
Fix missing public APIs from published npm package.
Rename RemoteFacet to SharedFacet.
Rename shared to shared-facet.
Update README.md.
Make the types defined in the hooks more dynamic.
Add tscompiler paths for our packages.
Adding pr as a trigger of actions.
0.3.2Introduce multiObserve and hasDefinedValue helpers.
0.3.3Update the types of the useFacetCallback function.
Fix circular dependency.
0.3.4Fix line endings settings for prettier.
Allow null as return value of the mount components.
0.3.5Added a deferred mount config provider.
0.3.6Support onMouseMove handler.
0.3.7Fix memory leak caused by not removing child from parent.
0.3.8Fix createFacet equalityCheck to not fire for undefined or null.
0.3.9Added createFacetContext.
0.3.10Added defaultEqualityCheck to createFacet, and introduced createStaticFacet.
0.3.11Support data- properties related to narration.
0.3.12Upgrade TypeScript version + tie VSCode TS version to workspace.
0.4.0Convert some key null coalescing operators into explicit ternaries.
Move responsibility of cleaning up effects from facets to useEffect() / useFacetEffect().
0.4.1Upgrade Yarn to 3.2.4.
Turn off static access logs in test environment.
Added improved logging to static facet context.
0.4.2Make it possible to supply an initial value for useFacetRef.
Support defaultReturnValue in useFacetCallback.
0.4.3New linting rule to detect import issues.
0.4.4Lock nodejs version.
Fix useFacetCallback having outdated values.
Fix useFacetCallback mismatch subscriptions.
Only accept numerical characters if the input type is number.
0.4.5Update the list of maintainers in the README.md file.
Keep useFacetCallback instance same even if facets instances change.
0.5.0Tweak hasDefinedValue typing.
Adds support for custom equality checks on unwrap.
Batching support.
0.5.1Add support for Gameface's cohinline attribute in dom-fiber.
Update the list of maintainers in the README.md file.
Force strict comparison eqeqeq eslint rule.
Revert to using void as cleanup type for useFacetEffect.
0.5.2Adding bigint to Value type.
0.5.3Fix children being called with null and undefined.
0.5.4Added support for foreignObject in our custom renderer.
0.6.0Added property count to Map to make length of provided array available.
Cached maps useFacetMemo can return values before any subscription.
0.6.1Fix useFacetUnwrap support for custom equality check.
0.6.2Updated puppeteer to the latest version.
Update the useSharedFacet typing.
0.6.4Correctly export fireEvent from renderer.ts.
18.0.0Update to React 18.
18.1.0Support for React 18's useTransition and startTransition.
18.2.0Move documentation from separate branch to main branch.
Added comment for code smell using useFacetCallback.
Fix issue with incorrect typing for StrictReactNode.
New Unwrap and Times helper components.
18.3.0Documentation improvements & spring cleaning.
Fix support for updating equality checks of useFacetWrapMemo.

Issues

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.

Gallery

Screenshots

Development screenshots

dotJS 2018

Ore UI-styled screenshots

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.

Video

Developer for Ore UI

See also

Release

Preview

References

  1. ↑ "first commit · Mojang/ore-ui@a899c6a" – GitHub.
  2. ↑ "Mojang/ore-ui: 💎 Building blocks to construct game UIs using web tech." – GitHub.
  3. ↑ "Thanks for everyone that attended my talk live at @ReactAdvanced. For anyone that couldn't attend, I'll post a link here once it is available for everyone. It was a developer conference, but if you were waiting for a sneak peek on the new UI components... here it is ☺️" – @pirelenito on X (formerly Twitter), October 26, 2021
  4. ↑ "Mojang 2022 - Now" – Senior UX/UI Designer.
  5. ↑ "GameTest Q&A 2021/08/06" – Bedrock Wiki.
  6. ↑ a b "Using React to Build Performant Game UIs in Minecraft - Paulo Ragonha, React Advanced 2021" – December 27, 2021 on YouTube
  7. ↑ a b c "dotJS 2018 - Tobias Ahlin - Adding JavaScript to Minecraft" – March 4, 2019 on YouTube
  8. ↑ "Powered by Coherent Labs" – Coherent Labs.
  9. ↑ "Coherent Gameface" – Coherent Labs.
  10. ↑ "No. Allowing directly changing screens is what made improving the UI design of Minecraft impossible: any change breaks existing mods. It's the same reason why there is a graveyard of abandoned mods for Java Minecraft – not every modder has time to make updates for every release." – @Volgar on X (formerly Twitter), December 9, 2024
  11. ↑ "Intro to JSON UI" – Bedrock Wiki, April 1, 2024.
  12. ↑ MCPE-180757 — HBUI texture files are not in the "resource_packs" folder — resolved as "Works As Intended".
  13. ↑ "It probably won't be supported in the new screens, but it certainly shouldn't look like this, just plain text. Thanks, I'll pass it to the team." – @Volgar on X (formerly Twitter), December 12, 2024
  14. ↑ MCPE-174371 — The new "Play screen" UI doesn't support colored characters — resolved as "Works As Intended".
  15. ↑ MCPE-152246 — New Create New World UI doesn't support text formatting codes — resolved as "Works As Intended".
  16. ↑ "Emojis & Symbols" – Bedrock Wiki, April 1, 2024.
  17. ↑ MCPE-185774 — New server UI does not show some characters — resolved as "Won't Fix".
  18. ↑ a b "Uh-oh! I think I pressed something, and now 5% of #Minecraft beta users will see the new achievements screen. Well, might as well ask for feedback here: https://aka.ms/mcAchievementBeta." – @Volgar on X (formerly Twitter), July 31, 2020
  19. ↑ "I'll provide more context later, but... jam. It gets everywhere. Hence a whopping 75% of #Minecraft players have a chance to see the new achievements screen both in the latest release and the latest beta. Stay tuned! Ta-tah!" – @Volgar on X (formerly Twitter), December 10, 2020
  20. ↑ "Importing codebase from internal repository (#1) · Mojang/ore-ui@96c107c" – GitHub.
  21. ↑ "Schedule" – React Advanced.
  22. ↑ "Well, actually, that's not all, my dears. In today's preview the new Edit World screen is rolling out too! Check it out, and use the feedback button on the screen to tell us what you think." – @Volgar on X (formerly Twitter), December 13, 2023
  23. ↑ "Howdy, my dears! In case you missed it, there is now new Inbox screen built with Ore UI available in #Minecraft preview builds. It's a work in progress, but hopefully it'd be a hub for release notes, invitations etc" – @Volgar on X (formerly Twitter), December 13, 2023
  24. ↑ "So far the HUD only has the hotbar." – @xKingDarkYT on X (formerly Twitter), December 28, 2024
  25. ↑ a b c "New inventory, dropper/dispenser and hopper OreUI screens." – @nipitare_ on X (formerly Twitter), September 4, 2025
  26. ↑ a b "Anvil and the Crafting Table screens in OreUI" – @SmokeyStack_ on X (formerly Twitter), August 12, 2025
  27. ↑ a b "New OreUI crafting recipe screen in #Minecraft
    First image is unlocked recipes, second one locked ones
    Note: Amount of rows might be inaccurate and don't worry about bread."     – @nipitare_ on X (formerly Twitter), September 9, 2025
  28. ↑ "Looks still early wip but could be soon... maybe as soon as next year?" – @xKingDarkYT on X (formerly Twitter), November 20, 2024
  29. ↑ "Some part of new trading screen in OreUI. Code wise trade offers seem to be implemented but cannot get them to work." – @nipitare_ on X (formerly Twitter), September 23, 2025
  30. ↑ a b c d "OreUI versions of the container screens" – @xKingDarkYT on X (formerly Twitter), December 28, 2024
  31. ↑ a b c d "Apparently OreUI screens are side by side if you use pocket ui profile. This applies to all OreUI container screens, shulker box and anvil are just examples." – @nipitare_ on X (formerly Twitter), September 18, 2025
  32. ↑ a b "An OreUI version of the player permissions screen was added in today's Preview (1.21.60.25)" – @xKingDarkYT on X (formerly Twitter), January 8, 2025
  33. ↑ "Seems like Mojang is working on a party system?" – @xKingDarkYT on X (formerly Twitter), February 28, 2025
  34. ↑ "New disconnection screen." – @xKingDarkYT on X (formerly Twitter), February 28, 2025
  35. ↑ "New Character Selector screen in #Minecraft Bedrock" – @inotflying on X (formerly Twitter), May 8, 2025
  36. ↑ "Realms upcoming feature sneak peek 👀

    Bedrock Realm owners will have the option to require that players opt-in to the Realm's Timeline if they want to play on the Realm."     – @CornerHardMC on X (formerly Twitter), May 16, 2025
  37. ↑ "Small Realms improvement coming in 1.21.90: there's a new "Add Members" button that takes you directly to the screen that allows you to add members to your Realm" – @CornerHardMC on X (formerly Twitter), May 24, 2025
  38. ↑ "A look at early abandoned designs of the Start Screen (Main Menu)
    Left image is from 2019
    Right image is from 2020"     – @xKingDarkYT on X (formerly Twitter), April 24, 2023
  39. ↑ https://twitter.com/xKingDarkTV/status/1650372641637687296

External links

Navigation

  • v
  • t
  • e
Minecraft: Bedrock Edition
Editions
Merged
Ports to consoles
Discontinued
Development
Version history
Technical
Multiplayer
Exclusive features
Effects
Unused
Removed
This article is issued from Minecraft Wiki. The text is available under CC BY-NC-SA 3.0 unless otherwise noted. Additional terms may apply for the media files.