A zero-dependencies TypeScript library that recreates Minecraft's font rendering stack for the web, pixel-perfect.

Note: This project has been mostly developed by LLMs, but tested heavily against the game.

• Resource Pack Support — Load Minecraft resource packs to use custom fonts, textures, and font definitions
• Shader Pipeline — Uses Minecraft's core shaders (vertex + fragment); supports custom shaders via resource packs
• Text Component Parsing — Full support for Minecraft JSON text components with colors, formatting, and nested extras
• Component Bounding Boxes — Get precise bounding boxes for each text component, useful for hit detection and tooltips
• WebGL2 Rendering — Hardware-accelerated text rendering with proper Unicode and bitmap font support

bun add libmojangles
# or
npm install libmojangles

import { createLibmojangles, ResourcePackZIP } from "libmojangles";

const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const lib = createLibmojangles({ canvas });

// Load a resource pack from a zip file (e.g., Minecraft's assets or a custom pack)
const zipData = await fetch("/path/to/resourcepack.zip").then((r) =>
  r.arrayBuffer(),
);
const pack = await ResourcePackZIP.fromZip(zipData, "vanilla");
lib.addResourcePack(pack);

await lib.loadFont({ namespace: "minecraft", path: "default" });

lib.renderer.beginFrame();
lib.drawText("Hello World!", 10, 10, { scale: 2 });
lib.renderer.endFrame();

You can anchor text horizontally at draw time:

lib.drawText("Centered title", canvas.width / 2, 20, {
  scale: 2,
  anchorX: "center",
});

Libmojangles supports Minecraft's JSON text component format:

lib.drawText(
  {
    extra: [{ text: "Hello " }, { text: "World!", color: "gold", bold: true }],
  },
  10,
  10,
);

shadow_color is also supported for JSON components. It uses a decimal ARGB integer value.

lib.drawText(
  {
    text: "Custom Shadow",
    color: "white",
    shadow_color: -2130771713,
  },
  10,
  30,
);

Supported properties: text, extra, color, shadow_color, bold, italic, underlined, strikethrough, obfuscated, font

createLibmojangles(options)

Creates a new Libmojangles instance.

Option	Type	Description
canvas	HTMLCanvasElement	Required. The canvas to render to
defaultFont	ResourceLocation	Optional. Default font to use

Instance Methods

Method	Description
addResourcePack(pack)	Add a resource pack for fonts/textures/shaders
removeResourcePack(pack)	Remove a resource pack
loadFont(id)	Load a font by resource location
drawText(text, x, y, options?)	Draw text; returns { components } with bounding boxes when cachePicking: true
createTextMesh(text, options?)	Create vertex data without rendering
pick(x, y)	Get glyph info at screen position
resize(width, height)	Resize the renderer
dispose()	Clean up resources

# Install dependencies
bun install

# Run dev server with playground
bun run dev

# Run tests
bun test

You need Minecraft's vanilla assets or a compatible resource pack. The library expects the standard Minecraft resource pack structure: