Guiora is a simple GUI library for Deno. It is working with SDL2 and Rust.

Start by cloning the repository:

git clone

Then, you need to compile the Rust code:

cd guiora
make all --lib=1 --release=1

Note: This will create a target folder and a bin folder where the compiled lib file will be as libguiora.so.

Note: Guiora is still in development, so the API is not fully finished.

const guiora = new Guiora("Guiora", 800, 600);
guiora.run();

This will create a window with the title "Guiora" and a size of 800x600. In the window, you will see a red square that will move along your mouse.

You can modify the run() function in the Guiora class to create your own objects.

Then you can run your code with:

deno run -A --unstable mod.ts

The mouse struct is the following:

class GuioraMouse {
    x: number;
    y: number;
    state: number;
}

You can access the mouse directly from the Guiora instance you created:

const mouse = guiora.mouse;

There is prebuilt functions to know if a button is pressed or not:

You can listen to mouse events with the following code:

mouse.onClick((e) => {
  ...
});

mouse.onPress((e) => {
  ...
}

mouse.onRelease((e) => {
  ...
});

mouse.onMove((e) => {
  ...
});

mouse.onDrag((e) => {
  ...
});

mouse.onLeftClick((e) => {
  ...
});

mouse.onRightClick((e) => {
  ...
});

mouse.onMiddleClick((e) => {
  ...
});

Guiora has a built-in color struct:

class GuioraColor {
    r: number;
    g: number;
    b: number;
    a: number;
}

You can creata custom color with the following code:

const color = new GuioraColor(255, 0, 0, 255);
// or
const color = Colors.fromHex("#ff0000"); // #rrggbb or #rrggbbaa

Also, there is a built-in color palette you can access it with the Colors object:

The Colors object has also some prebuilt functions:

The canvas is the main object you will use to draw on the screen. It is defined by the following struct:

class GuioraCanvas {
    width: number;
    height: number;
}

You can access the canvas directly from the Guiora instance you created:

const canvas = guiora.canvas;

The canvas has the following functions:

An element is the base class for all the drawable objects. It is defined by the following struct:

class GuioraElement {
    x: number;
    y: number;
    color: GuioraColor;
    visible: boolean;
    render: (lib: Guiora) => void;
    update: (lib: Guiora) => void;
}

The render function is called every frame to draw the element on the screen. The update function is called every frame to update the element.

There are some prebuilt elements you can use:

A rectangle is defined by the following struct:

class GuioraRect extends GuioraElement {
    width: number;
    height: number;
}

const rect = new GuioraRect(0, 0, 100, 50, Colors.Red);
canvas.push(rect);

A button is defined by the following struct:

class GuioraButton extends GuioraRect {
    text: string;
}

const button = new GuioraButton(
  0, 0, 100, 50, Colors.Red, "Click me!"
);
canvas.push(button);

Note: The text is not rendered now, but it will be in the future.

Like the mouse, there is prebuilt functions to know if a button is pressed or not:

You can listen to button events with the following code:

button.onClick((e) => {
  ...
});

button.onLeftClick((e) => {
  ...
});

button.onMiddleClick((e) => {
  ...
});

button.onRightClick((e) => {
  ...
});

button.onRelease((e) => {
  ...
});

button.onHover((e) => {
  ...
});

button.onEnter((e) => {
  ...
});

button.onLeave((e) => {
  ...
});

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

• Hokanosekai

This project is licensed under the MIT License - see the LICENSE file for details.

• Rust
• SDL2
• Deno