ApricityUI

ApricityUI

Build UIs with HTML + CSS + JS. The syntax follows Web standards as closely as possible.

Overview

ApricityUI was built around one goal: a UI framework that is low-friction, convenient, and broadly capable. That is why it takes the classic HTML + CSS + JS trio as its core.

The JS side currently depends on KubeJS (optional), which means modpack authors can draw whatever UI they like with an extremely low learning curve. How low? You can have AI generate everything ApricityUI-related for you. Web frameworks are popular enough that AI knows them well — the result may even look better than what you would draw yourself, and you can still read it.

Mods that need custom UI can also depend on ApricityUI to build highly extensible interfaces; the JS and Java APIs are broadly equivalent. Where does that extensibility show? Nested masks, smooth scrolling, rounded borders, frosted-glass backgrounds, custom animations, custom fonts, GIF playback — even filters, masks, and shadows nested inside one another. Features that take hundreds or thousands of lines elsewhere are a few lines here.

ApricityUI's syntax is essentially fixed and stays as close to Web standards as possible, so you can upgrade freely and use it across game versions without worrying about compatibility breaks.

From 1.2.5 onward, ApricityUI can also call the WebView built into your operating system, letting you embed a real website or web page inside the game that accepts only hardware input (video playback included).

If you are not sure what a Web framework is, at least remember its three well-known advantages:

• Rich functionality, from simple shape drawing to nested rendering effects — ApricityUI can even render onto a block in the world.
• Easy to use: most crash courses I have seen are under three hours (the shortest is ten minutes), and AI knows the stack inside out.
• Easy to debug: almost everything hot-reloads instantly, and convenient developer tools provide visual debugging. ApricityUI has both.

Note: ApricityUI does not bundle a Chrome runtime. It is built entirely from scratch in Java; as of 1.2.4 the jar is only 2.5 MB, it downloads nothing extra, and it is safe to use.

Showcase

Built-in pure-CSS themes

The Ore and AE themes are built in, and more MC-flavored (or deliberately un-MC) general-purpose themes will follow. They all share the same CSS naming scheme, so switching between them is seamless.

• Limitless Vehicle 3D printer

• Auto Seam Blend editor

Draw whenever you like

It integrates fully with Minecraft's rendering — draw wherever you want. KubeJS alone is enough to customize item tooltips and radial menus.

• 东方足道屿 item tooltip

• Simple radial menu (by SurpTalent)

Canvas

Canvas support that is good enough for charts, SVG drawing, complex nested effects, doodle boards, and similar everyday work.

• Building Shop stock market

• Auto Seam Blend drawing board

World windows

HTML can render at a position inside the world, with configurable angle, block pass-through, interaction distance, view distance, camera follow, LOD, and other details.

• 东方足道屿 maid foot massage

• Mob health bars and item display (by ୧⍤⃝无月)

Native Minecraft elements

Manage container slots, items, fluids, textures, models, sprite animations, translation keys, and other native elements the HTML way.

• Building Shop building materials shop

• Cobblemon Skin Manager (by 卡杨巴)

Rich text editor

Rich text editors can be built in a data-driven way.

• Built-in rich text editor example

WebView

So that different mods' UIs can stay independent while still interacting with each other, ApricityUI uses a multi-document architecture. That removes most of the point of the iframe tag, and Minecraft rarely needs nested interfaces anyway — so today ApricityUI's iframe tag is used entirely to embed WebView.

Put simply, creating a document with an iframe tag actually opens a WebView and draws it off-screen into the iframe's area.

WebView's drawbacks are obvious: from either Java or KubeJS it is hard to find an elegant way to interact with it logically, so ApricityUI currently only forwards hardware input to it.

Its high memory use also makes WebView a poor fit for overlays and world windows.

A small number of environments do not ship a WebView at all (Linux, for example), but this mod will never embed one.