@voxjs/vox NPM

vox.js

⚡️ INSTANT INTERACTIVITY FOR THE WEB 💫

Vox is a tiny (≈7KB) JavaScript library that allows you to enhance your HTML with declarative two-way data bindings, using simple, native-like attributes (directives).

‎

<script src="vox.min.js"></script>

<div vox="{ world: [ '🌏', '🌍', '🌎' ] }">
  hello, <span vox:text="world.join(' ')"></span>!
  <br/>
  <button vox:onclick.once="world.push('👽')">
    click...
  </button>
</div>

<script>
  const app = vox();
  app.init();
  // ...that's all, folks!
  app.exit();
</script>

‎

DOCUMENTATION

HOME
INSTALLATION
MAIN CONCEPTS
API REFERENCE
SHOPIFY
RESOURCES

‎

demo or it didn't happen.

🔗 <counter/>

<div vox="{ count: 0 }">
  <button vox:onclick="(count--)">
    &minus;
  </button>
  <span vox:text="(count)"></span>
  <button vox:onclick="(count++)">
    &plus;
  </button>
</div>

‎

🔗 <dialog/>

<div vox="{ open: false }">
  <button vox:onclick="(open = !open)">
    click
  </button>
  <div vox:if="(open)">
    hi! 👋
  </div>
</div>

‎

🔗 <tabs/>

<div vox="{ tab: 0 }">
  <button vox:onclick="(tab = 1)">
    tab 1
  </button>
  <button vox:onclick="(tab = 2)">
    tab 2
  </button>
  <button vox:onclick="(tab = 3)">
    tab 3
  </button>
  <div vox:hidden="(tab !== 1)">
    cupcake 🧁
  </div>
  <div vox:hidden="(tab !== 2)">
    cookie 🍪
  </div>
  <div vox:hidden="(tab !== 3)">
    chocolate 🍫
  </div>
</div>

‎

🔗 <to-dos/>

<div vox="{ todos: [ '☕️', '💻', '💤' ] }">
  <ol vox:if="(todos.length > 0)">
    <li vox:for="(todo in todos)">
      <span vox:text="(todo)"></span>
      <button vox:onclick="{
        todos.splice(todos.indexOf(todo), 1);
      }">
        &times;
      </button>
    </li>
  </ol>
  <form vox:onsubmit.prevent="{
    todos.push(els.input.value || '…');
    els.input.value = '';
  }">
    <input placeholder="…" vox:el="('input')"/>
    <button>add to-do</button>
  </form>
</div>

‎