LDLib2

https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/
Admin
LDLib2 is an advanced Minecraft mod development library providing high-level solutions for UI...
Tokens:113,690
Snippets:1,326
Trust Score:9.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Pack Loading Path Example

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/editor/resources/providers.html

Example of a path used for loading resources from packs.

```text
pack(ldlib2:resources/global/example.ui.nbt)
```

--------------------------------

### Resource Path Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/editor/resources/providers.html

Examples of valid resource path strings.

```text
built-in(built-in:missing)
file(./ldlib2/assets/ldlib2/resources/global/example.ui.nbt)
pack(ldlib2:resources/global/example.ui.nbt)
```

--------------------------------

### Initialize and Configure GraphView

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/graph-view.html

Basic setup for creating a GraphView instance and adding children.

```java
var graph = new GraphView();
graph.graphViewStyle(style -> style
    .allowZoom(true)
    .allowPan(true)
    .minScale(0.2f)
    .maxScale(5f)
);

var node = new UIElement();
graph.addContentChild(node);
parent.addChild(graph);

// Fit the view after adding children:
graph.fitToChildren(20f, 0.1f);
```

```kotlin
graphView({
    graphViewStyle = {
        allowZoom(true)
        minScale(0.2f)
        maxScale(5f)
    }
}) {
    content(myNodeElement)
}
```

```js
let graph = new GraphView();
graph.graphViewStyle(style => {
    style.allowZoom(true);
    style.minScale(0.2);
});
graph.addContentChild(myNode);
parent.addChild(graph);
```

--------------------------------

### Initialize and Configure Switch

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/switch.html

Basic setup for creating a switch and handling state changes.

```java
var sw = new Switch();
sw.setOn(true);
sw.setOnSwitchChanged(isOn -> {
    // called whenever the state changes
});
parent.addChild(sw);
```

```kotlin
switch({
    isOn = true
    onSwitch { isOn -> /* state changed */ }
}) { }
```

```js
let sw = new Switch();
sw.setOn(true);
sw.setOnSwitchChanged(isOn => { /* ... */ });
parent.addChild(sw);
```

--------------------------------

### Initialize ShaderTexture

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/shader.html

Examples for creating and configuring a ShaderTexture instance across different languages.

```java
// Load a shader from assets/mymod/shaders/core/my_effect.json
IGuiTexture effect = new ShaderTexture(ResourceLocation.parse("mymod:my_effect"));

// Tinted shader (vertex colour passed to the shader)
IGuiTexture tinted = new ShaderTexture(ResourceLocation.parse("mymod:my_effect"))
    .setColor(0xFF44AAFF);
```

```kotlin
val effect = ShaderTexture(ResourceLocation.parse("mymod:my_effect"))

val tinted = ShaderTexture(ResourceLocation.parse("mymod:my_effect"))
    .setColor(0xFF44AAFF.toInt())
```

```javascript
let effect = new ShaderTexture(ResourceLocation.parse("mymod:my_effect"));
```

--------------------------------

### Create and Start Multi-Target Animations

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/preliminary/style_animation.html

Demonstrates how to initialize an animation, select targets, set properties, and start the animation process across different languages.

```java
StyleAnimation.of(mui)
        .select(targetElement)
        .select(".card:hover")
        .lss("opacity", 0.5f)
        .start();
```

```kotlin
StyleAnimation.of(mui)
    .select(targetElement)
    .select(".card:hover")
    .lss("opacity", 0.5f)
    .start()
```

```js
StyleAnimation.of(mui)
    .select(".card:hover")
    .lss("opacity", 0.5)
    .start();
```

--------------------------------

### Initialize and Configure Scene

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/scene.html

Examples of setting up a Scene component and handling interactions across different languages.

```java
var scene = new Scene();

// Create the scene from a level:
scene.createScene(level); // or createScene(level, useFBO, size)

// Populate blocks to render:
var blocks = List.of(BlockPos.ZERO, new BlockPos(1, 0, 0));
scene.setRenderedCore(blocks);

// Listen for clicks:
scene.setOnSelected((pos, face) ->
    System.out.println("Clicked " + pos + " face " + face)
);

parent.addChild(scene);
```

```kotlin
scene({
    world(level)
    blocks(BlockPos.ZERO)
    onSelect { pos, face -> println("Clicked $pos $face") }
}) { }
```

```javascript
let s = new Scene();
s.createScene(level);
s.setRenderedCore([BlockPos.ZERO]);
s.setOnSelected((pos, face) => { /* ... */ });
parent.addChild(s);
```

--------------------------------

### Initialize SearchComponent

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/search-component.html

Examples of initializing the SearchComponent and configuring search logic in different languages.

```java
var search = new SearchComponent<String>();
search.setSearchUI(new SearchComponent.ISearchUI<>() {
    @Override
    public String resultText(String value) { return value; }
    @Override
    public void onResultSelected(String value) { }
    @Override
    public void search(String word, IResultHandler<String> find) {
        List.of("Alpha", "Beta", "Gamma").stream()
            .filter(s -> s.toLowerCase().contains(word.toLowerCase()))
            .forEach(find::handle);
    }
});
search.setOnValueChanged(v -> System.out.println("Selected: " + v));
parent.addChild(search);
```

```kotlin
searchComponent<String>({
    searchUI {
        resultText { it }
        onSelected { v -> println("Selected: $v") }
        search { word, find ->
            listOf("Alpha", "Beta", "Gamma")
                .filter { it.lowercase().contains(word.lowercase()) }
                .forEach(find::handle)
        }
    }
}) { }
```

```js
let search = new SearchComponent();
// ISearchUI must be provided programmatically.
parent.addChild(search);
```

--------------------------------

### Initialize and Configure VanillaSpriteTexture

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/vanilla-sprite.html

