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.

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