A simple and lightweight library for Vanilla JavaScript, allowing you to create a reactive UI.

Features

• Declarative syntax ( functional components! )
• Reactive state management based on nice Binding ( valueOf )
• Powerful reactive lists ( listOf based on Map )
• No VDOM! - less memory usage
• Bindable styles:

style: { color: myValue.bind() } // changing myValue will affect the css property 'color'

Basics

Simple counter:

import { $, valueOf } from './v.js';

function CounterApp() {
  const counter = valueOf(0);

  return $('div', {}, [
    $('button', {
      textContent: counter.bind(v => `Clicked: ${v} times`),
      onclick() {
        ++counter.value;
      }
    })
  ]);
}

document.body.appendChild(CounterApp());

Todo app:

import { $, listOf, valueOf } from './v.js';

function TodosApp() {
  const todos = listOf();
  const todoContent = valueOf('');

  return $('div', {}, [
    $('input', {
      value: todoContent.bind(),
      onchange(e) {
        todoContent.value = e.target.value;
      }
    }),
    $('button', {
      textContent: 'New Todo',
      onclick() {
        if(todoContent.value.trim() !== '') {
          todos.add(todoContent.value);
          todoContent.value = '';
        }
      }
    }),
    $('div', {}, todos.bindEach((value, key) => {
      return $('p', {
        textContent: value,
        onclick() {
          todos.remove(key);
        }
      });
    }))
  ]);
}

document.body.appendChild(TodosApp());

Text nodes as children:

import { $, valueOf } from './v.js';

function Counter() {
  const counter = valueOf(0);
  
  return $('button', {
    onclick() {
      ++counter.value;
    }
  }, [ 'Clicked: ', counter.bind(), ' times' ]);
}

• SVG Elements support
• Maybe more...

Future versions will fix bugs and improve performance