Visual Designer

Learn how to use the ZUI Canvas Designer - a web-based tool for designing UI layouts visually without manual coordinate calculations.

📋 Table of Contents

Overview
Getting Started
Interface Tour
Creating Your First Layout
Working with Elements
Exporting Code
Tips & Tricks
Limitations

Overview

The ZUI Canvas Designer is a free, web-based tool that lets you:

✅ Design UI layouts visually with drag-and-drop
✅ Preview your design in real-time
✅ Export ready-to-use C# code
✅ Test different layouts instantly
✅ No installation required

Access the designer: https://zanakinz.github.io/ZUI

When to Use the Designer

✅ Use the designer when:

Creating custom windows with complex layouts
You want to visualize spacing and alignment
Experimenting with different designs
You're new to ZUI and want to learn positioning

❌ Skip the designer when:

Adding simple buttons to the main menu
Creating dynamic content that changes at runtime
You're comfortable with manual coordinate positioning

Getting Started

Step 1: Open the Designer

Navigate to https://zanakinz.github.io/ZUI in any modern web browser.

Step 2: Set Canvas Size

Look for the Canvas Settings panel (usually top-right)
Enter your desired window dimensions:
- Width: 400-1200 pixels (recommended: 600)
- Height: 300-800 pixels (recommended: 400)
Click Apply or press Enter

Common window sizes:

Small:  400x300  - Compact status displays
Medium: 600x400  - Standard control panels
Large:  800x600  - Detailed dashboards
Wide:   1000x500 - Horizontal layouts

Step 3: Add Elements

Click the buttons in the Elements panel to add:

Text - Labels and information
Button - Interactive buttons
Category - Section headers
Image - Custom graphics

Interface Tour

Canvas Area

The main white area represents your window. Elements appear here as you add them.

Grid lines help with alignment
Element outlines show boundaries
Drag elements to reposition them

Properties Panel

When you select an element, you'll see:

For Text Elements:

Text Content: The display text
X Position: Horizontal position (pixels from left)
Y Position: Vertical position (pixels from top)
Size: Font size
Color: Text color

For Buttons:

Button Text: Label shown on button
Command: Chat command to execute (e.g., .heal)
X, Y Position: Location on canvas
Width, Height: Button dimensions

For Images:

Image Name: Filename in your mod (e.g., logo.png)
X, Y Position: Location
Width, Height: Display dimensions

Toolbar

Add Element: Buttons to insert new elements
Delete: Remove selected element
Duplicate: Copy selected element
Export Code: Generate C# code
Clear All: Start over

Creating Your First Layout

Let's create a simple status window step-by-step.

Example: Player Status Window

Goal: Create a 500x350 window showing player stats

Step 1: Set Canvas Size

Width: 500
Height: 350

Step 2: Add Title Text

Click Add Text
Set properties:
- Text: Player Status
- X: 20
- Y: 20
- Size: 18
Position it at the top-left

Step 3: Add Stat Labels

Add three text elements:

Health Label:

Text: Health:
X: 20
Y: 70

Mana Label:

Text: Mana:
X: 20
Y: 120

Speed Label:

Text: Speed:
X: 20
Y: 170

Step 4: Add Action Button

Click Add Button
Set properties:
- Text: Refresh Stats
- Command: .refreshstats
- X: 20
- Y: 230
- Width: 200
- Height: 40

Step 5: Preview

Look at your canvas - you should see:

Title at top
Three stat labels stacked vertically
Refresh button at bottom

Step 6: Export Code

Click Export Code to get:

Call("SetPlugin", "MyMod");
Call("SetTargetWindow", "StatusWindow");
Call("SetUI", 500, 350);
Call("SetTitle", "Player Status");

Call("AddText", "Player Status", 20f, 20f);
Call("AddText", "Health:", 20f, 70f);
Call("AddText", "Mana:", 20f, 120f);
Call("AddText", "Speed:", 20f, 170f);
Call("AddButton", "Refresh Stats", ".refreshstats", 20f, 230f, 200f, 40f);

Working with Elements

Selecting Elements

Click on an element to select it
Selected elements show handles or highlight
Properties panel updates to show selected element

Moving Elements

Method 1: Drag

Click and drag element to new position
Use grid lines for alignment

Method 2: Properties

Enter exact X, Y coordinates
More precise for pixel-perfect layouts

Resizing Elements

For Buttons and Images:

Drag corner handles (if available)
Or enter Width/Height in properties

For Text:

Adjust Size property to change font size
Text automatically fits content

Duplicating Elements

To create similar elements:

Select element to copy
Click Duplicate
Move duplicate to new position
Update text/properties

Example: Create multiple stat labels quickly

Deleting Elements

Select element
Click Delete button
Or press Delete key (if supported)

Exporting Code

Basic Export

Design your layout completely
Click Export Code button
Copy the generated C# code
Paste into your mod's RegisterUI() method

Customizing Exported Code

The exported code gives you a starting point. You'll want to:

Add Plugin Context

// Designer generates:
Call("SetUI", 600, 400);
Call("AddText", "Hello", 20f, 50f);

// You add:
Call("SetPlugin", "MyMod");
Call("SetTargetWindow", "MyWindow");
Call("SetUI", 600, 400);
Call("SetTitle", "My Window");
Call("AddText", "Hello", 20f, 50f);

Replace Static Text with Variables

// Designer generates:
Call("AddText", "Health: 100", 20f, 50f);

// You change to:
Call("AddText", $"Health: {currentHealth}", 20f, 50f);

Use Constants

// Designer generates:
Call("SetUI", 600, 400);
Call("AddText", "Title", 20f, 20f);
Call("AddButton", "Button", ".cmd", 20f, 70f);

// You improve to:
const int WIDTH = 600;
const int HEIGHT = 400;
const float MARGIN = 20f;
const float SPACING = 50f;

