Sabertooth NPM

Sabertooth

A hardware accelerated user interface framework for JavaScript.

Sabertooth is inspired by QT, uses super-fast PIXI.js under-the-hood and renders in webGL with canvas fallback. Widgets are extensions of PIXI.Container and therefor most of those properties, such as tint, alpha, blending modes and filters(shaders) apply. Custom widgets and custom styling are easily accomplished by sub-classing existing widgets and modifying or creating new style sheets.

This project aims to be a full-fledged user interface framework for games, editors and other creative projects. A limited set of widgets and layouts are implemented and it may undergo some big changes before the first major release. See examples and stay up-to-date on what classes are available by viewing the docs.

Get Started

The easiest way to get started with Sabertooth is to download the latest release.

Example:

<script src="Sabertooth.min.js"></script>
<script>
    let app = new ST.App(/*options*/);

    let tb = new ST.Widgets.TextButton(app.root, {
        text: 'My Button',
        x: 100,
        y: 100,
        width: 200,
        height: 30,
    });

    // Set a click callback
    tb.on('click', ()=>{
        console.log('My Button Was Clicked!');
    });

    //main loop
    let main = function () {
        app.update(); // Update UI logic
        requestAnimationFrame(main); // Loop
    }

    main(); // Begin the main application loop
</script>

Install with npm:

 $> npm install Sabertooth

Example:

import * as ST from 'sabertooth'; // for es6 modules

let app = new ST.App(/*options*/);

let tb = new ST.Widgets.TextButton(app.root, {
    text: 'My Button',
    x: 100,
    y: 100,
    width: 200,
    height: 30,
});

// Set a click callback
tb.on('click', ()=>{
    console.log('My Button Was Clicked!');
});

//main loop
let main = function () {
    app.update(); // Update UI logic
    requestAnimationFrame(main); // Loop
}

main(); // Begin the main application loop