Examples of creating a texture instance and applying color tinting across different languages.

```java
IGuiTexture toastIcon = VanillaSpriteTexture.of("minecraft:toast/recipe_book");

IGuiTexture tinted = VanillaSpriteTexture.of("minecraft:toast/recipe_book")
    .setColor(0xFFFFAA44);
```

```kotlin
val toastIcon = VanillaSpriteTexture.of("minecraft:toast/recipe_book")

val tinted = VanillaSpriteTexture.of("minecraft:toast/recipe_book")
    .setColor(0xFFFFAA44.toInt())
```

```javascript
let toastIcon = VanillaSpriteTexture.of("minecraft:toast/recipe_book");

let tinted = VanillaSpriteTexture.of("minecraft:toast/recipe_book")
    .setColor(0xFFFFAA44);
```

--------------------------------

### Initialize and Configure CodeEditor

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/code-editor.html

Examples of setting up a CodeEditor instance with language support and initial content in different languages.

```java
var editor = new CodeEditor();
editor.setLanguage(Languages.JSON);
editor.setValue(new String[] { "{", "  \"key\": \"value\"", "}" }, false);
editor.setLinesResponder(lines -> System.out.println(String.join("\n", lines)));
parent.addChild(editor);
```

```kotlin
codeEditor({
    language(Languages.JSON)
    layout = { width(300.px); height(200.px) }
}) { }
```

```js
let editor = new CodeEditor();
editor.setLanguage(Languages.JSON);
editor.setValue(["{", "  \"key\": \"value\"", "}"], false);
parent.addChild(editor);
```

--------------------------------

### Initialize TextField in JavaScript

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/text-field.html

Basic setup for a text field with a responder in JavaScript.

```javascript
let field = new TextField();
field.setText("Hello");
field.setTextResponder(text => { console.log("Input: " + text); });
parent.addChild(field);
```

--------------------------------

### Initialize ColorBorderTexture

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/color-border.html

Examples of creating ColorBorderTexture instances in Java, Kotlin, and KubeJS.

```java
// 2 px outside border, white
IGuiTexture outline = new ColorBorderTexture(2, 0xFFFFFFFF);

// 1 px inside border, semi-transparent blue
IGuiTexture inset = new ColorBorderTexture(-1, 0x800000FF);
```

```kotlin
val outline = ColorBorderTexture(2, 0xFFFFFFFF.toInt())
val inset = ColorBorderTexture(-1, 0x800000FF.toInt())
```

```javascript
let outline = new ColorBorderTexture(2, 0xFFFFFFFF);
let inset = new ColorBorderTexture(-1, 0x800000FF);
```

--------------------------------

### Initialize and Configure InventorySlots

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/inventory-slots.html

Examples for instantiating and configuring the inventory widget across different supported languages.

```java
var inv = new InventorySlots();
// Slots are bound automatically when the UI opens.
// Optionally configure all slots:
inv.apply(slot -> slot.slotStyle(style -> style.showItemTooltips(true)));
parent.addChild(inv);
```

```kotlin
inventorySlots({}) {
    api {
        apply { slot -> slot.slotStyle { showItemTooltips(true) } }
    }
}
```

```javascript
let inv = new InventorySlots();
parent.addChild(inv);
```

--------------------------------

### Initialize and Configure FluidSlot

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/fluid-slot.html

Basic setup for a FluidSlot in Java, Kotlin, and KubeJS (JavaScript).

```java
var fluidSlot = new FluidSlot();
fluidSlot.bind(fluidHandler, 0); // IFluidHandler + tank index
fluidSlot.setCapacity(16000);
parent.addChild(fluidSlot);

// Phantom slot (XEI drag-drop)
fluidSlot.xeiPhantom();
```

```kotlin
fluidSlot({
    layout { width(18).height(18) }
}) {
    api {
        bind(fluidHandler, 0)
        setCapacity(16000)
    }
}
```

```javascript
let slot = new FluidSlot();
slot.bind(fluidHandler, 0);
slot.setCapacity(16000);
parent.addChild(slot);
```

--------------------------------

### Initialize and Configure RectTexture

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/rect.html

Examples of creating and styling RectTexture instances across different supported languages.

```java
// Filled rounded rect
IGuiTexture panel = new RectTexture()
    .setColor(0xFF2A2A2A)
    .setRadius(new Vector4f(6, 6, 6, 6));

// With stroke
IGuiTexture bordered = new RectTexture()
    .setColor(0xFF1A1A1A)
    .setRadius(new Vector4f(4, 4, 4, 4))
    .setStroke(1f)
    .setBorderColor(0xFFFFFFFF);

// Static factory
IGuiTexture simple = RectTexture.of(0xFF3A3A3A);
```

```kotlin
val panel = RectTexture()
    .setColor(0xFF2A2A2A.toInt())
    .setRadius(Vector4f(6f, 6f, 6f, 6f))

val simple = RectTexture.of(0xFF3A3A3A.toInt())
```

```js
let panel = new RectTexture()
    .setColor(0xFF2A2A2A)
    .setStroke(1)
    .setBorderColor(0xFFFFFFFF);

let simple = RectTexture.of(0xFF3A3A3A);
```

--------------------------------

### ItemSlot Usage Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/item-slot.html

Examples for binding ItemSlot to handlers, vanilla slots, or configuring phantom slots.

```java
// Bind to an item handler
var slot = new ItemSlot();
slot.bind(itemHandler, 0); // IItemHandlerModifiable + slot index
parent.addChild(slot);

// Or bind to a vanilla Slot directly
var slot2 = new ItemSlot(new Slot(inventory, 0, 0, 0));

// Phantom slot (XEI drag-drop support)
slot.xeiPhantom();
```

