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