Skip to content

Components API

Welcome to the CSX Components documentation.
This page describes the visual components available in the engine.

🚧 Under Development

This framework is currently in beta and some features may be incomplete or unavailable. We are continuously working to improve and expand it.

Introduction

The CSX is a markup language designed for creating graphical interfaces, simulations, and presentations. Its proposal is similar to HTML, but focused on graphical components rendered with SkiaSharp in C#.

Its main goal is to simplify the visual construction of applications by providing a clean, organized, and easy-to-learn syntax. The structure is inspired by markup languages and also uses indentation, similar to Python, to represent hierarchy between elements.

CSX can also work together with a custom scripting language called CES, which is responsible for adding logic, events, and behaviors to the components defined in the file.

Basic syntax

In CSX, components are declared using the @ character, followed by the component name and an identifier. The declaration ends with :, indicating that the element may contain properties or child components.

Exemple

@Page main:

In this example:

  • @Page represents the component type.
  • main is the identifier of the element.
  • : indicates the beginning of a block.

Property definition

CSX allows properties to be defined in two ways: inline (on the same line) or block-based.

  1. Inline properties

Properties can be written inside < > directly after the component name.

@Rect <bgcolor:#FF0 width:100 height:40> btn:
  1. Block properties

Properties can also be declared below the component using indentation.

@Rect btn:
    bgcolor:#FF0
    width:100
    height:40

This format is useful when a component has many properties, making the code easier to read and organize.

Child components

When a component contains other elements inside it, the children are declared below the parent component using indentation. 

@Page <bgcolor:#FFF width:800 height:600> main:
    @Text title:
    @Button start:

Overview

Component Description
Content Container component
Blush Drawing pen/brush
Circle Draws circles
Label Displays text
Rect Draws rectangles
Triangle Draws triangles
Content-Image Displays images
Polygons Custom polygon shapes
Page Creates a page/container
Scripts CES scripting integration for CSX

About CSX

CSX is a UI and rendering system built in C# with SkiaSharp.

The engine uses SKCanvas for rendering components such as shapes, text, images and custom graphical elements.