Vif.js ^beta

Vif.js

A 5kb full featured
reactive components library

Core features is all you need

A smooth mix of Lit, Alpine and Sjs. Including lazy loading and router. With a ridiculous size of 5kb.

Bundle

HTML render

JS render

Reactivity

Lazy-loading

Router

i18n

Vif

5.8 kb

Lit

15.4 kb

Solid

22.2 kb

React

142.6 kb

Vue

147.5 kb

Alpine

43.8 kb

Stimulus

45.8 kb

What does that mean ?

built-in

external module

unofficial support

Give me the counter !

Click to increase the number.

Give me the code !

You want to see more ? Explore all the demos availables on codepen.io

function Counter({ props, html }){
    props.count = useSignal(0);

    return html`
      <button x-on:click="count(count.value + 1)"> 
        Count is <b x-text="count()">0</b>
      </button>
    `;
}

useDefine("counter", Counter);

But what about speed ?

Fast, sustainable, and efficient code is code that consumes less energy and bandwidth.

Vif

Vue

Alpine

Lit

Preact

^{Generate 100 ul with 100 li elements, lower is better.}

Installation guide

Vif is available via NPM, CDN and in IIFE version.

// NPM $ npm install vifjs
import { useDefine, useSignal, useI18n, useObserve, useNavigate } from "vifjs";

// CDN
import { /* ... */ } from "https://cdn.jsdelivr.net/npm/vifjs@latest/esm/vif.js";

// IIFE
<script src="https://cdn.jsdelivr.net/npm/vifjs@latest/iife/vif.js"></script>
const { useDefine, useSignal, useI18n, useObserve, useNavigate } = Vif;

We need your feedback

Hey 👋 i'm @enzoaicardi

I'm the developer of Vif. It is a modest library developed during my free time, I will appreciate your feedback because this will help me fix various bugs and errors, so feel free to post an issue on github !