```kotlin
itemSlot({
    layout { width(18).height(18) }
}) {
    api { bind(itemHandler, 0) }
}
```

```js
let slot = new ItemSlot();
slot.bind(itemHandler, 0);
parent.addChild(slot);
```

--------------------------------

### Label Usage Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/label.html

Demonstrates creating static and data-bound labels in Java, Kotlin, and JavaScript.

```java
// Static text
var label = new Label();
label.setText("my.translation.key", true);

// Data-bound text (server → client)
label.bind(DataBindingBuilder.componentS2C(
    () -> Component.literal("Value: " + someObject.getValue())
).build());

parent.addChild(label);
```

```kotlin
// Static label
label({
    text("my.translation.key")
    textStyle { textColor(0xFFFFFF).fontSize(10f) }
}) { 
    bindS2C({Component.literal("Value: $value")})
}

// Data-bound
val lbl = Label()
lbl.bind(DataBindingBuilder.componentS2C { Component.literal("Value: $value") }.build())
```

```js
let label = new Label();
label.setText(Component.literal("Hello"));
parent.addChild(label);

// Data-bound via binding system:
label.bind(DataBindingBuilder.componentS2C(() =>
    Component.literal("Tick: " + tickCount)
).build());
```

--------------------------------

### Initialize and Configure TabView

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/tab-view.html

Examples of creating a TabView and adding tabs with associated content using different programming languages.

```java
var tabView = new TabView();

var content1 = new UIElement();
content1.addChild(new Label().setText("Settings content", false));

var content2 = new UIElement();
content2.addChild(new Label().setText("Info content", false));

tabView.addTab(new Tab().setText("Settings"), content1);
tabView.addTab(new Tab().setText("Info"), content2);

tabView.setOnTabSelected(tab -> System.out.println("Selected: " + tab));
parent.addChild(tabView);
```

```kotlin
tabView({
    onTabSelected { tab -> println("Selected: $tab") }
}) {
    tab("Settings") {
        // add settings content children here
    }
    tab("Info") {
        // add info content children here
    }
}
```

```js
let tv = new TabView();
let content1 = new UIElement();
let content2 = new UIElement();
tv.addTab(new Tab().setText("A"), content1);
tv.addTab(new Tab().setText("B"), content2);
parent.addChild(tv);
```

--------------------------------

### TextArea Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/text-area.html

Examples of initializing and configuring a TextArea component across different languages.

```java
var area = new TextArea();
area.setValue(new String[] { "Line 1", "Line 2", "Line 3" });
area.setLinesResponder(lines -> {
    // called on each valid edit
    System.out.println("Lines: " + Arrays.toString(lines));
});
parent.addChild(area);
```

```kotlin
textArea({
    layout { width(200).height(80) }
}) {
    api {
        setValue(arrayOf("Line 1", "Line 2"))
        setLinesResponder { lines -> println(lines.joinToString("\n")) }
    }
}
```

```js
let area = new TextArea();
area.setValue(["Line 1", "Line 2"]);
area.setLinesResponder(lines => { /* ... */ });
parent.addChild(area);
```

--------------------------------

### Initialize and Configure TagField

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/tag-field.html

Examples of initializing the TagField component and setting up responders in different languages.

```java
var tagField = new TagField();
tagField.setCompoundTagOnly(); // accept only CompoundTag
tagField.setTagResponder(tag -> System.out.println("Tag: " + tag));
parent.addChild(tagField);

// Set initial value
tagField.setValue(new CompoundTag(), false);
```

```kotlin
tagField({
    onTagChanged { tag -> println("Tag: $tag") }
}) {
    api { setCompoundTagOnly() }
}
```

```js
let field = new TagField();
field.setCompoundTagOnly();
field.setTagResponder(tag => { /* use tag */ });
parent.addChild(field);
```

--------------------------------

### Implement a complete client-side UI

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/kotlin_support.html

A comprehensive example demonstrating animations, data-bound labels, interactive buttons, and numeric text fields within a modular UI.

```kotlin
@LDLRegisterClient(name = "dsl", registry = "ldlib2:screen_test")
class TestDSL : IScreenTest {
    override fun createUI(entityPlayer: Player?): ModularUI? {
        return ModularUI.of(UI.of(
            element({
                layout = { size(200.px); gap { all(3.px) }; padding { all(4.px) } }
                style = { background(Sprites.RECT) }
                cls = { +"cla" }
            }) {
                // Click to animate: shrink + fade out, then restore
                element({
                    layout = { size(30.px) }
                    style = { background(Sprites.RECT_SOLID).tooltips("animation") }
                }) {
                    events { e ->
                        UIEvents.CLICK += {
                            e.animation()
                                .duration(1f).ease(Eases.QUAD_IN_OUT)
                                .style(PropertyRegistry.TRANSFORM_2D, Transform2D().scale(0.5f).translate(100f, 0f))
                                .style(PropertyRegistry.OPACITY, 0f)
                                .onFinished { _ ->
                                    e.animation()
                                        .ease(Eases.QUART_IN_OUT)
                                        .style(PropertyRegistry.TRANSFORM_2D, Transform2D())
                                        .style(PropertyRegistry.OPACITY, 1f)
                                        .start()
                                }
                                .start()
                        }
                    }
                }

                // Label bound to a local variable
                var value = "hello"
                label { dataSource({ Component.literal(value) }) }

                // Button toggles the value
                button({
                    text("hello <-> world")
                    onClick = { value = if (value == "hello") "world" else "hello" }
                })

                // Numeric text field (client-side only)
                var number = 10.4f
                textField {
                    observer { number = it.toFloatOrNull() ?: number }
                    dataSource { number.toString() }
                }.asNumeric(0.3f, 100f)
```

