The framework that stays in your HTML

Why

Three things it does differently

The DOM afterwards

Your markup does not become framework output

Inspect the paragraph below with your browser's dev tools. The attributes that made it reactive are gone from the document; the binding is still live.

<p class="greeting"
   v-data="{ name: 'Vudu' }"
   v-text="'Hello, ' + name"></p>

<p class="greeting">Hello, Vudu</p>

Same counter

The same feature, four ways

A counter with two buttons, a derived value and a screen that keeps up. The result is identical in all four. What changes is how much you write, and how much you install before you start.

<script src="https://cdn.jsdelivr.net/npm/voodoojs@0.13.0/dist/voodoo.full.min.js" defer></script>

<div v-data="{ n: 0 }">
  <output>{ n }</output>
  <button @click="n--">-</button>
  <button @click="n++">+</button>
  <p>double: { n * 2 }</p>
</div>

<div>
  <output id="out">0</output>
  <button id="dec">-</button>
  <button id="inc">+</button>
  <p id="dbl">double: 0</p>
</div>

<script>
  let n = 0;
  const render = () => {
    out.textContent = n;
    dbl.textContent = 'double: ' + n * 2;
  };
  inc.onclick = () => { n++; render(); };
  dec.onclick = () => { n--; render(); };
</script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<div id="app">
  <output>0</output>
  <button class="dec">-</button>
  <button class="inc">+</button>
  <p class="dbl">double: 0</p>
</div>

<script>
  let n = 0;
  function render() {
    $('#app output').text(n);
    $('#app .dbl').text('double: ' + n * 2);
  }
  $('#app .inc').on('click', () => { n++; render(); });
  $('#app .dec').on('click', () => { n--; render(); });
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <output>{{ n }}</output>
  <button @click="n--">-</button>
  <button @click="n++">+</button>
  <p>double: {{ n * 2 }}</p>
</div>

<script>
  Vue.createApp({
    data: () => ({ n: 0 })
  }).mount('#app');
</script>

Voodoo did not invent reactivity. It put reactivity back inside the HTML without charging a build step for it.

Measured

How it performs against the others

Seven implementations of the same 1,000-row list, all bundled production and minified, run back to back in one process against the same document. Median of 30 samples, in milliseconds, lower is better. After each run every framework's DOM is compared with the hand-written baseline, so anything producing different output is excluded rather than credited with a fast time.

Read honestly: on create Voodoo is third of seven, behind hand-written vanilla and Preact, and vanilla still builds a list twice as fast as we do. On update we are now faster than that hand-written baseline — 4.69 ms against 6.65 — and level with React, though Solid and Preact are ahead and they get there with a compiler. The update column is the noisiest of the three and should be read as a range rather than a ranking. Voodoo is also by far the largest bundle in this table, and if size is your main constraint, Alpine and Preact are the honest recommendation.

Get started

Two ways in, both about a minute

<script src="https://cdn.jsdelivr.net/npm/voodoojs@0.13.0/dist/voodoo.full.min.js" defer></script>

npm install voodoojs

In the box

Twenty-nine components you do not install

They are custom elements the library defines when it starts, so writing the tag is the whole usage. Everything below is running here, on this page.

<v-button variant="primary">Save</v-button>
<v-badge tone="success">Active</v-badge>
<v-progress value="70"></v-progress>
<v-rating value="4"></v-rating>