Build HUD widgets, chat commands, and client features.

Client Plugins

Client plugins are JavaScript files that run in the player's browser. They can create HUD widgets, register local chat commands, and communicate with server plugins.

How They Work

1. Create a .js file in the Plugin editor (Client tab) or the client-plugins/ folder 2. When a player connects, the server sends all client plugins to their browser 3. Each plugin runs in a sandboxed environment with a ctx object 4. Plugins can only interact with the game through the ctx API

Important: Client plugins must be plain JavaScript (.js). Use ES5-compatible syntax for maximum browser compatibility.

Game State

var state = ctx.getState();
// Returns: selfId, selfName, selfPosition, selfHp, selfMaxHp,
// selfMp, selfMaxMp, selfSilver, accountGold, currentZoneId,
// currentZoneName, connected, isDead, isMounted, playerLevel,
// inventory, equipment, skills, activeEffects, activeQuests,
// party, guild, chatMessages, entities, survival, environment

ctx.onStateChange(function() {
  var state = ctx.getState();
  // Update your widgets here...
});

HUD Widgets

Create floating UI elements on screen:

var widgetId = ctx.createWidget({
  html: "<div>My Widget</div>",
  anchor: "top-right",
  position: { x: 16, y: 80 },
  width: 200,
  height: 100,
  visible: true,
  draggable: true,
  zIndex: 100,
  css: "background:rgba(0,0,0,0.8);color:white;" +
       "padding:10px;border-radius:8px;",
  onClick: function() {
    ctx.addLocalChatMessage("Widget clicked!");
  },
});

ctx.updateWidget(widgetId, { html: "<div>Updated!</div>" });
ctx.removeWidget(widgetId);

Widget Options:

PropertyTypeDefaultDescription
htmlstringrequiredInner HTML content
cssstring—Inline CSS style
anchorstring"top-left"Screen anchor: top-left, top-right, bottom-left, bottom-right, center
position{x, y}{0, 0}Offset from anchor
widthnumberautoWidth in pixels
heightnumberautoHeight in pixels
visiblebooleantrueShow/hide
draggablebooleanfalseUser can drag the widget
zIndexnumber100Layering order
onClickfunction—Click handler

Chat Commands

ctx.addChatCommand("pos", function(args) {
  var state = ctx.getState();
  ctx.addLocalChatMessage(
    "[Plugin] X=" + Math.round(state.selfPosition.x) +
    " Y=" + Math.round(state.selfPosition.y)
  );
});

Server Communication

Send and receive data from server plugins:

// Send to server
ctx.send("my-channel", { action: "request-data" });

// Receive from server
ctx.on("my-channel", function(data) {
  ctx.addLocalChatMessage("Server says: " + data.message);
});

Timers

var cancel = ctx.setInterval(function() {
  // runs every second
}, 1000);

ctx.setTimeout(function() {
  ctx.addLocalChatMessage("Timer fired!");
}, 5000);

Sandbox Restrictions

Client plugins run in a restricted environment:

  • No direct DOM access — only through createWidget
  • No access to game engine internals — only the ctx API
  • All server communication goes through typed channels

Server PluginsServer ↔ Client Communication