--------------------------------

### Initialize AnimationTexture

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/animation.html

Examples of configuring an animation texture with frame ranges and speeds in different languages.

```java
// 8×8 grid of 8 px cells, frames 32–44, advance every 1 tick
IGuiTexture anim = new AnimationTexture("mymod:textures/gui/particles.png")
    .setCellSize(8)
    .setAnimation(32, 44)   // from frame 32 to frame 44
    .setAnimation(1);       // 1 tick per frame

// Tinted animation
IGuiTexture tinted = new AnimationTexture("mymod:textures/gui/glow.png")
    .setCellSize(4)
    .setAnimation(0, 15)
    .setAnimation(2)
    .setColor(0xFF44AAFF);
```

```kotlin
val anim = AnimationTexture("mymod:textures/gui/particles.png")
    .setCellSize(8)
    .setAnimation(32, 44)
    .setAnimation(1)
```

```javascript
let anim = new AnimationTexture("mymod:textures/gui/particles.png")
    .setCellSize(8)
    .setAnimation(32, 44)
    .setAnimation(1);
```

--------------------------------

### Initialize and Configure TextTexture

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/text.html

Examples of creating static, dynamic, and scrolling text textures in Java, Kotlin, and KubeJS.

```java
// Static centred text
IGuiTexture label = new TextTexture("Hello World");

// Left-aligned, coloured, with shadow
IGuiTexture info = new TextTexture("Info", 0xFFFFDD44)
    .setType(TextTexture.TextType.LEFT)
    .setDropShadow(true);

// Scrolling text, word-wrap at 80 px
IGuiTexture scroll = new TextTexture("Long description that scrolls…")
    .setType(TextTexture.TextType.ROLL_ALWAYS)
    .setWidth(80)
    .setRollSpeed(1.5f);

// Dynamic — updates every game tick
IGuiTexture dynamic = new TextTexture(() -> "Ticks: " + level.getGameTime());
```

```kotlin
val label = TextTexture("Hello World")

val scroll = TextTexture("Long description…")
    .setType(TextTexture.TextType.ROLL_ALWAYS)
    .setWidth(80)
```

```js
let label = new TextTexture("Hello World");

let dynamic = new TextTexture(() => "Ticks: " + level.getGameTime());
```

--------------------------------

### UIElement Usage Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/element.html

Demonstrates basic configuration, styling, layout, and event handling for UIElement across different languages.

```java
var element = new UIElement();
element.style(style -> style.background(MCSprites.RECT));
element.layout(layout -> layout.width(40).height(40));
element.setFocusable(true);
element.addEventListener(UIEvents.MOUSE_DOWN, e -> e.currentElement.focus());
element.addClass("add-class");
element.removeClass("add-class");
root.addChild(element);
```

```kotlin
val root = element root@{
    element({
        layout = { size(40.px) }
        style = { background(MCSprites.RECT) }
        focusable = true
        cls = {
            +"add-class"
            -"remove-class"
        }
    }) {
        events { UIEvents.MOUSE_DOWN += { it.currentElement.focus() } }
    }
}
```

```js
let element = new UIElement();
element.style(style -> style.background(MCSprites.RECT));
element.layout(layout -> layout.width(40).height(40));
element.setFocusable(true);
element.addEventListener(UIEvents.MOUSE_DOWN, e => e.currentElement.focus());
element.addClass("add-class");
element.removeClass("add-class");
root.addChild(element);
```

--------------------------------

### Initialize TreeList

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/tree-list.html

Basic setup for creating and configuring a TreeList instance across different languages.

```java
var tree = new TreeList<MyNode>(rootNode);
tree.setNodeUISupplier(TreeList.textTemplate(node -> Component.literal(node.getName())));
tree.setOnSelectedChanged(selected -> System.out.println("Selected: " + selected));
tree.setDoubleClickToExpand(true);
parent.addChild(tree);
```

```kotlin
treeList<MyNode>(rootNode, {
    nodeUI(TreeList.textTemplate { node -> Component.literal(node.name) })
    onSelectionChanged { selected -> println("Selected: $selected") }
}) { }
```

```js
let tree = new TreeList(rootNode);
tree.setNodeUISupplier(TreeList.textTemplate(n => Component.literal(n.name)));
tree.setOnSelectedChanged(selected => { /* use selection */ });
parent.addChild(tree);
```

--------------------------------

### Initialize and Configure SceneEditor

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/editor/misc/scene-editor.html

Demonstrates the basic setup of a SceneEditor instance, including layout configuration, scene initialization, and adding a scene object with a transform gizmo.

```java
var sceneEditor = new SceneEditor();
sceneEditor.layout(layout -> {
    layout.widthPercent(100);
    layout.flex(1);
});

sceneEditor.scene
        .createScene(player.level())
        .setTickWorld(true)
        .useCacheBuffer();

var object = new BlockModelObject();
object.transform().position(player.position().toVector3f().add(0, 1, 0));

sceneEditor.addSceneObject(object);
sceneEditor.setTransformGizmoTarget(object.transform());
```

--------------------------------

### Inspector Usage Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/inspector.html

Demonstrates how to instantiate, inspect objects, and handle changes using Java, Kotlin, and JavaScript.

```java
var inspector = new Inspector();
parent.addChild(inspector);

// Inspect an object (any IConfigurable):
inspector.inspect(myObject);

// Inspect with a change listener:
inspector.inspect(myObject, configurator -> {
    System.out.println("Changed: " + configurator.getLabel());
});

// Inspect with change listener + close callback:
inspector.inspect(myObject,
    configurator -> System.out.println("Changed"),
    () -> System.out.println("Closed")
);

// Clear the inspector:
inspector.clear();
```

