# CUSTOM BUTTONS IN JSON UI (Minecraft Bedrock Scripting API and JSON UI) Source: https://www.youtube.com/watch?v=Hrpp2Ihg8lU Recap page: https://rapidrecap.app/video/Hrpp2Ihg8lU Generated: 2026-07-28T02:06:26.98+00:00 --- ## The Gist Custom layout buttons matching CubeCraft server menus are created in Minecraft Bedrock using nested stack panels, collection indices, and dynamic UI variables. ## Quick Overview Custom server form buttons are successfully recreated in Minecraft Bedrock by using a combination of horizontal and vertical stack panels, collection binding names, and UI variables to control padding and sizing. The tutorial guides through replacing the default factory pattern with explicit control references and mapping collection indices to script properties. By configuring button size variables and padding offsets, the user eliminates layout overlapping and achieves an exact visual match of the CubeCraft shop menu interface. **Key Points:** - The creator uses nested stack panels with horizontal and vertical orientations to replicate the complex layout of the CubeCraft server menu. - The default factory pattern for form buttons is removed so that individual buttons can be placed and managed manually. - Collection indices mapped to script properties allow button selections to correctly return the corresponding numeric value in scripting API. - UI variables prefixed with dollar signs and suffixed with pipe default are utilized to define adjustable button sizes across multiple nested layers. - Padding size variables are increased by ten pixels beyond button dimensions to ensure clean spacing and eliminate layout overlaps. - Separate horizontal and vertical sub-stacks are constructed to group the large reward button, the medium shop button, and the two smaller tool and skin buttons in the bottom right corner. - Image size properties are fine-tuned separately from button bounds to ensure textures fill out the designated clickable areas properly. ![Screenshot at 09:17: The completed custom button layout featuring all four reward, shop, ban tool, and skin buttons positioned correctly within the form.](https://ss.rapidrecap.app/screens/Hrpp2Ihg8lU/00-09-17.jpg) **Context:** Minecraft Bedrock Edition allows developers to customize user interfaces using JSON UI and the scripting API, enabling the recreation of popular server menus seen on networks like CubeCraft. ## Detailed Analysis The tutorial demonstrates how to build a custom server form UI from scratch using Minecraft Bedrock JSON UI and scripting. Starting with an outer stack panel set to horizontal orientation, the creator manually places buttons instead of using the default factory pattern. Collection names and collection indices link each button to the scripting API so that clicking a button returns the correct index value. To solve sizing issues where only the outermost layer changed, UI variables like button size, padding size, and icon size are introduced and referenced throughout the element tree. By dividing the layout into a left side for the large reward button and a right stack containing a vertical sub-stack for the shop and a horizontal sub-stack for the ban tool and skins, the exact arrangement of the target server menu is achieved. Adjusting padding sizes relative to button dimensions removes all visual overlap, resulting in a polished and functional custom form. ### Prerequisites and Layout Planning The foundation of the custom UI requires planning the spatial arrangement and setting up the main stack panel containers. - The creator begins by sketching the button positions on an external canvas to determine how to divide the screen into stack panels. - The main panel is converted into a horizontal stack panel centered on the screen to hold the left and right sections. - The factory pattern and automatic length bindings from previous scripts are deleted to allow manual button placement. ![Screenshot at 02:02: The visual layout plan showing how the big button on the left and stacked buttons on the right fit into horizontal stack panels.](https://ss.rapidrecap.app/screens/Hrpp2Ihg8lU/00-02-02.jpg) ### Adding Buttons and Script Bindings Connecting JSON UI controls to the scripting API requires explicit control references and collection indices. - Controls are added manually inside the stack panel by referencing custom button names with proper name spacing. - A collection name property is established so each button can be assigned a unique collection index. - The collection index property is zero-based and maps directly to the selection value returned when a player clicks a button via scripting. ![Screenshot at 04:49: Code implementation showing the collection index property mapped to zero for the first custom button.](https://ss.rapidrecap.app/screens/Hrpp2Ihg8lU/00-04-49.jpg) ### Fixing Sizing with UI Variables Overriding button dimensions across nested layers requires implementing reusable UI variables. - Directly changing the size property on the custom button only affects the outermost layer, leaving inner panels unaffected. - Variables prefixed with a dollar sign and suffixed with pipe default are declared to pass size values down to nested child elements. - Additional variables for padding size and icon size are created to control internal spacing and texture dimensions. ![Screenshot at 06:33: Defining button size, padding size, and icon size variables at the top of the custom button definition.](https://ss.rapidrecap.app/screens/Hrpp2Ihg8lU/00-06-33.jpg) ### Building the Right Stack Panels The right side of the menu is organized using a combination of vertical and horizontal sub-stacks. - A vertical stack panel is created on the right side to hold the medium shop button and a lower horizontal stack. - The lower horizontal stack panel holds the two smaller ban tool and skin buttons side by side. - Collection indices are incremented sequentially from one through three for the remaining three buttons. ![Screenshot at 09:15: The completed block of code configuring the collection indices and button sizes for the bottom right stack.](https://ss.rapidrecap.app/screens/Hrpp2Ihg8lU/00-09-15.jpg) ### Refining Padding and Spacing Proper spacing between buttons prevents graphical overlapping and maintains a clean aesthetic. - Padding sizes are set ten pixels larger than the actual button dimensions to ensure adequate margins around each element. - The creator demonstrates that failing to set padding size variables causes the default fallback size of eighty pixels to restrict button spacing. - Final adjustments to image sizes ensure textures fill out the newly scaled buttons without distortion. ![Screenshot at 07:49: In-game test showing clean padding around the reward button after adjusting the padding size variables.](https://ss.rapidrecap.app/screens/Hrpp2Ihg8lU/00-07-49.jpg)