Call("SetUI", WIDTH, HEIGHT);
Call("AddText", "Title", MARGIN, MARGIN);
Call("AddButton", "Button", ".cmd", MARGIN, MARGIN + SPACING);

Tips & Tricks

Layout Planning

Use the 20-pixel rule:

Start elements at 20px from edges
Use 50px spacing between elements
Provides clean, professional look

Example spacing:

Y:  20 - Title
Y:  70 - First element (20 + 50)
Y: 120 - Second element (70 + 50)
Y: 170 - Third element (120 + 50)

Alignment Techniques

Left-align everything:

All elements X: 20
Creates clean vertical line

Center an element:

X = (WindowWidth - ElementWidth) / 2
Example: (600 - 200) / 2 = 200

Right-align an element:

X = WindowWidth - ElementWidth - Margin
Example: 600 - 200 - 20 = 380

Grid-based Layout

Design on an invisible grid:

Columns: 0, 200, 400 (every 200px)
Rows: 0, 50, 100, 150, 200 (every 50px)

Place elements at grid intersections

Color Preview

When designing colored text:

Use rich text syntax: <color=#FF0000>Red Text</color>
Designer may not show colors, but code will work
Test in-game for final appearance

Button Sizing

Standard button sizes:

Small:   150 x 30  - Compact actions
Medium:  200 x 40  - Default size
Large:   250 x 50  - Emphasis
Full:    560 x 40  - 20px margin on 600px window

Testing Workflow

Design in Visual Designer
Export code
Add to mod
Test in-game
Adjust coordinates if needed
Update designer file (if saving)

Limitations

What the Designer Can't Do

Dynamic Content:

Designer creates static layouts
Can't preview runtime data updates
Export code needs manual variable integration

Advanced Styling:

Limited rich text preview
Can't preview all Unity rich text features
Color preview may not match in-game

Images:

Can't upload/preview your actual images
Shows placeholder rectangles
Final appearance depends on your image files

Event Handling:

Commands are just strings
Can't test button functionality
No callback support in designer

Workarounds

For dynamic content:

// Design static placeholder:
Call("AddText", "Health: 100", 20f, 50f);

// Replace in code:
Call("AddText", $"Health: {player.Health}", 20f, 50f);

For rich text:

// Design plain text:
Call("AddText", "Warning Message", 20f, 50f);

// Add styling in code:
Call("AddText", "<color=#FF0000><b>Warning Message</b></color>", 20f, 50f);

For images:

// Designer uses placeholder:
Call("AddImage", "image.png", 20f, 20f, 200f, 100f);

// Code works with your actual embedded image

Example Workflow

Complete Design Process

1. Planning (5 minutes)

Sketch on paper or mentally plan layout
Decide window size
List all elements needed

2. Design (10 minutes)

Open Visual Designer
Set canvas size
Add elements
Arrange and align

3. Export (2 minutes)

Click Export Code
Copy generated code

4. Integration (10 minutes)

Paste into mod
Add plugin context
Replace static values with variables
Add constants for spacing

5. Testing (5 minutes)

Build and test in-game
Make minor adjustments
Verify all buttons work

Total time: ~30 minutes for a complete custom window

Real-World Example

Before Designer (Manual Positioning)

Calculating positions manually:

// Math required for each element:
// Title: Y = 20
// Category: Y = 20 + 40 = 60
// Button 1: Y = 60 + 50 = 110
// Button 2: Y = 110 + 50 = 160
// Button 3: Y = 160 + 50 = 210

Call("AddText", "Title", 20f, 20f);
Call("AddCategory", "Actions", 20f, 60f);
Call("AddButton", "Action 1", ".act1", 20f, 110f);
Call("AddButton", "Action 2", ".act2", 20f, 160f);
Call("AddButton", "Action 3", ".act3", 20f, 210f);

After Designer (Visual Layout)

Just drag and drop in designer, then export:

// Positions calculated automatically by designer
Call("AddText", "Title", 20f, 20f);
Call("AddCategory", "Actions", 20f, 60f);
Call("AddButton", "Action 1", ".act1", 20f, 110f);
Call("AddButton", "Action 2", ".act2", 20f, 160f);
Call("AddButton", "Action 3", ".act3", 20f, 210f);

Benefits:

Visual preview while designing
No math needed
Easy to reposition elements
Faster iteration

Examples & Tutorials - Step-by-step guides
API Reference - Complete method documentation
Custom Windows - Window creation guide
Color & Styling - Rich text formatting
Best Practices - Design patterns

The Visual Designer makes UI creation fast and intuitive. Try it for your next ZUI project!

Get the Thunderstore App

Visual Designer

Visual Designer

📋 Table of Contents

Overview

When to Use the Designer

Getting Started

Step 1: Open the Designer

Step 2: Set Canvas Size

Step 3: Add Elements

Interface Tour

Canvas Area

Properties Panel

Toolbar

Creating Your First Layout

Example: Player Status Window

Step 1: Set Canvas Size

Step 2: Add Title Text

Step 3: Add Stat Labels

Step 4: Add Action Button

Step 5: Preview

Step 6: Export Code

Working with Elements

Selecting Elements

Moving Elements

Resizing Elements

Duplicating Elements

Deleting Elements

Exporting Code

Basic Export

Customizing Exported Code

Add Plugin Context

Replace Static Text with Variables

Use Constants

Tips & Tricks

Layout Planning

Alignment Techniques

Grid-based Layout

Color Preview

Button Sizing

Testing Workflow

Limitations

What the Designer Can't Do

Workarounds

Example Workflow

Complete Design Process

Real-World Example

Before Designer (Manual Positioning)

After Designer (Visual Layout)

Related Pages

Pages

About

Developers