```kotlin
inspector({
    inspect(myObject)
    onChange { configurator -> println("Changed: ${configurator.label}") }
}) { }
```

```js
let inspector = new Inspector();
inspector.inspect(myObject);
parent.addChild(inspector);
```

--------------------------------

### Implement Custom Settings

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/editor/settings.html

Example implementation of a custom settings class using the Settings interface and a codec for persistence.

```java
public class ShopSettings implements Settings {
    public static final ResourceLocation ID = LDLib2.id("shop");
    public static final Codec<ShopSettings> CODEC =
            PersistedParser.createCodec(ShopSettings::new);

    @Configurable
    private boolean previewItems = true;

    @Override
    public ResourceLocation getId() {
        return ID;
    }

    @Override
    public String getPath() {
        return "Shop";
    }

    @Override
    public void onApply(Editor editor) {
        // Read settings and update editor behavior.
    }
}
```

--------------------------------

### Deferred setup with onBuild

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/kotlin_support.html

Use onBuild to execute logic after the element has been fully constructed, providing access to the final element reference.

```kotlin
element({}) {
    onBuild { builtElement ->
        builtElement.addEventListener(UIEvents.ADDED) { /* ... */ }
    }
}
```

--------------------------------

### Configure Clipping and Masks

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/migration/1.21-to-26.1.x.html

Examples of applying clipping and masking styles in Java, Kotlin, and LSS.

```java
style.clip(Clip.SCISSOR);

style.clip(Clip.MASK);
style.mask(MCSprites.BORDER);

style.clip(Clip.DYNAMIC_MASK);
style.mask(animatedMask);
```

```kotlin
style = {
    clip(Clip.SCISSOR)
}

style = {
    clip(Clip.MASK)
    mask(MCSprites.BORDER)
}
```

```css
element {
    clip: scissor;
}

element.masked {
    clip: mask;
    mask: sprite(ldlib2:textures/gui/icon.png);
}

element.animated-mask {
    clip: dynamic-mask;
    mask: sprite(ldlib2:textures/gui/icon.png);
}
```

--------------------------------

### SpriteTexture Usage Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/sprite.html

Demonstrates how to initialize and configure SpriteTexture instances for various rendering scenarios including 9-slice scaling, sub-regions, tiling, and tinting.

```java
// Whole image, stretched
IGuiTexture icon = SpriteTexture.of("mymod:textures/gui/icon.png");

// 9-slice panel: 4 px border on all sides
IGuiTexture panel = SpriteTexture.of("mymod:textures/gui/panel.png")
    .setBorder(4);

// 9-slice with different left/top/right/bottom borders
IGuiTexture fancy = SpriteTexture.of("mymod:textures/gui/fancy.png")
    .setBorder(4, 4, 4, 4); // left, top, right, bottom

// Sub-region of a sprite sheet (x, y, width, height in pixels)
IGuiTexture frame = SpriteTexture.of("mymod:textures/gui/sheet.png")
    .setSprite(0, 0, 16, 16);

// Tiling background
IGuiTexture tile = SpriteTexture.of("mymod:textures/gui/tile.png")
    .setWrapMode(SpriteTexture.WrapMode.REPEAT);

// Tinted
IGuiTexture tinted = SpriteTexture.of("mymod:textures/gui/icon.png")
    .setColor(0xFF44AAFF);
```

```kotlin
val icon = SpriteTexture.of("mymod:textures/gui/icon.png")

val panel = SpriteTexture.of("mymod:textures/gui/panel.png")
    .setBorder(4)

val tile = SpriteTexture.of("mymod:textures/gui/tile.png")
    .setWrapMode(SpriteTexture.WrapMode.REPEAT)
```

```js
let icon = SpriteTexture.of("mymod:textures/gui/icon.png");

let panel = SpriteTexture.of("mymod:textures/gui/panel.png")
    .setBorder(4);

let tinted = SpriteTexture.of("mymod:textures/gui/icon.png")
    .setColor(0xFF44AAFF);
```

--------------------------------

### Implement LDLibPlugin

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/java_integration.html

Create a plugin class using the ILDLibPlugin interface and @LDLibPlugin annotation for registration and setup.

```java
@LDLibPlugin
public class MyLDLibPlugin implements ILDLibPlugin {
    public void onLoad() {
        // do your register or setup for LDLib2 here.
    }
}
```

--------------------------------

### Programmatic TextElement Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/text.html

Examples of creating and styling a TextElement using Java, Kotlin, and KubeJS.

```java
var text = new TextElement();
text.setText("my.translation.key", true);  // translated
text.textStyle(style -> style
    .fontSize(12)
    .textColor(0xFFFF00)
    .textShadow(false)
    .textAlignHorizontal(Horizontal.CENTER)
);
parent.addChild(text);
```

```kotlin
text({
    layout { width(80).height(18) }
    textStyle {
        fontSize(12f)
        textColor(0xFFFF00)
        textAlignHorizontal(Horizontal.CENTER)
    }
}) { }
```

```js
let text = new TextElement();
text.setText(Component.literal("Hello world"));
text.textStyle(style => style.fontSize(12).textColor(0xFFFF00));
parent.addChild(text);
```

--------------------------------

### FluidStackTexture Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/fluid-stack.html

Examples of initializing and configuring FluidStackTexture for single, multiple, or custom fluid stacks.

```java
// Single fluid
IGuiTexture water = new FluidStackTexture(Fluids.WATER);

// Multiple fluids — cycle every 20 ticks
IGuiTexture cycle = new FluidStackTexture(
    Fluids.WATER, Fluids.LAVA
);

// From FluidStacks (custom amount)
IGuiTexture exact = new FluidStackTexture(
    new FluidStack(Fluids.WATER, 1000)
);

// Tinted
IGuiTexture tinted = new FluidStackTexture(Fluids.WATER)
    .setColor(0x8000AAFF);
```

