Getting Started

Sinuous is a small JS library for creating user interfaces.

One of the main goals is to keep that plain JavaScript feel and introduce as few specialized concepts as possible while offering a simple way to create declarative views.

Installation

Sinuous is available on NPM for use with a module bundler or in a Node application:

npm install sinuous

Basic Example

A component is a plain JS closure which can be re-used by adding <${Component}/> to your view.
A component returns a regular HTML element. No render function needed.
Any defined attributes are passed to the component as props.

A view can be declared with JavaScript's native tagged template literals html`` or with h function calls.

State is defined as observables, don't let this scare you, in this context it simply translates to dynamic parts in your view. An observable returns a function that can act as a getter or setter. Get the value by passing no arguments, set a new value by passing the value as argument.

That's it in a nutshell!

import { observable, html } from 'sinuous';

/**
 * A simple Timer component.
 * @param  {object} props
 * @return {Element}
 */
const Timer = props => {
  // Create an obervable with number `0`.
  const seconds = observable(0);

  function tick() {
    // Get the current value and increment the value with 1.
    seconds(seconds() + 1);
  }
  setInterval(tick, 1000);

  // Creates the view of this component.
  return html`
    <div>${props.unit}: ${seconds}</div>
  `;
};

document.querySelector('.counter-example').append(
  // Use the component and pass some props.
  html`
    <${Timer} unit="Seconds" />
  `
);