CREATING CUSTOM UI'S WITH JSON UI (Minecraft Bedrock Scripting API and JSON UI)

In this video, I demonstrate how to use JSON UI in combination with the scripting api in the Minecraft Bedrock Edition
🔗Links :
Like What I Am Doing? Concider Supporting Me! : ko-fi.com/dingsel
Join my Discord! : / discord
My Website : skyls.de
Music : • Into the Unknown
JSON UI docs : wiki.bedrock.d...
Vanilla RP : github.com/Zte...
🔥Topics covered in this video:
Script API ActionFormData Forms (Server Forms)
JSON UI Conditional UI Rendering
Binding in JSON UI
Factories in JSON UI
JSON UI Text Operation and Manipulation

[@bolognatious1684]

I found this channel yesterday, and ive been waiting for custom ui. So les goo

[@causalguide]

same

[@RedxAx2]

all of us needed this fr fr, even AI can't provide these info !, please keep going and teach us how to display a form that replace the normal java UI for geyserMC !

[@Dingsel]

To do it in geyserMC just ignore the scripting part and try to figure out the title names that geyser gives

[@Your_worst_nightmare946]

@@Dingselno use cross platforms extension

[@khoidol1720]

You are the one who inspired me a lot of things about Scripting! Keep going

[@LiechYT]

Omgg I have been searching this for yearssss thank you so muchhhh keep gooooing

[@喵嗷嗚]

Oh…2周前（？）

[@Mythicode]

This is amazing! Are you going to make videos on modifying Modal Forms aswell?

[@deesekai07]

Finally i found the useful video for teaching about json ui😭, it's 3am right now

[@herotorxp1796]

auto subscribed! thank you I really need this tutorial.😭😭

[@transparent0000]

我之前有訂閱 而且最近剛好在學自訂ui 然後這部片就出了owo
I had a subscription before and I just happened to be learning to customize UI recently, and then this movie came out owo

[@jaibliss_agent87]

I just need to know if there's a way to get a custom health bar

[@nahoy_dev]

Hud_screen

[@aucraft]

Sim

[@DonTheDevMC]

You’re the g 🎉

[@secRaphyTwin]

Nice vid ❤

[@KhaledBairamBikDaghstani]

Please dont stop!

[@dasoftieguy]

Hello! you're by far the most informative guy in this topic since you actually showed how to open the json ui, but is there a way to code a custom ui (lets say, "newui.json") into the java code? or does it have to be an edit of an already existing file?

[@Dingsel]

You will always have to modify existing code but you can move your code into new files

[@dasoftieguy]

@@Dingsel Alr, thank you!

[@xdsumi]

i loved this ❤

[@JadenAllen]

has mojang swapped over to the ore ui yet? or is this still relevant

[@Dingsel]

Nope. JSON Ui is right now your only option

[@cybi124]

@@Dingsel can u put copy and paste for the manifest so its easy to add the other stuff

[@DarwinDO_Offical]

Is there a way to add images into custom UI menu?

[@THE_CAPPY]

Now can you teach how to modify the ModalFormData please?

[@Dingsel]

what exactly? and why wouldnt this method not apply to modals aswell?

[@THE_CAPPY]

​@@Dingselbasically what I want is to make the textField bigger, I clarify that I don't know anything about json ui

[@bl4ckband]

Hey can u just link the pack so I can see what I did wrong

[@flameguy5]

Check the desc

[@causalguide]

very useful tutorial
(sori for bad englidh)

[@o0.Wadanwab.0o]

how do we make the buttons do stuff?

[@nixytutorials]

on nukkit servers, behavior packs dont want to load. Do you know how to use behavior packs on nukkit?

[@Dingsel]

I dont think you can

[@Icarian_Kotori]

How do you make the buttons run a command when being pressed?

[@Dingsel]

Hey, you will need to know how to use server forms in scripting for that. I did make a video on that but its kinda dated and in german. You might be able to find one of my other responses tho

[@user-zx4bl5tf3g]

You are crazy!

[@ayqet]

Hello Dingsel, I follow the files exactly how you had them laid out but when trying to use this it did nothing for me. Both the normal and custom forms continued to open. Any way you could help me out with this?

[@Dingsel]

I need to see more. Join my discor dand share your code there

[@GamingUduExtra]

Ihope The next part does not take a couple of months.😅😅

[@Dingsel]

🥲

[@_Wrku]

Kannst du das nochmal in deutsch machen?

[@Dingsel]

Schwierig

[@WILD_DRS_OFFICIAL]

hey i loved this video but can we make custom creative category please help❤

[@ewoker17gaming]

The bridge coding?

[@WardenStar]

I really don't understand why you need a resource pack, couldn't you just use a behavior pack because unless you wanted a custom item or something. If someone could explain. :)

[@Dingsel]

It is to style the ui.

[@WardenStar]

@@Dingsel ahh okay 👍

[@LakkzScratch]

how does he even have all the .json files all created and sorted?

[@Dingsel]

can you explain your question further?

[@LakkzScratch]

@@Dingsel You start the tutorial with the manifest, config, and all of these files without explaining how you got them, or you weren't clear enough with how you got them. It just throws me off.
Edit1: Also, how do I test the addon?
Edit2: I figured out how to test it, but using the compass and clock don't work.
Edit3: A lot of bugs started appearing, I followed the tutorial the best I could, I didnt know where you were copy+pasting from so I wrote the copied lines myself. The tutorial was really hard to follow.
Edit4: I tried to follow the tutorial but I don't understand, it doesn't make much since. So I am giving up, unless you know how to fix these problems because I sure can't.

[@Dingsel]