```kotlin
val water = FluidStackTexture(Fluids.WATER)

val cycle = FluidStackTexture(Fluids.WATER, Fluids.LAVA)
```

```js
let water = new FluidStackTexture(Fluids.WATER);

let cycle = new FluidStackTexture(Fluids.WATER, Fluids.LAVA);
```

--------------------------------

### Initialize Scroller in Java, Kotlin, and JS

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/scroller.html

Examples of creating and configuring vertical and horizontal scrollers across different supported languages.

```java
// Vertical scroll bar
var scroller = new Scroller.Vertical();
scroller.setRange(0, 100f);
scroller.setValue(50f);
scroller.setOnValueChanged(value -> System.out.println("Scroll: " + value));
parent.addChild(scroller);

// Horizontal scroll bar
var hScroller = new Scroller.Horizontal();
hScroller.setRange(0, 1f);
```

```kotlin
scrollerVertical({
    layout { height(100) }
}) {
    api {
        setRange(0f, 100f)
        setOnValueChanged { v -> println("Scroll: $v") }
    }
}
```

```js
let scroller = new ScrollerVertical();
scroller.setRange(0, 100);
scroller.setValue(50);
parent.addChild(scroller);
```

--------------------------------

### Instantiate ColorRectTexture in Java, Kotlin, and JavaScript

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/color-rect.html

Examples of creating solid or semi-transparent color rectangles across different languages.

```java
// Opaque dark background
IGuiTexture bg = new ColorRectTexture(0xFF1A1A1A);

// Semi-transparent overlay
IGuiTexture overlay = new ColorRectTexture(0x80FFFFFF);

// From java.awt.Color
IGuiTexture red = new ColorRectTexture(java.awt.Color.RED);
```

```kotlin
val bg = ColorRectTexture(0xFF1A1A1A.toInt())
val overlay = ColorRectTexture(0x80FFFFFF.toInt())
```

```js
let bg = new ColorRectTexture(0xFF1A1A1A);
let overlay = new ColorRectTexture(0x80FFFFFF);
```

--------------------------------

### Initialize and Configure Selector

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/selector.html

Basic setup for a Selector component including setting candidates, default selection, and change listeners.

```java
var selector = new Selector<String>();
selector.setCandidates(List.of("Alpha", "Beta", "Gamma"));
selector.setSelected("Alpha");
selector.setOnValueChanged(value -> {
    System.out.println("Selected: " + value);
});
parent.addChild(selector);
```

```kotlin
selector<String>({
    candidates("Alpha", "Beta", "Gamma")
    selected("Alpha")
    onChange { value -> println("Selected: $value") }
}) { }
```

```js
let sel = new Selector();
sel.setCandidates(["Alpha", "Beta", "Gamma"]);
sel.setSelected("Alpha");
sel.setOnValueChanged(v => { console.log("Selected: " + v); });
parent.addChild(sel);
```

--------------------------------

### Define Configurable Classes

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/configurable

Examples of classes using IToggleConfigurable and IConfigurable interfaces with various configuration annotations.

```java
public static class TestToggleGroup implements IToggleConfigurable {
        @Getter
        @Setter
        private boolean isEnable = false;

        @Configurable
        @ConfigSelector(candidate = {"north", "west", "south", "east"})
        private Direction enumValue = Direction.NORTH;
    }

    public static class TestGroup implements IConfigurable {
        @Configurable
        @ConfigNumber(range = {0, 1}, type = ConfigNumber.Type.FLOAT)
        private Range rangeValue = Range.of(0, 1);

        @Configurable
        private Direction enumValue = Direction.NORTH;

        @Configurable
        private Vector3i vector3iValue = new Vector3i(0, 0, 0);
    }
```

--------------------------------

### RPCMethod Implementation and Sending

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/sync/annotations.html

Defining RPC methods and examples of sending RPC packets to players or the server.

```java
@RPCMethod
public void rpcTestA(RPCSender sender, String message) {
    if (sender.isServer()) {
        LDLib2.LOGGER.info("Received RPC from server: {}", message);
    } else {
        LDLib2.LOGGER.info("Received RPC from client: {}", message);
    }
}

@RPCMethod
public void rpcTestB(ItemStack item) {
    LDLib2.LOGGER.info("Received RPC: {}", item);
}

// methods to send rpc
public void sendMsgToPlayer(ServerPlayer player, String msg) {
    rpcToServer(player, "rpcTestA", msg)
}

public void sendMsgToAllTrackingPlayers(ServerPlayer player, String msg) {
    rpcToTracking("rpcTestA", msg)
}

public void sendMsgToServer(ItemStack item) {
    rpcToServer("rpcTestB", item)
}
```

--------------------------------

### ReadOnlyManaged Implementation Example

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/sync/annotations.html

Example of using @ReadOnlyManaged with custom serialization and deserialization methods for a list of objects.

```java
@Persisted
@DescSync
@ReadOnlyManaged(serializeMethod = "testGroupSerialize", deserializeMethod = "testGroupDeserialize")
private final List<TestGroup> groupList = new ArrayList<>();

public static class TestGroup implements IPersistedSerializable {
    @Persisted
    private Range rangeValue = Range.of(0, 1);
    @Persisted
    private Direction enumValue = Direction.NORTH;
    @Persisted
    private Vector3i vector3iValue = new Vector3i(0, 0, 0);
}

public IntTag testGroupSerialize(List<TestGroup> groups) {
    return IntTag.valueOf(groups.size());
}

public List<TestGroup> testGroupDeserialize(IntTag tag) {
    var groups = new ArrayList<TestGroup>();
    for (int i = 0; i < tag.getAsInt(); i++) {
        groups.add(new TestGroup());
    }
    return groups;
}
```

