Skip to content

UI Builder

Introduction

The Balancy UI Builder is a powerful visual tool for creating custom user interfaces using HTML, CSS, and JavaScript. With the recent addition of the Prefab & Component System, you can now build complex, reusable UI elements with script behaviors - similar to Unity's GameObject and MonoBehaviour pattern.

Key Features

  • Visual Editor: Drag-and-drop interface with real-time preview
  • Prefab System: Create reusable UI templates with unlimited nesting
  • Component-Based Architecture: Attach script behaviors to elements like Unity
  • Built-in Templates: Ready-to-use components for shops, offers, and rewards
  • Automatic Integration: Seamless connection to Balancy backend data
  • Cross-Platform: Works on web, mobile, and desktop

Documentation Sections

Getting Started

Prefabs & Components System

API Reference

Templates

What Changed?

The UI Builder has evolved from a single global script approach to a component-based architecture:

Before (Global Script): 

// One large script managing everything
function main() {
  // Manually query elements
  const buyButton = document.getElementById('buy-btn');
  const priceText = document.getElementById('price');

  // Wire up logic
  buyButton.onclick = () => { /* ... */ };
  updatePrice();
}

Now (Component-Based): 

// Small, focused scripts attached to elements
class BuyButton extends balancy.ElementBehaviour {
  // @serialize {element}
  priceText = null;

  awake() {
    this.element.addEventListener('click', () => this.buy());
  }

  buy() { /* ... */ }
}

Benefits:

  • Reusability: Create prefabs once, use everywhere
  • Maintainability: Small, focused scripts are easier to understand
  • Composition: Build complex UIs from simple building blocks
  • Designer-Friendly: Artists can assemble UIs without touching code

Quick Start

  1. Open UI Builder: Go to Assets → Views → Select a view → Open
  2. Add Elements: Drag components from the right panel
  3. Attach Scripts: Select element → Settings tab → Add Script Component
  4. Configure Parameters: Set element references and values in the inspector
  5. Save & Test: Use "Play UI" button to test in Demo App

Next Steps