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.

$ npm install rasti

import { Model, Component } from 'rasti';

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

<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.

// 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

// 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

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

Complete API documentation.

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, a JavaScript DOM-based remake of the classic Ms. Pac-Man game, utilizes Rasti at a low level for its custom game engine.

MIT