I was wondering if I could replace Vue.js in one of my projects by something smaller in 15 minutes.

After 2 days, I have a small MVP that supports most of the things I need.

You might not need a frontend library

The problem that most modern JS libraries are solving is binding data to variables in a state.

These libraries are often huge and difficult to debug, since a lot of their magic is abstracted.

This project aims to create a very small function that allows bidirectional data binding with the DOM.

Extend and modify as you wish, this is only a starting point.

This implementation brings no additional render step and builds upon functionnality that already exists in the DOM. No shadow DOM is used.

bindStateToDom usage

Copy paste the bindStateToDom in your code (or in a file) and use it like this:

const state = {
  meal: {
    vegetable: "Potato",
    vegetableCount: 42,
    fruits: [
  lines_of_code: '?'

bindStateToDom(state, document.body, {extraComponents: extraComponents});

// To change an element programmatically
// To add an element to an array
// To add an element somewhere in the middle of an array
state.meal.fruits._append(2, "Pineapple");




Why use something like this then?

Sometimes, you don't need all of vue or React's functionnality to create simple forms and applications. Using smaller libraries in this case could help speed up the web.


The next content shows everything that works


Add element

Form -

<potatoout> A user defined output component


Number (Mirror) -

The state

state = {
  meal: {
    vegetable: ,
    vegetableCount: ,
    fruits: ,

The code - lines, with comments


Implemeting data binding with dynamic arrays is difficult. But I think I got it right.

This is just a proof of concept that you don't need all the slugginess some libraries bring to get the benefits of bidirectional data binding

Things that are already optimized in the browser, such as querySelectorAll with attribute selectors, can be leveraged to make low-overhead and low-memory footprint data binding.

For more advanced alternatives, see

Simulacra Moon Preact

You don't need React

As developers, we have the responsibility to save energy and people's CPU. Start by only including the minimal amount of dependencies!
Try living with an old chromebook sometimes.
Slow apps generate need for more new faster computers.
Keep your apps working on old hardware, reduce power consumption and computer waste.

Have a nice day