{"id":169391,"date":"2026-06-09T23:11:50","date_gmt":"2026-06-09T20:11:50","guid":{"rendered":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/"},"modified":"2026-06-09T23:11:50","modified_gmt":"2026-06-09T20:11:50","slug":"webgui","status":"publish","type":"mod","link":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/","title":{"rendered":"WebGUI"},"content":{"rendered":"<p>**WebGUI** lets you render real web interfaces inside Minecraft using the technologies you already know.<\/p>\n<p>Open any web page \u2014 React, Vue, Svelte, or plain HTML\/CSS\/JavaScript \u2014 as a full-screen GUI or transparent HUD overlay directly in-game. Powered by real Chromium via MCEF, so modern web features just work: CSS animations, WebSockets, fetch, WebGL, localStorage, realtime updates, and more.<\/p>\n<p>* GitHub \u2014 https:\/\/github.com\/mc-webgui\/webgui<br \/>\n* Documentation \u2014 https:\/\/webgui.space<br \/>\n* npm \u2014 https:\/\/www.npmjs.com\/package\/@webgui\/react<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/wqZ400GWKUw\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p># Why WebGUI exists<\/p>\n<p>I&#8217;m a fullstack developer. Most of my work is building web applications \u2014 React frontends, APIs, realtime systems, dashboards, all the usual web stack.<\/p>\n<p>I&#8217;ve always loved Minecraft not only as a game, but as a creative platform. Servers, custom mechanics, communities, minigames, roleplay worlds \u2014 Minecraft gives people incredible freedom to build experiences together.<\/p>\n<p>At some point I realized something:<\/p>\n<p>**Web developers already have amazing tools for building interfaces \u2014 but almost no good way to use them inside Minecraft.**<\/p>\n<p>Every day we build polished UIs with responsive layouts, animations, maps, shops, live dashboards, and realtime interaction. But bringing that same workflow into Minecraft has always been difficult, limited, or awkward.<\/p>\n<p>So I asked a simple question:<\/p>\n<p>> **What if Minecraft could just open a real web app?**<\/p>\n<p>Not a custom inventory GUI system.<br \/>\nNot another proprietary UI framework.<br \/>\nNot a new language to learn.<\/p>\n<p>Just the web.<\/p>\n<p>That&#8217;s how WebGUI started.<\/p>\n<p>&#8212;<\/p>\n<p># Built for web developers<\/p>\n<p>WebGUI is designed for developers who already know modern frontend development.<\/p>\n<p>If you know:<br \/>\n&#8211; HTML<br \/>\n&#8211; CSS<br \/>\n&#8211; JavaScript<\/p>\n<p>\u2014you already know how to build Minecraft interfaces with WebGUI.<\/p>\n<p>Use React, Vue, Svelte, Tailwind, WebSockets, REST APIs, animations, state managers, component libraries \u2014 whatever you already use for normal web development.<\/p>\n<p>Build:<br \/>\n&#8211; server shops<br \/>\n&#8211; HUD overlays<br \/>\n&#8211; maps<br \/>\n&#8211; menus<br \/>\n&#8211; admin panels<br \/>\n&#8211; quest systems<br \/>\n&#8211; roleplay interfaces<br \/>\n&#8211; realtime dashboards<br \/>\n&#8211; entire in-game applications<\/p>\n<p>Then load them directly inside Minecraft.<\/p>\n<p>&#8212;<\/p>\n<p># How it works<\/p>\n<p>The server sends a URL to the client.<br \/>\nThe client opens it inside embedded Chromium.<br \/>\nThe page receives live player data automatically and can communicate back with the game in realtime.<\/p>\n<p>&#8212;<\/p>\n<p># Features<\/p>\n<p>&#8211; **Full-screen GUI** \u2014 replace Minecraft screens with your web app<br \/>\n&#8211; **HUD overlay** \u2014 transparent browser layer rendered over gameplay<br \/>\n&#8211; **Real Chromium browser** \u2014 powered by MCEF<br \/>\n&#8211; **Live player data** \u2014 position, username, UUID, dimension, server<br \/>\n&#8211; **Realtime communication** \u2014 browser \u2194 Minecraft messaging<br \/>\n&#8211; **Signed player tokens** \u2014 secure backend authentication without login screens<br \/>\n&#8211; **Auto HUD on join**<br \/>\n&#8211; **Per-player main menu**<br \/>\n&#8211; **Server-side Mod API**<br \/>\n&#8211; **Works with any frontend stack**<\/p>\n<p>&#8212;<\/p>\n<p># Commands<\/p>\n<p>| Command | Permission |<br \/>\n|&#8212;|&#8212;|<br \/>\n| `\/webgui gui <targets> <url>` | `webgui.command.gui` |<br \/>\n| `\/webgui hud <targets> <url>` | `webgui.command.hud` |<\/p>\n<p>&#8212;<\/p>\n<p># JavaScript API<\/p>\n<p>&#8220;`js<br \/>\n\/\/ Live player data<br \/>\nconst {<br \/>\n  playerUuid,<br \/>\n  username,<br \/>\n  dimension,<br \/>\n  pos,<br \/>\n  server<br \/>\n} = window.webgui.client;<\/p>\n<p>\/\/ Listen for updates<br \/>\nwindow.addEventListener(&#8216;webgui:client&#8217;, e => {<br \/>\n  console.log(e.detail);<br \/>\n});<\/p>\n<p>\/\/ Send messages back to Minecraft<br \/>\nwindow.webgui.postToGame({<br \/>\n  channel: &#8216;example&#8217;,<br \/>\n  value: 42<br \/>\n});<\/p>\n<p>\/\/ Close current GUI\/HUD<br \/>\nwindow.webgui.closeGui();<br \/>\n&#8220;&#8220;<\/p>\n<p>&#8212;<\/p>\n<p># React integration<\/p>\n<p>&#8220;`bash<br \/>\nnpm i @webgui\/react<br \/>\n&#8220;`<\/p>\n<p>&#8220;`jsx<br \/>\nimport { useWebGUIClient } from &#8216;@webgui\/react&#8217;;<\/p>\n<p>function App() {<br \/>\n  const client = useWebGUIClient();<\/p>\n<p>  return (<\/p>\n<div>\n      Hello, {client?.username}\n    <\/div>\n<p>  );<br \/>\n}<br \/>\n&#8220;`<\/p>\n<p>&#8212;<\/p>\n<p># Server configuration<\/p>\n<p>`config\/webgui\/server.json`<\/p>\n<p>&#8220;`json<br \/>\n{<br \/>\n  &#8220;autoHudOnJoin&#8221;: true,<br \/>\n  &#8220;autoHudUrl&#8221;: &#8220;https:\/\/your-server.com\/hud&#8221;,<br \/>\n  &#8220;mainMenuUrl&#8221;: &#8220;https:\/\/your-server.com\/menu&#8221;,<br \/>\n  &#8220;enableTokens&#8221;: true,<br \/>\n  &#8220;tokenSecretBase64&#8221;: &#8220;<base64 secret>&#8220;,<br \/>\n  &#8220;tokenTtlSeconds&#8221;: 300,<br \/>\n  &#8220;queryParamName&#8221;: &#8220;webgui_token&#8221;<br \/>\n}<br \/>\n&#8220;`<\/p>\n<p>&#8212;<\/p>\n<p># Requirements<\/p>\n<p>* Fabric Loader \u2265 0.18<br \/>\n* Fabric API<br \/>\n* Java 21<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Embed any web page \u2014 React, Vue, plain HTML \u2014 as a full-screen GUI or transparent HUD overlay inside Minecraft. Powered by Chromium (MCEF).<\/p>\n","protected":false},"featured_media":169392,"template":"","meta":{"_minecraft_slug":"webgui","_minecraft_project_id":"tDw1xQja","_minecraft_author":"KoSHer","_minecraft_license":"MIT","_minecraft_downloads":20,"_minecraft_follows":2,"_minecraft_client_side":"optional","_minecraft_server_side":"required","_minecraft_storage_type":"zip","_minecraft_archive_name":"webgui.zip","_minecraft_size_bytes":492257,"_minecraft_version_count":1,"_minecraft_updated_at":"2026-05-16T12:38:23.808957Z","_minecraft_date_created":"2026-05-11T20:21:30.204166Z","_minecraft_date_modified":"2026-05-07T12:01:16.379701Z","_minecraft_project_url":"https:\/\/modrinth.com\/mod\/webgui","_minecraft_icon_attachment_id":169392,"_minecraft_imported_at":"2026-06-09T20:11:50+00:00","_minecraft_import_hash":"99df5bae2180541fc4e0ba64c13e9a6f","_minecraft_versions":"","_minecraft_links":"","_minecraft_gallery":"","_minecraft_api_metadata":""},"mod_category":[97,89,126,867],"mod_loader":[99],"minecraft_version":[40,41,78,79,80,81,82],"class_list":["post-169391","mod","type-mod","status-publish","has-post-thumbnail","hentry","mod_category-fabric","mod_category-game-mechanics","mod_category-management","mod_category-social","mod_loader-fabric","minecraft_version-1-21-10","minecraft_version-1-21-11","minecraft_version-1-21-5","minecraft_version-1-21-6","minecraft_version-1-21-7","minecraft_version-1-21-8","minecraft_version-1-21-9"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WebGUI - Minecraft<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebGUI - Minecraft\" \/>\n<meta property=\"og:description\" content=\"Embed any web page \u2014 React, Vue, plain HTML \u2014 as a full-screen GUI or transparent HUD overlay inside Minecraft. Powered by Chromium (MCEF).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/\" \/>\n<meta property=\"og:site_name\" content=\"Minecraft\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/mods\\\/webgui\\\/\",\"url\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/mods\\\/webgui\\\/\",\"name\":\"WebGUI - Minecraft\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/mods\\\/webgui\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/mods\\\/webgui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/webgui-icon-98b41b8f3fa0bcfd9868e27b9800fe67425ba0e8.png\",\"datePublished\":\"2026-06-09T20:11:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/mods\\\/webgui\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/mods\\\/webgui\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/mods\\\/webgui\\\/#primaryimage\",\"url\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/webgui-icon-98b41b8f3fa0bcfd9868e27b9800fe67425ba0e8.png\",\"contentUrl\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/webgui-icon-98b41b8f3fa0bcfd9868e27b9800fe67425ba0e8.png\",\"width\":256,\"height\":256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/mods\\\/webgui\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mods\",\"item\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/mods\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WebGUI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/#website\",\"url\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/\",\"name\":\"Minecraft\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vpesports.com\\\/minecraft\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WebGUI - Minecraft","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/","og_locale":"en_US","og_type":"article","og_title":"WebGUI - Minecraft","og_description":"Embed any web page \u2014 React, Vue, plain HTML \u2014 as a full-screen GUI or transparent HUD overlay inside Minecraft. Powered by Chromium (MCEF).","og_url":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/","og_site_name":"Minecraft","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/","url":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/","name":"WebGUI - Minecraft","isPartOf":{"@id":"https:\/\/vpesports.com\/minecraft\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/#primaryimage"},"image":{"@id":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/#primaryimage"},"thumbnailUrl":"https:\/\/vpesports.com\/minecraft\/wp-content\/uploads\/2026\/06\/webgui-icon-98b41b8f3fa0bcfd9868e27b9800fe67425ba0e8.png","datePublished":"2026-06-09T20:11:50+00:00","breadcrumb":{"@id":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vpesports.com\/minecraft\/mods\/webgui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/#primaryimage","url":"https:\/\/vpesports.com\/minecraft\/wp-content\/uploads\/2026\/06\/webgui-icon-98b41b8f3fa0bcfd9868e27b9800fe67425ba0e8.png","contentUrl":"https:\/\/vpesports.com\/minecraft\/wp-content\/uploads\/2026\/06\/webgui-icon-98b41b8f3fa0bcfd9868e27b9800fe67425ba0e8.png","width":256,"height":256},{"@type":"BreadcrumbList","@id":"https:\/\/vpesports.com\/minecraft\/mods\/webgui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vpesports.com\/minecraft\/"},{"@type":"ListItem","position":2,"name":"Mods","item":"https:\/\/vpesports.com\/minecraft\/mods\/"},{"@type":"ListItem","position":3,"name":"WebGUI"}]},{"@type":"WebSite","@id":"https:\/\/vpesports.com\/minecraft\/#website","url":"https:\/\/vpesports.com\/minecraft\/","name":"Minecraft","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vpesports.com\/minecraft\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/vpesports.com\/minecraft\/wp-json\/wp\/v2\/mod\/169391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vpesports.com\/minecraft\/wp-json\/wp\/v2\/mod"}],"about":[{"href":"https:\/\/vpesports.com\/minecraft\/wp-json\/wp\/v2\/types\/mod"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vpesports.com\/minecraft\/wp-json\/wp\/v2\/media\/169392"}],"wp:attachment":[{"href":"https:\/\/vpesports.com\/minecraft\/wp-json\/wp\/v2\/media?parent=169391"}],"wp:term":[{"taxonomy":"mod_category","embeddable":true,"href":"https:\/\/vpesports.com\/minecraft\/wp-json\/wp\/v2\/mod_category?post=169391"},{"taxonomy":"mod_loader","embeddable":true,"href":"https:\/\/vpesports.com\/minecraft\/wp-json\/wp\/v2\/mod_loader?post=169391"},{"taxonomy":"minecraft_version","embeddable":true,"href":"https:\/\/vpesports.com\/minecraft\/wp-json\/wp\/v2\/minecraft_version?post=169391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}