--------------------------------

### Initialize and Configure Button

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/button.html

Demonstrates button instantiation, label setting, and event handler registration across different languages.

```java
var button = new Button();
button.setText("my.button.label", true); // translated label
button.setOnClick(event -> {
    // runs on the client when left-clicked
});
button.setOnServerClick(event -> {
    // runs on the server when left-clicked
});
parent.addChild(button);
```

```kotlin
button({
    text("my.button.label")
    onClick = { event -> /* client-side */ }
    onServerClick = { event -> /* server-side */ }
}) {
    // add extra children if needed
}
```

```js
let button = new Button();
button.setText(Component.literal("Click me"));   // literal
button.setText("my.key", true);                  // translated
button.setOnClick(e => {
    // client-side click handler
});
parent.addChild(button);
```

--------------------------------

### Define Textures in LSS

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures

Example of using texture functions within LSS style definitions.

```css
button {
    background: rect(#3a3a3a, 4);
    hover-background: rect(#4a4a4a, 4, 1, #FFFFFF66);
}
```

--------------------------------

### Register UI in startup scripts

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/factory.html

Use startup_scripts to register the UI once for both client and server environments.

```javascript
// startup_scripts/main.js — executed on both client and server
LDLib2UI.block("mymod:my_block_ui", event => {
    event.modularUI = ModularUI.of(UI.of(
        new UIElement().addClass("panel_bg")
    ), event.player);
})
```

--------------------------------

### Register Player UI

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/getting_start.html

Registers a menu-based UI using the PlayerUIMenuType factory for quick setup.

```java
public static final ResourceLocation UI_ID = LDLib2.id("unique_id");

// register your ui somewhere, e.g. during your mod initialization.
public static void registerPlayerUI() {
    PlayerUIMenuType.register(UI_ID, ignored -> player -> createModularUI(player));
}
```

--------------------------------

### Initialize and Bind ProgressBar in Java

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/progress-bar.html

Demonstrates creating a ProgressBar, setting its range, and binding it to a server-side data source.

```java
var bar = new ProgressBar();
bar.setRange(0, 100);
bar.setProgress(75f);
parent.addChild(bar);

// Data-bound (server → client, ticks every tick)
bar.bindDataSource(DataBindingBuilder.floatValS2C(
    () -> machine.getProgress() / (float) machine.getMaxProgress()
).build());
```

--------------------------------

### Initialize and use ColorSelector

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/color-selector.html

Demonstrates basic instantiation, setting an initial color, and registering a listener for color changes.

```java
var picker = new ColorSelector();
picker.setValue(0xFF4080FF, false); // initial ARGB color
picker.registerValueListener(color -> System.out.printf("Color: #%08X%n", color));
parent.addChild(picker);
```

```kotlin
colorSelector({
    color(0xFF4080FF.toInt())
    onChange { color -> println("Color: ${color.toString(16)}") }
}) { }
```

```js
let picker = new ColorSelector();
picker.setValue(0xFF4080FF, false);
picker.registerValueListener(color => { /* use color */ });
parent.addChild(picker);
```

--------------------------------

### Create a basic ModularUI instance

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/getting_start.html

Defines a root UIElement with a label, button, and image, returning a ModularUI runtime manager.

```java
private static ModularUI createModularUI() {
    // create a root element
    var root = new UIElement();
    root.addChildren(
            // add a label to display text
            new Label().setText("My First UI"),
            // add a button with text
            new Button().setText("Click Me!"),
            // add an element to display an image based on a resource location
            new UIElement().layout(layout -> layout.width(80).height(80))
                    .style(style -> style.background(
                            SpriteTexture.of("ldlib2:textures/gui/icon.png"))
                    )
    ).style(style -> style.background(Sprites.BORDER)); // set a background for the root element
    // create a UI
    var ui = UI.of(root);
    // return a modular UI for runtime instance
    return ModularUI.of(ui);
}
```

--------------------------------

### Analyze LSS complex selector

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/preliminary/stylesheet.html

Example of a complex LSS selector combining host, internal, and descendant logic.

```css
button:host :not(.my_label#my_id > text:internal) > .my_class:host, text-field {
    // ...
}
```

--------------------------------

### Initialize a basic View

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/editor/views

Create a new View instance and place it within the editor interface.

```java
var view = new View("editor.view.shop_items", Icons.FILE);
view.addChild(itemList);
placeView(view, () -> leftWindow.getLeftTop());
```

--------------------------------

### Create ItemStackTexture instances

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/item-stack.html

Demonstrates initializing ItemStackTexture with single items, multiple items for cycling, specific ItemStacks, and applying color tints.

```java
// Single item
IGuiTexture diamondIcon = new ItemStackTexture(Items.DIAMOND);

// Multiple items — cycle every 20 ticks
IGuiTexture cycleIcon = new ItemStackTexture(
    Items.DIAMOND, Items.EMERALD, Items.GOLD_INGOT
);

// From ItemStacks
IGuiTexture enchanted = new ItemStackTexture(
    new ItemStack(Items.DIAMOND_SWORD)
);

// Tinted
IGuiTexture tinted = new ItemStackTexture(Items.DIAMOND)
    .setColor(0x80FFFFFF); // 50 % opacity
```

```kotlin
val diamond = ItemStackTexture(Items.DIAMOND)

val cycle = ItemStackTexture(Items.DIAMOND, Items.EMERALD, Items.GOLD_INGOT)
```

```js
let icon = new ItemStackTexture(Items.DIAMOND);

let cycle = new ItemStackTexture(Items.DIAMOND, Items.EMERALD);
```

--------------------------------

### Basic UI Message Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/preliminary/data_bindings.html

