UI Builder DSL (Native GTK3)

Last modified: 24 May 2026

What is this?

This is ArkCode's crown jewel: a declarative Domain Specific Language integrated seamlessly with the native Linux GTK3 graphics framework.

What is its purpose?

To allow developers to build incredibly fast, native desktop windows and interfaces using clean trailing-closure syntax. By abstracting the complex setup of GTK, it completely avoids C++ UI boilerplate while maintaining 100% native render performance.

Where and how it can be used

Use it to build actual desktop applications. Instead of manually instantiating widgets, configuring pointers, and packing them into containers, ArkCode allows you to define your interface hierarchically. You simply declare the elements and pass configurations directly inside the block.

import std.ui

ark(
    std.ui.drawwindow("Dashboard") {
        
        Navigation() { }
        
        BottomTabs() {
            Tab("Controls") {
                Button(height = 40, width = 120) {
                    text = "Drag Me"
                    mod.movable = 1
                }
                Toggle() { }
            }
            
            Tab("Media") {
                Slider() { }
                Image("assets/logo.png") { width = 150 }
            }
        }
        
    }
)

Physics and Animation Modifiers

ArkCode natively embeds C++ physics engines into the UI tree. You can apply the mod.movable = 1 property to any widget to instantly attach GTK Pointer Motion event hooks, allowing users to drag the element anywhere on the screen.

You can also use mod.fixpath = 1 to bind an element to an automatic, continuously animating fixed path. When combined with mod.shader = your_glsl_block, ArkCode can morph and animate the widget at 60FPS using native threads.

Native CSS Styling

ArkCode uniquely integrates web styling with native GTK3 rendering. You can define complete raw CSS blocks natively in ArkCode and assign them directly to the UI. Note that ArkCode attaches specific classes to its UI elements (like .ark-btn) so that your styles don't accidentally override system window decorations. Additionally, you may need to reset background-image to none for GTK themes to properly render background colors.

css app_theme("""
    button.ark-btn {
        background-image: none;
        background-color: #58a6ff;
        border-radius: 8px;
    }
""")

ark main() {
    ui.style = app_theme
}

How it works

When the compiler/interpreter enters a UI block (like drawwindow, Navigation, or Button), it pushes a context struct onto an internal C++ stack. Inside these blocks, property assignments like text = "Deploy" are intercepted by the parser and routed directly into GTK3 native function calls.

ArkCode performs strict **Compile-Time DSL Verification** (via a recursive verifyDSL pass) that checks all child statements inside a drawwindow layout. If an invalid element (or function call not representing a valid UI widget like Button, Slider, Toggle, Image, or Tab) is placed inside, it triggers a compile-time error: [ArkCode Error] Invalid UI element '...' inside drawwindow block detailing the exact line and column.

For GUI development speed, running an application with the --hot flag enables **UI Hot Reloading**. A file watcher thread monitors the source file for saved modifications. When a change is detected, it runs the compile-time DSL validation check. If verification succeeds, it schedules layout teardown and GTK container rebuild instructions safely on the main thread via the GLib g_idle_add event loop.

Where it can't be used and why

The UI Builder is strictly a desktop-native GTK abstraction designed for high-performance, bare-metal application interfaces. It does not output HTML/CSS, nor can it be used to render WebGL canvases in a browser. It is built explicitly for desktop deployment, and running it on a headless server without an X11/Wayland display will result in a crash.