DisplayKit

DisplayKit Documentation

DisplayKit is a network-synchronised 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 a quick overview of features with a focus on examples.
If you wish to learn more about the UI styling, check out Unity's UI Toolkit, on which this framework is built on.

Features

• Server-Authoritative - All UI elements are created on the server and automatically synchronised 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

Add a reference to UnityEngine.UIElementsModule and UnityEngine.TextRenderingModule to use certain properties.

using DisplayKit.Elements;
using UnityEngine;
using UnityEngine.UIElements;

// 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