DisplayKit

DisplayKit Documentation

DisplayKit is a network-synchronized UI framework for SCP: SL that allows server-side creation and management of UI elements displayed to clients.
This guide has been made in order to help developers with a quick start. Our goal is to provide quick overview of features with focus on examples.
If you wish to learn more about the UI styling, check out Unity's UI Toolkit, which this framework is built on.

Features

• Server-Authoritative - All UI elements are created on the server and automatically synchronized to observers
• Per-Player or Global Canvases - Create individual UI per player or shared global UI
• Automatic Network Sync - Changes to UI elements automatically sync to all observers
• Efficient Dirty Tracking - Only modified properties are sent over the network
• Full Flexbox Support - CSS-like flexbox layout system
• Complete Styling - Backgrounds, borders, text, positioning, transforms, and more

Quick Start

using DisplayKit.Elements;

// Create a global canvas (all players see it)
DisplayCanvas canvas = DisplayCanvas.Create();
canvas.DefaultVisibility = CanvasVisibility.Visible;
canvas.Background.Color = new Color(0, 0, 0, 0.8f);

// Add text
DisplayText welcomeText = canvas.AddText("Welcome to the Server!");
welcomeText.Text.Font = FontType.RobotoBold;
welcomeText.Text.FontSize = 48f;
welcomeText.Text.Color = Color.white;
welcomeText.Text.Align = TextAnchor.MiddleCenter;

// Center the text
canvas.Align.AlignItems = Align.Center;
canvas.Align.JustifyContent = Justify.Center;

// Send to all players
canvas.Spawn();

Result

Basic Workflow

1. Create a Canvas - The root container for all UI elements
2. Add Elements - Add text or container elements to the canvas
3. Configure Styles - Set visual properties (colors, sizes, fonts, etc.)
4. Spawn to Players - Send the canvas to clients
5. Update as Needed - Modify properties and changes sync automatically

Pages

• Creating Elements - How to create canvases and elements
• Modifying Elements - Updating element properties
• Deleting Elements - Removing elements and canvases
• Sending to Players - Per-player vs global canvases
• Element Reference - API documentation for elements
• Style Properties - Complete styling reference
• Examples - Practical code examples