@@LakkzScratch I made this video with the asumption that people who wach this know what a behavior and a rp pack are and how their base strucure looks like. Json ui is quite a complex topic and requires knowlage in many different corners in the minecraft bedrock development. This is by no means a tutorial for beginers. Yes I did use a build tool to coppy over the files to the com.mojang directory which might have been confusing but that is why I only mentioned the stuff that anyone, regardless of their workspace, can recreate. If you have questions to the some files or folders i'm happy to answer them.

[@LakkzScratch]

@@Dingsel It turns out, I missed a period, one little dot. Night development has me tired...

[@Dingsel]

I wonder where that dot was required

[@b4yam]

Where i copy the template?, I've read the description but still don't understand. Forgive me

[@Dingsel]

@@b4yam skyls.de

[@b4yam]

@@Dingsel thank you, now I understand

[@Kirito-ew1ns]

I can not get this to work after 3.56

[@Whoim264]

pls made video about overlay/hud like on the hive deathrun in right up corner(sorry for so bad eng)

[@MetalRT]

Yeah, but I would like to know more or less specifically how to add a watermark, or texts on the screen like some addons do

[@bbfiche]

Love the video, very informative.
I am having trouble with it working in minecraft.
Is it still compatible today and if so, would it be possibly to get the .mcaddon file template to possibly work with it?
Thanks!

[@Dingsel]

Yeh it still works. I may not have the mcaddon file but i have the code on skyls.de

[@itsjanak6337]

yayyyyyyyyyyy

[@EmpireCool4]

Hello Dingsel. How can i add to the code that if i click a button something will happen.

[@Dingsel]

Hey, you will need to know how to use server forms in scripting for that. I did make a video on that but its kinda dated and in german. You might be able to find one of my other responses tho

[@arandomcementcubeoflife]

Is there a way to make the ui open up by a command or function?

[@j.06p80]

you mean a ingame command ?

[@arandomcementcubeoflife]

yes

[@rubylikessonic2]

Copied the code exactly from the website and it does not work :(

[@Dingsel]

well download the pack and try that

[@rubylikessonic2]

@@Dingsel I have, still not working

[@ChristIsGod-Christian]

Tye vanilla rp keeps crashing my game

[@InvysibI]

Father ding, please start the stream

[@Fake_Black6]

Kannst du das auf deutsch nochmal erklären?

[@miracucraftbedrock]

Heeeeeelp

[@Dingsel]

whaaaaaaaat
join my discord

[@miracucraftbedrock]

@@Dingsel is not working

[@Dingsel]

@@miracucraftbedrock well I can't do anything with this information. Join my discord and show what you did.

[@miracucraftbedrock]

Link of discord

[@miracucraftbedrock]

The UI json is not working, I'm doing it for my addon "Miracucraft for Bedrock" and it's not opening and I'm not good with it either

[@SparkPlays101]

Changing the size of a controls long_form@common_dialogs.main_panel_no_buttons "Size" 400, 200 did not work. it kept the same 200, 200

[@User05365]

Tutorial for 1.21?

[@Dingsel]

dude this also works for 1.21

[@User05365]

@@Dingsel oh sorry, do you know why when you click on the menu it doesn't appear?

[@thebloodstonegamers9899]

Yeah, i made chatgpt make this code it didn't work hers the code
import { world, system, ui } from "@minecraft/server";
let isUIVisible = false;
// Function to create and display the custom UI
function showVideoUI(player) {
// Create a simple UI layout
const layout = `

#uiContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid black;
padding: 20px;
text-align: center;
}
#closeButton {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
#videoInput {
width: 80%;
margin-bottom: 10px;
}
#startButton {
padding: 10px 20px;
cursor: pointer;
}


X
Start Video

function closeUI() {
system.run(() => {
ui.close(player);
isUIVisible = false;
});
}
function startVideo() {
const videoLink = document.getElementById('videoInput').value;
system.run(() => {
world.sendMessage(player, \`Playing video: \${videoLink}\`);
// Add logic here to actually start the video
});
}

`;
// Display the UI to the player
ui.open(player, layout);
}
// Function to check the distance between the player and the custom block
function checkPlayerDistance() {
for (const player of world.getPlayers()) {
for (const block of world.getBlocks()) {
if (block.id === "pa:video") {
const distance = player.location.distanceTo(block.location);
if (distance 3 && isUIVisible) {
closeOpenButton(player);
isUIVisible = false;
}
}
}
}
system.run(checkPlayerDistance);
}
// Function to show the "Open" button
function showOpenButton(player) {
const openButtonLayout = `

#openButton {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background-color: white;
border: 1px solid black;
cursor: pointer;
}

Open
function openVideoUI() {
system.run(() => {
showVideoUI(player);
});
}

`;
// Display the "Open" button to the player
ui.open(player, openButtonLayout);
}
// Function to close the "Open" button
function closeOpenButton(player) {
ui.close(player);
}
// Main tick function to keep the script running
function mainTick() {
checkPlayerDistance();
}
system.run(mainTick);

[@Dingsel]

stop the chat gpt

[@thebloodstonegamers9899]

@Dingsel It is chatgpt I specifally said that

[@thebloodstonegamers9899]

@Dingsel my bad autocorrect, I put yeah, I made chagpt make this code, it autocorrected to yeah I've been working on code in It didn't work hers the code

[@thebloodstonegamers9899]

@@Dingsel ill change it

[@dasoftieguy]

this mixes a whole bunch of different language's terms and just random stuff that doesnt mean or do anything
Do not use chatgpt for anything, its not gonna make it easier and you just show as lazy

[@H_PX]

🙏🙏🙏🙏🙏

[@lordianlol7790]

i know this guy

[@Dingsel]

Fr?

[@Phrogfather]

I'm going to say sth racist

[@khoidol1720]

BBlud What