WebGUI

Minecraft 版本： 26.1.2

平台： neoforge

标签： game-mechanics management

WebGUI lets you render real web interfaces inside Minecraft using the technologies you already know.

Open any web page — React, Vue, Svelte, or plain HTML/CSS/JavaScript — 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.

Available for both Fabric and NeoForge.

• GitHub — https://github.com/mc-webgui/webgui
• Documentation — https://webgui.space
• npm — https://www.npmjs.com/package/@webgui/react

Why WebGUI exists

I'm a fullstack developer. Most of my work is building web applications — React frontends, APIs, realtime systems, dashboards, all the usual web stack.

I've always loved Minecraft not only as a game, but as a creative platform. Servers, custom mechanics, communities, minigames, roleplay worlds — Minecraft gives people incredible freedom to build experiences together.

At some point I realized something:

Web developers already have amazing tools for building interfaces — but almost no good way to use them inside Minecraft.

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.

So I asked a simple question:

What if Minecraft could just open a real web app?

Not a custom inventory GUI system. Not another proprietary UI framework. Not a new language to learn.

Just the web.

That's how WebGUI started.

Built for web developers

WebGUI is designed for developers who already know modern frontend.

If you know:

• HTML
• CSS
• JavaScript

—you already know how to build Minecraft interfaces with WebGUI.

Use React, Vue, Svelte, Tailwind, WebSockets, REST APIs, animations, state managers, component libraries — whatever you already use for normal web development.

Build:

• server shops
• HUD overlays
• maps
• menus
• admin panels
• quest systems
• roleplay interfaces
• realtime dashboards
• entire in-game applications

Then load them directly inside Minecraft.

How it works

The server sends a URL to the client. The client opens it inside embedded Chromium. The page automatically receives live player data and can exchange realtime events with the game in both directions — page → server and server → page. A page can also be bound to an entity and open on right-click with that entity's context.

Compatibility

Minecraft 26 builds are NeoForge-only and in beta — Fabric is on hold until Yarn mappings for 26.x are published. Chromium (~150 MB) is downloaded automatically on first launch.

Features

• Full-screen GUI — replace Minecraft screens with your web app
• HUD overlay — transparent browser layer rendered over gameplay
• Real Chromium browser — powered by MCEF
• Live player data — position, look, health, food, XP, gamemode, dimension, username, UUID, server
• Realtime communication — browser ↔ Minecraft messaging (page → server and server → page events)
• Entity-bound GUIs — bind a page to an entity; right-click opens it with the entity's context
• Signed player tokens — secure backend authentication without login screens
• Auto HUD on join
• Per-player main menu
• Server-side Mod API
• Fabric & NeoForge — one mod, both loaders
• Works with any frontend stack

Commands

All commands require operator level 2 (on Fabric, fabric-permissions-api / LuckPerms is supported).

JavaScript API

// Live player data — pushed every tick when it changes, and on page load
const c = window.webgui.client;
// {
//   playerUuid, username, webviewMode,   // GUI_SCREEN | HUD_OVERLAY | NONE
//   dimension, gamemode,
//   health, maxHealth, food, xpLevel,
//   pos:  { x, y, z },
//   look: { yaw, pitch },
//   server: { address, ping }
// }

// Subscribe to updates
window.webgui.on('client', c => console.log(c));        // live player data
window.webgui.on('entity', e => console.log(e));        // bound-entity context (or null)
window.webgui.on('my-event', d => console.log(d));      // custom server → page events
window.webgui.off('client', handler);                   // unsubscribe
// (equivalent DOM events are also dispatched: 'webgui:client', 'webgui:entity', 'webgui:<name>')

// Send messages back to Minecraft — custom channels reach the server-side Mod API
window.webgui.postToGame({ channel: 'shop:buy', item: 'diamond', qty: 1 });

// Close the current GUI / HUD
window.webgui.closeGui();

Also available: window.webgui.entity (current entity context) and a window.webgui.onClientInfo(c) callback.

React integration

npm i @webgui/react

import { useWebGUIClient } from '@webgui/react';

function App() {
  const client = useWebGUIClient();

  return (
    <div>
      Hello, {client?.username}
    </div>
  );
}

Server configuration

config/webgui/server.json is generated on first run; the token secret is created automatically.

{
  "autoHudOnJoin": false,
  "autoHudUrl": "https://your-server.com/hud",
  "mainMenuUrl": "https://your-server.com/menu",
  "tokenTtlSeconds": 900,
  "queryParamName": "webgui_token",
  "tokenSecretBase64": "<auto-generated 32-byte secret>",
  "updateCheckUrl": ""
}

Requirements

• Fabric — Fabric Loader ≥ 0.18 + Fabric API, or NeoForge (no extra dependencies)
• Java 21 — Minecraft 1.20.1 – 1.21.11
• Java 25 — Minecraft 26.x (NeoForge beta)