JsonUI Scripting

JSON User Interface Scripting

JsonUI Scripting is a NodeJS library used to build a JsonUI resource pack for Minecraft: Bedrock Edition. With this library, you can modify the user interface and how certain user interfaces function for Minecraft: Bedrock Edition, similar to JsonUI!

Installation

To install the required dependencies, run the following command in your project directory:

Batch

npm install jsonui-scripting

This will add jsonui-scripting to your project's package.json file and download the package into your node_modules directory.

How to use

The syntax is very simple, I can provide an example using code snippets displaying 'Hello World!' text on the Start Screen as follows:

JavaScript

// Import the JsonUIElement and Modify classes from JsonUI Scripting.
const { JsonUIElement, Modify } = require('jsonui-scripting');

// Create an image element to be used as the background for the text
const textBackground = JsonUIElement.image({
    texture: 'textures/ui/Black',
    size: "100%cm + 2px",
    layer: 10,
    alpha: 0.8
});

// Create a text element with the content "Hello World!"
const text = JsonUIElement.label({
    text: "Hello World!"
});

// Add the text element to the image background
textBackground.addElement(text);

// Insert the image background (with the text element) into the start screen's content controls
Modify.StartScreen('start_screen_content').modifications.controls.insertFront(textBackground);

And the code snippet you will receive in JsonUI format will be as follows after you run javascript code:

JSON

{
    "namespace": "app",
    "app-js:5:38": {
        "type": "image",
        "texture": "textures/ui/Black",
        "size": [ "100%cm + 2px", "100%cm + 2px" ],
        "layer": 10,
        "alpha": 0.8,
        "controls": [ { "d8202554472234d22b5c841fe@app.app-js:13:28": {} } ]
    },
    "app-js:13:28": {
        "type": "label",
        "text": "Hello World!"
    }
}

JSON

{
    "start_screen_content": {
        "modifications": [
            {
                "array_name": "controls",
                "operation": "insert_front",
                "value": [ { "a9e0fe62cac2194d5b9a4a297@app.app-js:5:38": {} } ]
            }
        ]
    }
}

And here is what you will get when you install the resource pack you just finished building.