Web-Based GUI Editor

The Typewriter GUI Extension includes a standalone web application for designing Minecraft menus visually. It runs an embedded Ktor HTTP server + Socket.IO server directly in the extension, serving a Flutter web app that connects to your server in real-time.

Architecture

Accessing the Editor

Start your server with the GUI Extension installed
The web editor starts automatically on startup
Open your browser to http://localhost:8082
The editor connects via Socket.IO on port 9093

The ports can be customized in plugins/Typewriter/gui_standalone_config.yml:

gui:
  panel:
    port: 8082
  socket:
    port: 9093

Editor Layout

Canvas & Layers

Layer Types

Type	Icon	Purpose
Image	🖼️	A glyph/texture from your resource pack. Placed via unicode character
Text	✏️	Text with MiniMessage formatting (colors, bold, gradients)
Slot	🔲	An inventory slot with item configuration
Flex Container	📐	A Flexbox container that auto-positions children

Canvas Controls

Action	Control
Zoom	Slider + buttons in toolbar, mouse wheel
Fit / 100%	Toolbar buttons for auto-fit or reset zoom
Select layer	Click on layer or in layer tree
Move layer	Drag selected layer (snaps to 18px grid)
Deselect	Click on empty canvas
Right-click slot	Opens slot configuration dialog
Hover cell	Cells highlight on hover for grid alignment

Drag & Drop

From Asset Browser to Canvas: Long-press any asset in the Asset Browser and drag it onto the canvas. The asset is placed at the drop position, snapped to the 18px grid. A cell highlight shows the target position during drag. Layer Reparenting: In the Layer Tree, long-press a layer and drag it onto a container to make it a child. The container highlights with a blue border when accepting.

Container Backgrounds

The canvas renders a clean dark background with the slot grid overlaid. Container types with custom slot layouts (furnace, anvil, beacon, brewing stand) show their specific slot positions. The background is a flat dark rectangle — no vanilla textures are forced, allowing your resource pack assets to define the look.

Opacity

Every layer has an opacity slider (0-100%) in the Properties panel. The canvas renders the layer with the specified transparency in real-time.

Working with Assets

Asset Browser

The asset browser displays all available glyphs from your active resource pack provider. Category filters auto-populate from your asset namespaces (e.g., craftengine, itemsadder, nexo, standalone). Hover over any asset to see a 48px preview with full metadata at the bottom of the panel. Drag & Drop: Long-press any asset and drag it directly onto the canvas. The layer is created automatically with the asset’s texture ID and unicode character. Click to apply: Tap an asset to apply it to the currently selected layer (changes its source/unicode).

Layer Tree (Hierarchy)

The layer panel now shows a tree structure instead of a flat list:

Container layers have an expand/collapse toggle (▶/▼)
Child layers are indented under their parent container
Child count badge shows how many children a container has
Add child (+ icon on containers) to add image or text children
Drag to reparent: long-press a layer and drag it onto a container to make it a child
Remove from container: click the ↗ button on a child to move it back to root level

Compilation System

The editor includes a real-time compiler that transforms your visual layout into Minecraft-compatible text strings.

How It Works

Compile Dialog

Click the Compile button in the toolbar to see:

Stats: Layer count, total canvas size, compiled string length
Compiled String: The raw Unicode sequence (useful for debugging)
Tellraw Command: Ready-to-use /tellraw command with the compiled menu
Title Command: Ready-to-use /title command
Font Providers: List of generated bitmap providers with ascent/height/chars

States & Overrides

States let you define alternative visual configurations for the same menu based on conditions.

Creating States

Go to the States tab in the right panel
Click + to add a state
Give it a name (e.g., premium, locked, low_health)
Set conditions (fact comparisons, AND/OR/NOT logic)
Add layer overrides — which layers change and how

Previewing States

Click the eye icon (👁️) next to any state to preview it on the canvas. The canvas will render with all overrides applied. A blue banner indicates you’re in preview mode.

Saving & Publishing

Save: Saves the current menu configuration to the Typewriter staging area
Compile: Generates the Minecraft-compatible compiled string and font providers
Publish: Deploys all staged changes to the live server

Keyboard Shortcuts

Shortcut	Action
`Ctrl+S`	Save
`Ctrl+Z`	Undo
`Ctrl+Shift+Z`	Redo
`Delete`	Delete selected layer
`Escape`	Deselect layer
`Ctrl+P`	Publish

​Web-Based GUI Editor

​Architecture

​Accessing the Editor

​Editor Layout

​Canvas & Layers

​Layer Types

​Canvas Controls

​Drag & Drop

​Container Backgrounds

​Opacity

​Working with Assets

​Asset Browser

​Layer Tree (Hierarchy)

​Compilation System

​How It Works

​Compile Dialog

​States & Overrides

​Creating States

​Previewing States

​Saving & Publishing

​Keyboard Shortcuts