8tentaculos/rasti

Rasti is a minimalistic JavaScript library for building user interfaces.

Rasti is a minimalistic JavaScript library for building user interfaces.
It is designed to simplify the creation of complex dynamic applications by providing a declarative API for building reusable and composable UI components.
Rasti is based on web standards, has a small footprint, and can be used directly in the browser without requiring any boilerplate or configuration.

The project is hosted on GitHub, and it's available for use under the MIT software license.
You can report bugs and discuss features on the GitHub issues page.

Getting started

Using npm

$ npm install rasti

import { Model, Component } from 'rasti';

Using ES modules

import { Model, Component } from 'https://esm.run/rasti';

Using <script> tag

<script src="https://cdn.jsdelivr.net/npm/rasti/dist/rasti.min.js"></script>

const { Model, Component } = Rasti;

The rasti npm package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments.
The UMD builds make Rasti available as a window.Rasti global variable.

A simple Component

// Create Timer component.
const Timer = Component.create`
    <div>
        Seconds: <span>${({ model }) => model.seconds}</span>
    </div>
`;
// Create model to store seconds.
const model = new Model({ seconds: 0 });
// Mount timer on body.
Timer.mount({ model }, document.body);
// Increment `model.seconds` every second.
setInterval(() => model.seconds++, 1000);

Try it on CodePen

Adding sub components

// Create Button component.
const Button = Component.create`
    <button
        onClick="${{ '&' : function() { this.options.onClick() } }}"
    >
        ${({ options }) => options.label}
    </button>
`;
// Create Counter component.
const Counter = Component.create`
    <div>
        ${({ model }) => Button.mount({ label : '-', onClick : () => model.count-- })}
        <span>${({ model }) => model.count}</span>
        ${({ model }) => Button.mount({ label : '+', onClick : () => model.count++ })}
    </div>
`;
// Create model to store count.
const model = new Model({ count: 0 });
// Mount counter on body.
Counter.mount({ model }, document.body);

Try it on CodePen

Example

The rasti GitHub repository includes, in the example folder, an example TODO application that can be used as starter project.

API

Complete API documentation.

Powered by Rasti

Crypto Babylon

Crypto Babylon, a markets analytics platform, leverages the capabilities of Rasti.
The Rasti rendering system is responsible for efficiently rendering a table containing over 300 rows. Additionally, it seamlessly updates the DOM in real-time, handling thousands of messages per second from multiple WebSocket connections.

jsPacman

jsPacman, a JavaScript DOM-based remake of the classic Ms. Pac-Man game, utilizes Rasti at a low level for its custom game engine.

License

MIT