Package Exports

@voxjs/vox
@voxjs/vox/dist/vox.js
@voxjs/vox/dist/vox.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@voxjs/vox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

‎