Examples of using the lightweight message system to send CompoundTag payloads between UI sides.

```java
var button = new Button()
    .setOnServerClick(e -> {
        e.currentElement.sendMessage(
            "test_message",
            TagBuilder.compound().add("text", "Message from server!").build()
        );
    })
    .onMessage("test_message", (self, message) -> {
        assert LDLib2.isRemote();
        ((Button) self).setText(message.getString("text"));
    });
```

```kotlin
button {
    api {
        setOnServerClick { event ->
            event.currentElement.sendMessage(
                "test_message",
                TagBuilder.compound()
                    .add("text", "Message from server!")
                    .build()
            )
        }
        onMessage("test_message") { _, message ->
            setText(message.getString("text"))
        }
    }
}
```

```js
let button = new Button()
    .onMessage("test_message", (self, message) => {
        self.setText(message.getString("text"));
    });

// send from whichever side currently owns the logic
button.sendMessage("test_message", TagBuilder.compound()
    .add("text", "Hello from the other side!")
    .build());
```

--------------------------------

### GraphView Initialization and Loading

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/node-graph-toolkit/graph-view.html

Methods to instantiate a GraphView and load a graph instance into the UI.

```APIDOC
## GraphView.loadGraph(graph)

### Description
Loads a graph instance into the GraphView component for display and editing.

### Signature
`void loadGraph(Graph graph)`

### Example
```java
var graphView = new GraphView();
graphView.loadGraph(graph);
```
```

--------------------------------

### Combine Component and State Selectors

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/preliminary/stylesheet.html

Examples of using state selectors combined with component selectors for specific UI states.

```css
button:disabled {
}

button:focused {
}

button:hover {
}
```

--------------------------------

### Load UI Template in Java

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/editor.html

Demonstrates loading a UI template from a ResourceLocation or file path and performing element selection.

```java
@Override
public ModularUI createUI(Player player) {
    var ui = Optional.ofNullable(UIResource.INSTANCE.getResourceInstance()
            // resource location based
            .getResource(new FilePath(ResourceLocation.parse("ldlib2:resources/examples/example_layout.ui.nbt"))))

            // file based
            //.getResource(new FilePath(new File(LDLib2.getAssetsDir(), "ldlib2/resources/examples/example_layout.ui.nbt"))) // LDLib2.getAssetsDir() = ".minecraft/ldlib2/assets"

            .map(UITemplate::createUI)
            .orElseGet(UI::empty);

    // find elements and do data bindings or logic setup here
    var buttons = ui.select(".button_container > button").toList(); // by selector
    var container = ui.selectRegex("container").findFirst().orElseThrow(); // by id regex

    return ModularUI.of(ui, player);
}
```

--------------------------------

### Define SDFRectTexture in LSS

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/textures/sdf-rect.html

Examples of using the rect() function in LSS to define rectangle styles, including per-corner radii.

```css
/* rect(fillColor) */
background: rect(#2A2A2A);

/* rect(fillColor, radius) */
background: rect(#2A2A2A, 6);

/* rect(fillColor, radius, strokeWidth, borderColor) */
background: rect(#2A2A2A, 4, 1, #FFFFFF);

/* Per-corner radii: top-left top-right bottom-right bottom-left */
background: rect(#2A2A2A, 8 4 8 4);
```

--------------------------------

### Initialize TextField in Java

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/components/text-field.html

Demonstrates creating text fields for free strings, integers with ranges, and resource locations.

```java
// Free string input
var field = new TextField();
field.setTextResponder(text -> System.out.println("Typed: " + text));
parent.addChild(field);

// Integer input with a range
var intField = new TextField();
intField.setNumbersOnlyInt(0, 100);
intField.setText("50");
intField.setTextResponder(raw -> config.setValue(Integer.parseInt(raw)));

// Resource location input
var rlField = new TextField();
rlField.setResourceLocationOnly();
```

--------------------------------

### Combined RPCMethod Send and Receive

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/sync/annotations.html

Example of handling both sending and receiving logic within a single annotated RPC method.

```java
@RPCMethod
public void rpcTest(String msg) {
    if (level.isClient) { // receive 
        LDLib2.LOGGER.info("Received RPC from server: {}", message);
    } else { // send
        rpcToTracking("rpcTest", msg)
    }
}
```

--------------------------------

### Define LSS Style Rules

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/preliminary/stylesheet.html

General syntax for LSS style rules and a concrete example applying styles to button elements.

```css
selector {
    property1: value;
    property2: value;
}
```

```css
button {
  base-background: built-in(ui-mc:RECT_BORDER);
  hover-background: built-in(ui-mc:RECT_3);
  pressed-background: built-in(ui-mc:RECT_3) color(#dddddd);
  padding-all: 3;
  height: 16;
}
```

--------------------------------

### Define a Client UI Layout

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/ui/kotlin_support.html

Demonstrates a basic UI layout structure using rows, columns, and slots.

```kotlin
row({ layout = { gap { all(2.px) } } }) {
                    fluidSlot()
                    itemSlot({ item = Items.APPLE.defaultInstance })
                    column {
                        switch()
                        toggle()
                    }
                }
            }
        ), entityPlayer)
    }
}
```

--------------------------------

### Implement Node Preview in Java

Source: https://low-drag-mc.github.io/LowDragMC-Doc/en/ldlib2/node-graph-toolkit/nodes-and-ports.html

Override these methods to enable a preview panel and define its content and update logic.

```java
@Override
public boolean hasNodePreview() {
    return true;
}

@Override
public void onBuildNodePreview(NodePreviewContext context) {
    context.content().addChild(createPreviewElement());
}

@Override
public void onUpdateNodePreview(NodePreviewContext context) {
    context.rebuild();
}
```
Tokens:
Raw