Quick Start: 10-Minute GUI App

Build and run your first 120 FPS cross-platform Material Design 3 application with Nyx in under 10 minutes.

1. Create a Project

nyx init my_gui_app
cd my_gui_app

This initializes a standard Nyx workspace:

my_gui_app/
  nyx.pkg          # Package manifest & target dependencies
  src/
    main.nyx       # Material 3 entry point
  tests/           # Integration tests

2. Write a Material 3 UI App

Open src/main.nyx and paste the following production GUI code:

module main

import std.ui.*

pub fn main() {
    // 1. Initialize ThemeProvider (Light / Dark mode runtime toggle)
    let mut theme = ThemeProvider::new(true)

    // 2. Initialize 120 FPS Hardware Window Context
    let win = Window::new(1280, 800, "Nyx MD3 Interactive Studio")

    while !win.should_close() {
        win.poll_events()
        let ctx = win.canvas()

        // Layout Structure using P0 Widgets (Padding, SizedBox, Center, Expanded)
        let pad = Padding::all(24.0)
        let box = SizedBox::new(320.0, 180.0)

        ctx.clear(theme.background_color)
        ctx.draw_rounded_rect(30.0, 40.0, box.width, box.height, 16.0, theme.surface_color)
        ctx.draw_text("Nyx Material 3 Studio", 50.0, 80.0, 20.0, theme.text_color)

        // Visual Debug Overlay
        debugDumpApp()

        win.swap_buffers()
    }
}

3. Run Natively or Target Web / Mobile

# 1. Compile & Run Native Desktop GUI (120 FPS)
nyx run

# 2. Target WebAssembly HTML5 Canvas
nyx build --wasm
# Open http://localhost/nyx/web-runtime/index.html

# 3. Target Mobile APK / XCFramework
nyx build --target=android
nyx build --target=ios

Live Interactive Demo

Test the interactive 120 FPS Canvas Studio in your browser right now:

Launch WebAssembly Studio Demo →