@webgui/svelte

Deprecated. Use @webgui/client instead.

npm install @webgui/client

-import { ... } from '@webgui/svelte'
+import { ... } from '@webgui/client/svelte'

The Svelte API is unchanged — this package now re-exports @webgui/client/svelte, so nothing breaks if you stay. New events and hooks land in @webgui/client only.

---

Requires the WebGUI Minecraft mod (GitHub) to be installed on the client. This library has no effect outside of the mod.

Svelte stores and TypeScript types for SPAs running inside the WebGUI Minecraft mod.

WebGUI embeds a Chromium browser (via MCEF) in-game and injects window.webgui into every page. This library exposes that API as Svelte stores you consume with the $ syntax — no boilerplate.

Installation

npm install @webgui/svelte

Requires Svelte 4+ as a peer dependency.

Quick start

<script lang="ts">
  import { webguiClient, isInMod } from '@webgui/svelte';
</script>

{#if !isInMod()}
  <p>Open this page inside Minecraft.</p>
{:else if $webguiClient}
  <p>Hello, {$webguiClient.username}</p>
{:else}
  <p>Waiting for mod data…</p>
{/if}

API

Stores

Store	Value	Notes
webguiClient	Readable<WebGUIClient | null>	Live player snapshot, updated at 20 TPS.
webguiEntity	Readable<WebGUIEntity | null>	Entity the player right-clicked to open the GUI.
webguiSelector(fn, eq?)	Readable<T | null>	Derived store; only changes when the selection changes.

<script lang="ts">
  import { webguiSelector } from '@webgui/svelte';
  const username = webguiSelector((c) => c.username);
</script>

<span>{$username}</span>

Actions

Function	Signature	Notes
postToGame	(payload) => void	Send a message to the game.
closeGui	() => void	Close the active GUI/HUD.
runCommand	(command) => void	Run a command as the player (trusted origins only).
webguiToken	(name?) => string | null	Signed token from the page URL (static).
onWebGUIEvent	(name, handler) => () => void	Subscribe to a server event; returns unsubscribe.

<script lang="ts">
  import { onMount } from 'svelte';
  import { onWebGUIEvent, runCommand } from '@webgui/svelte';

  onMount(() =>
    onWebGUIEvent<{ balance: number }>('walletUpdate', ({ balance }) => {
      // update local state
    }),
  );
</script>

<button on:click={() => runCommand('spawn')}>Teleport to spawn</button>

TypeScript

All types are exported from the package root (WebGUIClient, WebGUIEntity, PostToGamePayload, …). The package also augments window.webgui and the webgui:client / webgui:entity events globally.

License

MIT