Sinuous - Small, blazing fast, reactive UI library

npm: npm install sinuous --save
cdn : https://unpkg.com/sinuous/dist/sinuous.js

Intro

Sinuous provides the clarity of declarative views and the performance of direct DOM manipulation.

It was built with these ideas in mind.

• Small: use in other mini libraries like custom elements.
• Simple: plain Javascript feel; template literals, standard HTML.
• Performance : top ranked of 80+ UI libs

Add-ons

Size Name Description sinuous/map Fast list renderer sinuous/template Pre-rendered Template sinuous/observable Tiny observable

Concept

Sinuous started as a little experiment to get similar behavior as Surplus but with template literals instead of JSX. HTM compiles to an h tag. Adapted code from Ryan Solid 's dom expressions + a Reactive library provides the reactivity.

Sinuous returns a hyperscript function which is armed to handle the callback functions from the reactive library and updates the DOM accordingly.

Counter Example ( 1.4kB gzip ) ( Codesandbox )

import { o, h } from 'sinuous';

const counter = o(0);
const view = () => {
  return html`
    <div>Counter ${counter}</div>
  `;
};

document.body.append(view());
setInterval(() => counter(counter() + 1), 1000);

Browser Support

Sinuous supports modern browsers and IE11+:

Use your own reactive library

Sinuous can work with different observable libraries. See the wiki for more info .

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs