Quick Start

This is the fastest path from zero to a working behavior. Use NPM if you already have a build step, or use the script tag if you want to drop VSN.js into an SSR page.

1. Use the CDN

<script src="https://unpkg.com/vsn/dist/index.min.js" type="module" auto-mount></script>

<script type="text/vsn">
behavior #example {
  count: 0;

  behavior .increment {
    on click() { count++; }
  }
}
</script>

2. Add HTML

<div id="example">
    <button class="increment">Click me</button>
    <span vsn-bind="count"></span>
</div>

Clicking the button now increments count in the element scope.

Installing (optional)

If you're extending VSN.js or bundling it with your app, install via NPM:

npm i vsn

Then import and mount:

import { Engine } from "vsn";

const engine = new Engine();
engine.registerBehaviors(source);
engine.mount(document.body);

Next steps

• Read Installation for bundler setups.
• Read First Behavior for a deeper walkthrough.

Notes from the creator

We asked ‘what if JavaScript looked more like CSS?’ and responsibly ignored the answer.