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: v0.6.4

Release date

First commit on October 11, 2021[1]

Size

1.18 MB

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/v0.6.4 v0.6.4]",
            "label": "Latest version"
        },
        {
            "field": "First commit on October 11, 2021",
            "label": "Release date"
        },
        {
            "field": "1.18 MB",
            "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, 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]

Warning

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]

History

Bedrock Edition's UI redesign tech preview

In 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 considered a lost media.

In 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

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

In 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 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

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

  • OreUI Developer Pages section.
    OreUI Developer Pages section.
  • All states of the hero button.
    All states of the hero button.
  • All states of the primary button.
    All states of the primary button.
  • All states of the secondary button.
    All states of the secondary button.
  • All states of the destructive button.
    All states of the destructive button.
  • All states of the toggle (on / off).
    All states of the toggle (on / off).
  • All states of the radiobuttons (on / off).
    All states of the radiobuttons (on / off).
  • Multiple choices, sliders and input field.
    Multiple choices, sliders and input field.

Update history

Bedrock Edition
1.16.100beta 1.16.100.50 Achievement UI has been updated to match Ore UI, rolled out gradually for 5% players.[18]
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 updated to match Ore UI, available in preview only.
Preview 1.19.40.22 Profile screen in Report screen has been updated to match Ore UI, available in preview only.
1.19.50Control mode screen is released to the public and no longer in preview only.
Profile screen in Report screen is released to the public and no longer in preview only.
1.19.80Preview 1.19.80.20 “You Died” screen (Experimental) toggle has been added to enable the new version of the Death screen, 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 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 screen has been updated to match Ore UI, available in preview only[22].
Added Inbox screen has been updated to match Ore UI, available in preview only[23].
Preview 1.20.60.25 Get Started button on added Quick World Creation in added Game Mode screen and added Survival Difficulty screen has been updated 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.
The updated “You Died” screen is no longer experimental.
ReleaseSearch for players screen is released to the public, 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 Settings Touch control mode screen has been changed to match Ore UI.
Preview 1.21.20.21 Sleep "bed screen" (Experimental) toggle 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.
1.21.30Preview 1.21.30.22 Added Screenshot Gallery screen has been updated to match Ore UI, available in preview only.
Preview 1.21.30.24 Play screen - Create From Template screen has been updated to match Ore UI, available in preview only.
ReleaseScreenshot Gallery 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 "bed screen" is released to the public and no longer experimental.
ReleaseSleep "bed screen" is released to the public and no longer in preview only.
December 28, 2024Edit 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 has been updated to match Ore UI, available in preview only.
Preview 1.21.70.23 The profile screen in Report Bad Behavior screen has been changed to match Ore UI.
"Report" screen has been renamed to "Report Bad Behavior" screen.
ReleasePlayer permissions 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 has been updated to match Ore UI, available in preview only.
1.21.90Preview 1.21.90.25 Quick World Creation in added Select Character screen and added Ready To Play screen has been updated 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.
Upcoming Bedrock Edition
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 in added Show Details button on added Error Details screen has been changed to match Ore UI, available in preview only.
1.21.110Preview 1.21.110.20 The Edit World screen for Minecraft Realms has been updated to match Ore UI, available in preview only.
Minecraft Education
1.21.90Preview 1.21.90.1Added Ore UI for new world screen.
This article is a work in progress.
 
Please help expand and improve it. The talk page may contain suggestions.
Note: Please Screenshot
File:New UI - Create New World Screen Menu (Education 1.21.90).png File:New UI - Edit World Screen Menu (Education 1.21.90).png Create New World and Edit World settings screen has been updated to match Ore UI.

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.

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.

Video

Developer for Ore UI

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. ↑ "Looks still early wip but could be soon... maybe as soon as next year?" – @xKingDarkYT on X (formerly Twitter), November 20, 2024
  25. ↑ a b c d "OreUI versions of the container screens" – @xKingDarkYT on X (formerly Twitter), December 28, 2024
  26. ↑ "So far the HUD only has the hotbar." – @xKingDarkYT on X (formerly Twitter), December 28, 2024
  27. ↑ 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
  28. ↑ "Seems like Mojang is working on a party system?" – @xKingDarkYT on X (formerly Twitter), February 28, 2025
  29. ↑ "New disconnection screen." – @xKingDarkYT on X (formerly Twitter), February 28, 2025
  30. ↑ "New Character Selector screen in #Minecraft Bedrock" – @inotflying on X (formerly Twitter), May 8, 2025
  31. ↑ "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
  32. ↑ "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
  33. ↑ "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
  34. ↑ 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.