ApricityUI

ApricityUI

Build Minecraft UIs using HTML + CSS + JS. Our syntax follows Web standards as closely as possible.

Document: https://doc.sighs.cc/en/ApricityUI/intro/

We are trying to port to other version, 1.21 will be supported first.

Core Concept

The vision behind ApricityUI is to provide a low-barrier, convenient, and versatile UI framework. To achieve this, we chose the classic "Web Trio"—HTML, CSS, and JS—as the core engine.

• JS Integration: Currently, the JavaScript layer relies on KubeJS (optional). This means modpack creators can paint UIs to their heart's content with an incredibly low learning curve.
• How easy is it? You can practically let an AI generate all your ApricityUI content. Since Web frameworks are universal, AI is intimately familiar with them—often designing UIs that look better than manual ones, and you’ll still be able to understand the code!
• For Mod Developers: If your mod needs custom UIs, you can use ApricityUI as a dependency to create highly extensible interfaces. The JS and Java implementations are largely equivalent.
• Extensibility: Features like nested masks, smooth scrolling, rounded corners, frosted glass backgrounds, custom animations, custom fonts, and GIFs—which usually take hundreds of lines of code—can be done in just a few lines with ApricityUI.
• Future-Proof: Because we follow fixed Web standards, you can update across game versions with peace of mind, without worrying about major compatibility breaks.

If you aren't familiar with Web frameworks, here are their three biggest advantages:

1. Rich Functionality: From simple shapes to complex rendering effects. ApricityUI can even render UIs onto specific blocks within the world!
2. Simple Usage: Most "crash courses" online are under 3 hours (some as short as 10 minutes). Plus, AI knows this stuff inside out.
3. Easy Debugging: Almost everything supports instant hot-reloading. We even include Developer Tools for visual debugging.

> Note: ApricityUI does not bundle a Chrome/CEF kernel. It is built entirely from scratch in Java, keeping the file size under 1MB. Use it without bloat-related worries!

---

Showcase & Examples

• Box Model: Support for box-shadow, adjustable borders, and rounded corners with custom angles.
• Flexbox: Standard Flex layout support.
• Custom Fonts: Support for up to four different custom fonts (including the vanilla font) simultaneously.
• Containers: Built-in overflow masking.

• In-World Rendering: Render UIs at specific coordinates and angles with occlusion support.
• 9-Slice Scaling: Use the border-image property for highly flexible UI textures.
• Nested Clipping: Support for complex masks (e.g., clipping a container into a triangle).

• GIF Support: Full support for animated images.
• Animations: Custom CSS animations and transitions.
• Input Fields: Built-in customizable text input components.

(GIF Placeholder - Refresh if not animating)

• Vanilla Integration: Support for native Minecraft elements (e.g., custom containers/inventories).

• Custom Themes: Includes pre-built themes like the "AE2 (Applied Energistics)" style.

For more details, check out the Simple Examples in our official documentation. Feeling lazy? Let an AI write the styles for you or "borrow" some code from CodePen. If you encounter a CSS property you need that isn't supported yet, feel free to open an issue on GitHub.

---

Resource Distribution

• Supported Assets: HTML, CSS, JavaScript, TTF/OTF fonts, and most image formats (including GIF). Audio and Video support is planned for the future.
• Storage Paths: Assets are stored in the /apricity folder within your instance directory or via Resource Packs.
• Hot Reload: For modpack devs, we recommend using the /apricity folder. Press the END key to hot-reload; changes usually take effect in under a second.
• Sharing: You can distribute your UI via Resource Packs or a simple ZIP. Since Resource Packs require a game reload, simple ZIPs are often faster for testing.
• Remote Assets: ApricityUI supports asynchronous loading of web resources (e.g., image hosting or GitHub). Please use this responsibly!

We are also working on a "Server-to-Client HTML" solution for that vintage "Server-side rendering" feel, coming in a future update.

---

Want to know more?